Главная / Сайтостроение / Постоянные элементы страницы блога

Постоянные элементы страницы блога

 Постоянные элементы страницы блогаНедавно я обнаружила, что некоторые авторы не знают, как добавить новый постоянный элемент на страницу блога. Например, виньетку или форму подписки (вон, как в Блоготее под всеми статьями). И тогда приходится каждый раз вставлять эти элементы непосредственно в html-структуру поста. Это совершенно неправильно и очень обременительно. Пора исправлять положение!

Шаблон страницы «Одна запись» Single.php

Если мы собираемся добавлять новые постоянные элементы на страницу отдельного поста, то стоит изучить Single.php в вашей вордпресс теме. Мы уже много раз обсуждали коды разных страниц и разных шаблонов. Но, повторение — мать учения.

Итак, на каком бы языке ни была написана ваша тема Вордпресс, шаблон отдельной записи будет содержать следующие элементы (будем говорить только об элементах, которые меняют что-то во внешнем представлении статьи):

Вызов шапки — header — он добавляет общее заглавие блога, возможно, подпись, картинку:

<?php get_header(); ?>

Вызов контента — content — это, сопсна, то, чем вы заполните данный конкретный пост:

<?php the_content(); ?>

Вызов комментов — comments — здесь будут комментарии:

<?php comments_template(); ?>

Вызов сайдбара — sidebar — выводит боковую колонку:

<?php get_sidebar(); ?>

Вызов футера — footer — завершает страницу «подвалом» с копирайтом, ссылками, счетчиками и т.д.:

<?php get_footer(); ?>

Это элементарные сведения, но они оказываются незаменимы в тот момент, когда вы пытаетесь разобраться, куда же впихнуть этот код кнопок соцсетей или эту подпись, мол, «покупайте наших слоноу»!

Несколько простых советов редактирующим шаблон

Не прерывайте цельные фрагменты кода

Современные темы для Вордпресс стремятся к лаконичности кода. Но даже если шаблон пестрит непонятными символами — не пугайтесь, а приглядитесь, вчитайтесь внимательнее. Вы обязательно обнаружите, что код разделен на законченные фрагменты. Каждый из них отвечает за существование определенного постоянного элемента страницы. Записи php часто заканчиваются такой строкой:

<?php } ?>

А записи на html обязательно имеют закрывающий тег такого вида — </…>. Нередко отдельные фрагменты отделены комментариями (что очень облегчает понимание кода), которые выглядят так:

<!-- комментарии автора кода -->
или так
/* комментарии автора кода */

Кроме того, новый фрагмент всегда начинается с новой строки. В общем, надеюсь, сказанного будет достаточно, чтобы попытаться вычленить отдельные кусочки кода, которые нельзя прерывать.

Очень советую вам изучить шаблон Single.php и определить, какие фрагменты кода выводят конкретные элементы страницы.

А вот между ними как раз можно вставлять свои дополнения!

Простой способ подправить верстку страницы

О чем я говорю? — Вот, например, вы вставили код кнопок сразу после контента и перед комментариями. И они встали как-то криво, налезают на текст, не помещаются, хотя, вроде, по ширине должны располагаться горизонтально… Вообще-то такие вещи лучше делать при помощи стилей CSS. Но иногда достаточно добавить дополнительные пустые строки, между элементами страницы. То есть, в нашем примере, между текстом и кнопками (над кодом кнопок) ставим:

</br>

Можно поставить один, два, три таких тега (каждый на новой строке) — каждый из них создаст пустую строчку.

Возможно, этого будет достаточно, чтобы красиво распределить элементы на странице.

Нужно использовать HTML

Очевидно, что на странице шаблона Вордпресс мы можем добавлять что-то, написанное на html или php. Как правило, мы хотим добавить какой-то, уже готовый, код. И там, где мы этот код скопировали, зачастую есть подробные инструкции, куда его определить.

Но вот, например, мы хотим написать краткое обращение к своим читателям, чтобы оно появлялось в финале каждой нашей записи. Фраза, типа, «Понравилась статья? — Поделись в соцсетях!» — как ее впихнуть в шаблон?

Нужно обернуть ее в контейнер из тегов. Самый простой:

<p>Понравилась статья? - Поделись в соцсетях!</p>

Сюда можно добавить минимальное оформление, форматирование. Например, цвет (красный), выравнивание:

