Как создать «липкий» бар уведомлений в подвале

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

За последние 10 дней я получил три письма от читателей, которые спрашивают: как создать «липкий» бар уведомлений в подвале сайта БЕЗ плагина?

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

Сегодня я хочу поделиться с вами — как создать «липкий» бар уведомлений БЕЗ плагина WordPress. Возможно, этот вариант понравится и заменит вам установку плагина.

Для чего нужен «липкий бар» уведомлений

Для информирования ваших читателей о важной, на ваш взгляд, информации.

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

Лучше всего, когда информация видна на сайте в виде всплывающего и/или «липкого» (прикрепленного к шапке или подвалу сайта) бара уведомлений, который виден всем, на какую бы страницу ваш посетитель не зашел.

Для этого можно и нужно использовать так называемый «липкий» ('floating' англ.) бар уведомлений.

Как сделать липкий бар уведомлений без плагина

Для этого нужно редактировать код файлов вашей темы.

Если не боитесь, немного кода ниже, который я покажу, надо просто скопировать и вставить в ваши файлы темы WordPress.

Желательно, перед редактированием файлов помнить несколько важных правил:

  • Не надо! редактировать файлы на рабочей версии вашей активной темы. Сделайте копию файлов, или скачайте файлы на компьютер.
  • Лучше, если у вас есть копия сайта на поддомене. Там и пробуйте сначала.
  • Пользуйтесь редактором с подсветкой кода. Так легче и понятней, что и как вы будете редактировать
Советую прочитать еще:  Плагин WordPress Pay With a Like - закроет контент и откроет тем, кто не полениться нажать 'Лайк'

Первый шаг

Откройте файл footer.php и добавьте код перед тегом </BODY>

<div class="fixedBar">
<div class="boxfloat">
<ul id="tips">
 	<li><a href="https://bestplugins.ru">Bestplugins — первое информационное сообщение</a></li>
 	<li><a href="https://bestplugins.ru">Bestplugins — второе информационное сообщение</a></li>
</ul>
</div>
</div>

В примере выше я добавил две строки двух информационных сообщений. Вы можете добавить столько, сколько вам нужно.

Второй шаг

Вторым шагом — добавим стили в файл style.css. Он есть в вашей теме, возможно, под другим именем, но чаще всего именно style.css

/*Footer Sticky Bar*/

.fixedbar {
background: #000;
bottom: 0px;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
left:0;
padding: 0px 0;
position:fixed;
font-size:16px;
width:100%;
z-index:99999;
float:left;
vertical-align:middle;
margin: 0px 0 0;
opacity: 0.95;
font-weight: bold;
}
.boxfloat {
text-align:center;
width:920px;
margin:0 auto;
}
#tips, #tips li {
margin:0;
padding:0;
list-style:none
}
#tips {
width:920px;
font-size:20px;
line-height:120%;
}
#tips li {
padding: 15px 0;
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

Если вы хотя бы немного знакомы с CSS, то сможете самостоятельно изменить стили для вашего бара уведомлений.

Третий шаг

Третьим шагом мы создадим новый файл jQuery, чтобы наш бар уведомлений умел менять случайным образом сообщения и выводить только одно из них.

Создайте новый файл в редакторе, назовите его например так: floatingbar.js.

Добавьте в него следующий код:

(function ($) {
this.randomtip = function (){
var length = $(«#tips li»).length;
var ran = Math.floor (Math.random ()*length) + 1;
$("#tips li:nth-child (" + ran + «)»).show ();
};
$(document).ready (function (){
randomtip ();
});
})( jQuery );

Этот файл нужно положить в папку темы с названием /js. Если такой папки нет — создайте ее в активной теме.

Теперь, чтобы подключить новый файл JS, необходимо в файле functions.php вашей темы прописать его вызов:

function wpb_floating_bar () {
wp_enqueue_script ( 'wpb-footerbar', get_stylesheet_directory_uri () . '/js/floatingbar.js', array ( 'jquery' ) );
}
add_action ( 'wp_enqueue_scripts', 'wpb_floating_bar' );

На этом с кодом все.
Перегрузите страницу пару раз или нажмите комбинацию клавиш Ctrl+F5, чтобы очистить куки текущей сессии. Бар уведомлений в подвале должен работать.

Если не работает, причин может быть несколько:

Как исправить

  • Проверить код на наличие ошибки
  • Отключить по очереди плагины
  • Переключить тему на дефолтную

Если ничего не помогает, тогда попробовать использовать плагин, который может добавить бар уведомлений в подвале вашей темы.

Но и плагин тоже может конфликтовать.

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *