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

Автор:Дата:Как добавить необходимые элементы на страницу Вордпресс? - кнопки, картинки со ссылками и без, призывы, которые будут выводиться в каждом посте

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

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

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

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 07.03.2013


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Постоянные элементы страницы блога" оставлено 14 коммент.

  1. Liubov:

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

    [Ответить]

    katyaru отвечает:

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

    [Ответить]

  2. Ольга:

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

    [Ответить]

    katyaru отвечает:

    На здоровье!

    [Ответить]

  3. tanichka:

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

    [Ответить]

  4. Mister Being:

    Так по чуть чуть и выучу Вордпресс.

    [Ответить]

  5. Алла:

    Очень интересно, полезно, разбираюсь с Вордпрессом.

    [Ответить]

  6. Блогобабушка:

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

    [Ответить]

  7. Liubov:

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

    [Ответить]

    katyaru отвечает:

    Это свойство ссылки открываться в новом окне.

    [Ответить]

    Mister Being отвечает:

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

    [Ответить]

  8. Mister Being:

    Катя, у тебя очепятка в блоке «Простой способ подправить верстку страницы».

    Тэг по правилам пишется как самозакрывающийся тэг —
    Т.е. косая ставится после слова «бр» и отделяется пробелом.

    Хотя, все современные браузеры не обращают внимание на эту мелочь и обрабатывают как нужно.

    [Ответить]

    katyaru отвечает:

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

    [Ответить]

  9. Mister Being:

    :(( не прошли тэги в моем верхнем коменте

    [Ответить]


шесть + 5 =

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

НаверхКарта Сайта