Вывод в шапке блога на 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_home

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

  • <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;
}

Таблица стилей

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


Оцените инструкцию:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...


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

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

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

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

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

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

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

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

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

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

  6. добрый день!
    добавил код, как написано у вас, но на сайте ничего не появилось..
    хочу добавить номер телефона (в виде текста, а не картинки) в шапку сайта справа, напротив логотипа.
    сайт — _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_.

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

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.