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

Просмотров: 3859

Вывод в шапке блога разных объектовЗдравствуйте читатели блога LiWiHelp.ru!

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

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

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

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

Не спрашивайте, почему в «шапке» — так надо!

Код был внедрён успешно, текст в «шапке» блога на главной странице отображается.

ВОТ РЕЗУЛЬТАТ:

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

Но, если ограничиться только этим кодом, тогда на всех остальных страницах блога, кроме главной, в «шапке» останется пустое место.

И вот, захотел я на этом пустом месте отображать баннер.

Программист из меня не ахти какой и реализовать эту задумку я, естественно, не смог. Пришлось обращаться к специалистам на форуме _http://mywordpress.ru_ (отдельное спасибо BizWebmaster и Ю.Б.) которые и подсказали правильное решение.

Сегодня я постараюсь рассказать и показать на скриншотах, как была реализована эта задача на моём блоге. Может, у кого-то из вас, возникнет необходимость сделать что-нибудь подобное.

До доработки кода было вот так:
— текст в «шапке» на главной странице блога

Текст в "шапке" на главной странице блога

— пустое место в «шапке» на всех остальных страницах блога

Пустое место в "шапке"

После доработки кода стало вот так:
— текст в «шапке» на главной странице блога

Текст в "шапке"

— баннер на всех остальных страницах блога

Баннер на всех остальных страницах блога

Теперь приступим к осуществлению задуманного!

1. Заходим в Панель администратора WordPress и открываем для редактирования страницу «header.php»

header.php

2. Выбираем место после тэга <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> — закрывает блок

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

<body <?php body_class(); ?>>

<body>

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

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

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

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

Стили, конечно же, как и коды, меняете на свои.

Спасибо за внимание!

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

Комментарии:

22 комментария

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

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