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

Недавно я обнаружила, что некоторые авторы не знают, как добавить новый постоянный элемент на страницу блога. Например, виньетку или форму подписки (вон, как в Блоготее под всеми статьями). И тогда приходится каждый раз вставлять эти элементы непосредственно в 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>

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

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