<p style="color: #ff0000; text-align: justify;">Понравилась статья? - Поделись в соцсетях!</p>

Хотя и эти вещи правильнее перенести в таблицу стилей))

Картинки со ссылками и без

Иногда нам хочется добавить на страницу не просто надпись. а, например, виньетку, которая будет открывать или подытоживать текст поста. Это будет картинка без ссылки. Во-первых, она должна быть загружена к вам на блог или на сторонний сервис, чтобы иметь адрес. Во-вторых, пишем такой код:

<img title="Все, что вы напишете тут - будет показываться посетителю при наведении курсора на картинку" src="адрес картинки" alt="название картинки для поисковых систем" width="ширина картинки (в цифрах)" height="высота картинки (в цифрах)" />

Если же это картинка со смыслом, то есть, с ссылкой. Например, это самая простая кнопка для подписки. Тогда код будет выглядеть так:

<a href="адрес ссылки" target="blank"><img title="" src="адрес картинки" alt="" width="" height="" /></a>

А, может быть, это будет изображение письма, нажав на которое, читатель сможет отправить автору письмо? Тогда так:

<a href="mailto:адрес e-mail, на который будет отправлено письмо" target="blank"><img title="" src="адрес картинки" alt="" width="" height="" /></a>

Вот так вот. Надеюсь, эти советы помогут вам сделать первые шаги в редактировании вашего шаблона.

И тогда ваш блог на Вордпресс станет не только красивым, но и абсолютно уникальным!

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    Liubov:
    07.03.2013 в 19:02
    Ochen’ interesnaya tema. Vchera kak raz ves’ den’ provela, chtobi bez straha smotret’ na kod svoego websaita. Ya dumayu, eto u menya poluchilos’smile Teper’ budu pitat’sya ponyat’, chto eto vse-taki znachit. Stat’ya kak raz kstati. Spasibosmile

    katyaru:
    07.03.2013 в 19:12
    Да, большой путь начинается с маленького шага! И он сделан!

    Ольга:
    07.03.2013 в 22:24
    Катя, очень полезная для меня статья, беру в закладки. Я, конечно, уже более-менее разобралась в структуре файла single. Но все равно для меня это пока все трудно дается)). Так что Вашей шпаргалкой буду пользоваться с удовольствием.

    katyaru:
    07.03.2013 в 22:31
    На здоровье!

    tanichka:
    08.03.2013 в 02:02
    Все методом тыка осваивала, даже удивляюсь, как я до этого докатилась. Но статья полезна тем, что устаканила мои потыканные знания.

    Mister Being:
    08.03.2013 в 02:24
    Так по чуть чуть и выучу Вордпресс.

    Алла:
    08.03.2013 в 02:31
    Очень интересно, полезно, разбираюсь с Вордпрессом.

    Блогобабушка:
    08.03.2013 в 11:28
    очень полезная информация. Особенно для новичков. Я сама долго искала тег, который добавляет пустую строку в код.

    Liubov:
    19.03.2013 в 06:09
    Kat’, tak bolee menee vse ponyatno, tol’ko odin vorpos voznik. Chto takoe i zachem vot eto: target=»blank»?

    katyaru:
    19.03.2013 в 10:41
    Это свойство ссылки открываться в новом окне.

    Mister Being:
    19.03.2013 в 12:39
    В новом окне и без имени. А можно еще открывать окна с именем. Применяется, если необходима обработка событий или свойств в дочернем окне (в новом окне).

    Mister Being:
    19.03.2013 в 12:44
    Катя, у тебя очепятка в блоке «Простой способ подправить верстку страницы».
    Тэг по правилам пишется как самозакрывающийся тэг —
    Т.е. косая ставится после слова «бр» и отделяется пробелом.
    Хотя, все современные браузеры не обращают внимание на эту мелочь и обрабатывают как нужно.

    katyaru:
    19.03.2013 в 17:34
    Да, действительно, в варианте именно для xhtml, тег «бр» пишется, как ты говоришь
    угловая скобка br пробел слеш угловая скобка
    Но я пишу так, как указала и именно в этом варианте он считывается лучше всего… Возможно, браузеры вообще не обращают внимания на локализацию слеша…

    Mister Being:
    19.03.2013 в 12:45
    sad( не прошли тэги в моем верхнем коменте

Добавить комментарий

Ваш e-mail не будет опубликован.