Плавающий виджет на WordPress

Опубликовано: 01.09.2018

видео Плавающий виджет на WordPress

"Плавающие" виджеты на WordPress

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



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


Как сделать плавающий виджет в WordPress

Плагин Q2W3 Fixed Widget

Плагин Fixed Widget после его установки добавляет новый параметр «Зафиксировать виджет» ко всем виджетам сайта. Таким образом, допускается возможность выбора нескольких виджетов, если в этом есть нужда. Настройки плагина найдете на вкладке «Внешний вид – Фикс. Виджеты». Он полностью русифицирован, так что, особо нечего комментировать, тем более что, по умолчанию его настройки оптимальные.


Как зафиксировать блок в боковой колонке (виджет в сайдбаре)

Внимание! Плагин может работать не со всеми темами. У него есть несколько требований: библиотека jQuery должна быть версией 1.7/1.8 (или более поздняя), не должно быть JavaScript ошибок, наличие функций wp_head() и wp_footer().

А также встречается некорректность при движении элемента (подпрыгивание), что исправляется путем редактирования CSS.

Плавающий блок (виджет) с помощью jQuery

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

<script> jQuery(document).ready(function() { $('класс или id').addClass('original').clone().insertAfter('класс или id').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); scrollIntervalID = setInterval(stickIt, 10); function stickIt() { var orgElementPos = $('.original').offset(); orgElementTop = orgElementPos.top; if ($(window).scrollTop() >= (orgElementTop)) { orgElement = $('.original'); coordsOrgElement = orgElement.offset(); leftOrgElement = coordsOrgElement.left; widthOrgElement = orgElement.css('width'); $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show(); $('.original').css('visibility','hidden'); } else { $('.cloned').hide(); $('.original').css('visibility','visible'); } } }); </script>

Обратите внимание на места, где сказано прописывать класс или id блоков, чтобы не забыли.

rss