WordPress. Добавление баннерной строки без плагинов

В этой статье я расскажу о простом способе добавить баннер-строчку (он же «Notification bar») в шапку или футер любого сайта на WordPress. Такие баннеры обычно используют для вывода коротких объявлений, call-to-action призывов или информирования посетителей об акциях или распродажах.

Посредством такого баннера можно:

• Показывать объявления об изменении графика работы в праздничные или выходные дни
• Публиковать call-to-action призывы, информировать об акциях или распродажах
• Выводить анонсы важных статей или событий
• Рекламировать релевантные услуги на отдельных страницах

Баннерная строка без плагинов на WordPress

Живой пример реализации подобного баннера можно посмотреть здесь же, на страницах блога Libra Media. Ниже приведена простая инструкция по добавлению точно такого же баннера на любой сайт на WordPress.

Шаг 1. Создаем файл для кода баннера

Для начала нужно создать пустой PHP-файл с названием banners.php и разместить его в папке с используемой вами темой WordPress.

Шаг 2. Добавляем баннер и оформление для него

Теперь отредактируем созданный файл banners.php и добавим в него код блока с нашим баннером:

<div id="head-banner" class="hide_on_mobile">Текст на баннере и <a href="#" rel="nofollow">какая-то ссылка</a></div>

Затем добавим в этот же файл фрагмент стилей для оформления нашего баннера:

<style>
#head-banner {
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}

#head-banner a {
color: #ffffff; 
border-bottom: 1px dotted;}

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}
</style>

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

Чтобы баннер не прилипал, нужно убрать из стиля следующие строки:

position: fixed;
z-index:1;

А чтобы вывести баннер в футере вместо шапки нужно заменить

top: 0px;

на

bottom: 0px;

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

Шаг 3. Выводим баннер на сайт

Наконец, выводим наш баннер на сайт. Для этого открываем в редакторе файл header.php используемой темы и вставляем внутри области head следующую строку:

<?php include('banners.php'); ?>

Или можно воспользоваться функцией get_template_part из WordPress API:

<?php get_template_part('banners'); ?>

Данный код будет подгружать содержимое созданного в первом шаге файла banners.php в шапку сайта.

А чтобы отключить вывод баннера достаточно всего лишь закомментировать вызов файла banners.php:

<?php //include('banners.php'); ?>

<?php //get_template_part('banners'); ?>

Именно поэтому мы выносим весь код баннера в отдельный файл вместо того, чтобы разместить его прямо в header.php и добавить стиль в style.css используемой темы.

Заключение

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

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

Для этого достаточно дописать в banners.php несколько простых if-else условий на PHP.