Libra Media работает на хостинге Beget. Хочешь свой сайт? Регистрируйся и получи любой тариф бесплатно на месяц!
Как добавить свой баннер на Wordpress без плагинов

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

Опубликовано: 28.11.2021
Обновлено: 17.06.2022
3 минуты на чтение

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

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

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

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

Как добавить свой баннер на WordPress без плагинов
Пример реализации баннера на сайте Libra Media

Живой пример реализации подобного баннера можно посмотреть здесь же, на страницах блога 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.

Автор статьи:
Дмитрий
С 2013 года профессионально занимается созданием и продвижением коммерческих и информационных веб-сайтов. В 2018 году завел блог Libra Media, в котором делится опытом и практическими наработками в сфере SEO, администрирования серверов и доработок для сайтов на Bitrix и WordPress.
#WordPress

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

Ваш адрес email не будет опубликован.