Вывод в шапке блога на WordPress разных объектов — текст на главной

Здравствуйте читатели блога! Только по одному названию этой статьи не все смогут сразу понять, о чём я хочу сегодня рассказать. Для этого нужно прочитать хотя бы несколько абзацев текста ниже.

Все блогеры, которые поставили своей целью вывести какой-нибудь объект, например, текст на главной странице в шапке блога WordPress или изображение, с лёгкостью найдут в Интернете множество инструкций о том, как это реализовать.

Лично я на своём блоге сделал вывод текста в шапке только на главной странице при помощи вот такого кода.

<?php if ((is_front_page()) and (!is_paged())) { ?>
<?php } ?>

Не спрашивайте, почему в шапке — так надо! Код был внедрён успешно, текст отображается правильно и в нужном месте. Вот результат.

Текст в header только на главной странице сайта
Текст на главной странице

Но, если ограничиться только этим кодом, тогда на всех остальных страницах сайта, кроме главной, в хедере останется пустое место. И вот, захотел я на этом пустом месте отображать баннер. Программист из меня не ахти какой и реализовать эту задумку самостоятельно я, естественно, не смог. Пришлось обращаться к специалистам на форуме:

http://mywordpress.ru/

(отдельное спасибо BizWebmaster и Ю.Б.) которые и подсказали правильное решение. Сегодня я постараюсь рассказать и показать на скриншотах, как была реализована эта задача у меня на ресурсе.

Текст на главной

Может, у кого-то из вас и возникнет необходимость сделать что-нибудь подобное в будущем, поэтому приступим. До доработки кода было вот так:

  • текст в шапке на главной странице;
Текст в "шапке" только на главной странице блога
Текст в шапке на главной
  • пустое место на всех остальных страницах блога.
Пустое место в "шапке" на остальных страницах
Без текста остальные страницы

После доработки кода стало вот так:

  • текст в шапке на главной странице;
Текст в "шапке" на главной странице
После доработки главная страница
  • баннер на всех остальных страницах сайта.
Баннер на всех остальных страницах блога
Баннер на остальных страницах

Теперь приступим к самой реализации задуманного. Заходим в Панель администратора WordPress и открываем для редактирования страницу “header.php”.

Редактирование "header.php"
Редактирование

Выбираем место после тэга <body>, куда и вставляем следующий код.

<div id="text_header"><?php if ((is_front_page()) and (!is_paged())) { ?>
Здесь вставляем текст или код, отображаемый на главной странице (у меня просто текст).
<?php } else {  ?>Здесь вставляем текст или код, отображаемый на остальных страницах (у меня код баннера).
<?php } ?></div>
Вставка кода в "header"
Код

Попробую объяснить (хоть я и не специалист):

  • <div id=”text_header”> — начало блока с идентификатором “text_header” служит для придания стиля объекту в таблице стилей;
  • <?php if ((is_front_page()) and (!is_paged())) { ?> — служит для вывода текста или кода на главной странице;
  • <?php } else {  ?> — служит для вывода текста или кода на всех остальных страницах;
  • </div> – конец блока.

Дальше необходимо тэг <body> заменить на такой.

<body <?php body_class(); ?>>
Замена тега <body>
Замена тега

Теперь переходим в таблицу стилей, где задаем стили для объектов.

Стиль для баннера.

#text_header {
left: 550px;
    position: absolute;
    right: 9px;
    text-align: right;
    top: 55px;
}

Стиль для текста.

body.home #text_header {color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 9px;
    left: 550px;
    position: absolute;
    right: 9px;
    text-align: justify;
    text-shadow: 1px 1px 1px black, 0 0 1em black;
    top: 36px;
}
Таблица стилей
Стили

Стили и идентификаторы, конечно же, меняете на свои. Спасибо за внимание! Если кто-то из вас разбирается в этой теме больше меня и сможет что-нибудь добавить в код (улучшить его или сделать исправления), прошу в комментарии!

