Создаем «липкую» плавающую панель в футере сайта WordPress

Недавно наткнулись на одном сайте на интересный элемент интерфейса: липкая плавающая панель в футере. В сегодняшней статье мы расскажем как ее реализовать на своем сайте и покажем пример реализации.

Примечание: это НЕ плагин. Это набор HTML/CSS элементов. Вы должны понимать принцип работы тем WordPress, чтобы «справиться» с обучающим материалом.

Как выглядит липкая плавающая панель в футере?

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

Зачем эту панель использовать?

Например для привлечения внимания к вашим лучшим записям, популярным записям, подписок по e-mail или любой другой информации на ваше усмотрение. Конечно, существуют плагины типа HelloBar и другие клоны HelloBar. Затем существуют тулбары Wibiya. И, наконец, у плагина всплывающих окон Pippity также есть своя собственная версия панельки для футера.

Версия же, которую мы опишем в этой статье намного проще, нежели все вышеперечисленные. У нее нет настройки, чтобы скрывать из поля зрения. Это статичная панель, которая может «листать» контент, используя немного простого jQuery. Основная причина, по которой стоит использовать именно описываемую панель такова, что она ОЧЕНЬ «легковесная» в плане нагрузки на сайт и выполняет возложенную на нее задачу на сто процентов. Однако, если вам нужна продвинутая функциональность вида отслеживания куки, то рекомендуем использовать один из вышеуказанных инструментов в виде плагинов.

Как создать «липкую» плавающую панель в футере сайта WordPress

Несмотря на то, что в заголовке статьи мы указали, что панель — для WordPress, она также свободно может быть использована на любом сайте. Все, что мы сделаем, это создадим div с CSS свойством position: fixed;, которая и реализует «волшебное» плавание. Затем мы используем простой математический код на jQuery, который будет «листать» определенное количество элементов, которые зададим ему.

Открываем ваш файл footer.php и добавляем следующий код сразу перед закрывающим тегом body перед всеми скриптами.

<div class="fixedBar">
<div class="boxfloat">

<ul id="tips">

<li><a href="https://wpincode.com/">Ссылка WpinCode - первый элемент</a></li>

<li><a href="http://www.wordpress.org/">WordPress.org - второй элемент</a></li>

</ul>

</div>
</div>

Вы можете добавлять любое количество элементов по необходимости. Лишь один из них будет отображаться при каждой загрузке странице как только мы сделаем все, что указано в статье. Следующим шагом будет добавление CSS. Открываем ваш файл style.css и вставляем следующий код:

/*Devise Footer 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;}

Итого, у нас есть основной div fixedBar. Ему мы задаем цветовую схему и другие основные настройки стиля. Наиболее важная вещь здесь — это класс position: fixed;. Также у нас есть свойство z-index, ему задано высокое значение, чтобы панель не пропадали ни в коем случае. Единственное, что может перекрыть панель, это встроенное видео с youtube. Но мы уже описывали способ предотвратить перекрывание контента роликами Youtube в WordPress.

Мы установили свойство opacity в значение 0.95 только потому, что эффект прозрачности очень приятен на вид. Если же цельный блок больше подходит для вашей темы, то просто измените значение.

В виду того, что ширина div’а .fixedBar у нас 100%, то необходимо создать ему обертку (wrap), иначе контент будет выравниваться по левому краю. Именно за этим нам нужен div .boxfloat. Считайте его wrap классом. Можете изменить ему ширину. Список элементов #tips установлен в display: none по-умолчанию. Мы ведь будем использовать jQuery для отображения одного случайного элемента списка при каждой загрузке страницы.

Давайте теперь добавим наш небольшой код jQuery. Открываем footer.php и добавляем этот скрипт в конец. Маленький сниппет выведет один элемент списка (из всех) при загрузке страницы.

<script type="text/javascript">
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();
});
</script>

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

Если вам нужно выводить только один элемент, и не нужно скроллить множество их, то и необходимости в скрипте нет. В этом случае просто уберите свойство display: none в коде CSS.

Что теперь?

Это еще не конец. Отредактируйте ваш footer.php для того, чтобы добавить/удалить выводимый текст (или любой другой контент). Если хочется креатива, можно создать цикл постов. Отображать записи из определенной рубрики. Вывести заголовок и ссылку на запись в формате списка. Это позволит автоматизировать процесс.

Надеемся, что статья оказалась вам полезной.