23 коментарі до “Вывод в шапке блога на WordPress разных объектов — текст на главной”

  1. Пример можно глянуть в блоге про чай. Я там по дизайну еще не все делал, но как раз сегодня разбирался с выводом текста на главную. Получается, что многие посты на WordPress Inside основаны на личном опыте:)

  2. Мы уже обсуждали работу с хуками в видокурсе « Разработка плагина для WordPress ». Вкратце, хук — это событие генерируемое движком в тот или иной момент. Например, при отображении страницы блога, до отправки заголовков, возникает тот самый хук

  3. сделала по форме как у вас… на главной отобразилось а вот на остальных почему то нет… Что делать …? Я допиливаю тему Vantage… правда не знаю насколько это поможет…
    Когда вывожу Здесь вставляем текст или код, отображаемый на остальных страницах (у меня код баннера).
    – начинает либо база накрываться… либо просто ничего не происходит.

    • Извините, я написал об одном из вариантов, который искал для своего блога и который помог мне. Если у Вас не получается, лучше обратиться к специалистам на форумах. Я не специалист в PHP.

  4. Супер, спасибо огромное)))

  5. Хотел вставить номер телефона в шапку сайта, получилось очень коряво.
    Появился вверху над логотипом и безо всякого форматирования.

    • Задайте ему стиль в CSS.

  6. Что то у меня не получается.
    Мне надо в шапку сайта вывести номер телефона, напротив логотипа с правой стороны.
    А если использую Ваш код то телефон появляется в самом верху.
    Может подскажете что делать?

    • Если у Вас в шапке будет отображаться только номер телефона на всех страницах, то рекомендую создать отдельный блок DIV с номером телефона, вставить код в HEADER и стилями стилями отпозиционировать его (position: absolute).

      Не надо использовать такой сложный код как у меня (в случае если выводите только номера телефона на всех страницах, а не только на главной).

  7. разобрался:)скажите как under header немного поднять

  8. как сделать чтобы для разных страниц были разные картинки по шапкой???

  9. _http://www.love-taxi.com/ подскажите пожалуйста как вот на этом сайте на wordpress в шапке самый верх где название сайта – как туда вставить картинку ну и шрифт поменять- Спасибо !

    • Александр!
      Если Вы понимаете в HTML и CSS, тогда я предлагаю организовать так, как у меня на блоге.
      Подробности и код высылаю на e-mail.

  10. все конкретно и понятно, получилось, спасибо

    • Рад был помочь!

  11. добрый день!
    добавил код, как написано у вас, но на сайте ничего не появилось..
    хочу добавить номер телефона (в виде текста, а не картинки) в шапку сайта справа, напротив логотипа.
    сайт – _http://profipol.dp.ua/
    заранее спасибо!

    • Трудно дать конкретный совет, не видя Вашего кода.
      Номер телефона Вы хотите сделать в шапке только на главной странице или на всех?
      Попробуйте сделать например так:
      В блок ДИВ с ИД “telefon” поместите номер телефона (в комментариях у меня на блоге к сожалению нельзя писать тэги HTML, просто замените их на правильные) и разместите в header.php
      А в файле style.php задайте стиль для него, например так:
      #telefon {
      left: 550px;
      position: absolute;
      right: 9px;
      text-align: right;
      top: 55px;
      }

      И конечно же это пример. Стили задайте какие Вам нужно.
      Вам ещё определиться со стилями поможет эта статья: _https://liwihelp.com/razrabotka-sajtov/firebug-kak-nezamenimyj-pomoshhnik-issledovaniya-i-redaktirovaniya-koda-css.html “Firebug, как незаменимый помощник исследования и редактирования кода CSS.

      • спасибо!
        получилось вроде)) подправил немного стиль..

        • Я рад Дмитрий, что у Вас всё получается и телефон отображается в шапке сайта! Но он неправильно размещён. Я смотрю в браузере Firefox и телефон выходит за пределы шапки сайта. Подправьте код. Обращайтесь, если что!

          Попробуйте разместить ДИВ с телефоном между тэгами _hgroup_ _/hgroup_.

  12. А если в header.php поменять body на <body >, для остальных страниц это фатально не будет?

    • Не понял Вашего вопроса. Тег только так и пишется.

  13. В коде я тоже не силен, так что совет не дам, но возьму на заметку решение. Иногда бывает нужно. Спасибо.

    • Пожалуйста!

Залишити коментар