Кастомизация

Плавающий виджет в сайдбаре на Wordpress

[wp-pic type=»plugin» slug=»q2w3-fixed-widget» layout=»large» ]

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

Идеальным вариантом сделать сайдбар заметнее – это сделать подвижный виджет. Пользователь будет заходить на страницу вашего сайта, прокручивать страницу вниз, а сайдбар в это время будет плавать за ним, постоянно оставаясь на глазах. Сделать это можно двумя способами – плагином или с помощью кода.

Создаем подвижный виджет с помощью плагина

Нам нужен плагин под названием Q2W3 Fixed Widget. Скачайте его с официального сайта WordPress и установите. Установка данного плагина ничем не отличается от установки других дополнений. После установки нужно выбрать виджет, который должен быть подвижным. Для этого нужно зайти в админку сайта, нажать на нужный виджет и отметить галочкой пункт “Зафиксировать виджет”.

плавающий сайдбар1
Все, виджет стал подвижным, и теперь он всегда будет на глазах у пользователя. При желании можно настроить виджет под шаблон вашего сайта. Для этого зайдите в админку сайта и зайдите в раздел “фикс. виджет”:

плавающий сайдбар2
Здесь можно настроить отступы от верхних и нижних границ браузера. Как видите, в установке и настройке плагина нет ничего сложного, все делается за пару кликов.

Создаем подвижный виджет с помощью кода

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

Код самого скрипта:

<script> $(window).scroll(function() { if ($(this).scrollTop()>3150) $('#scrollable').css({'position':'fixed','top':'40px'}); else $('#scrollable').css({'top':'3150px','position':'static'}); }); </script>
<div id='scrollable' style="width:298px";> контент </div>

Вместо слова “контент” вставляете то, что хотите разместить в плавающем виджете.

В седьмой строке подгоняете ширину под дизайн вашего сайта. Также можно задать блоку свой стиль, внеся поправку в style.css, добавив туда следующий ID:

#scrollable{ тут ваши стили };
<p>Как хозяйка блога я заинтересована в таком плагине, подписчики нужны. Но как же меня это раздражает как пользователя! Мне этот плагин напоминает голодную собаку, тыкающуюся постоянно носом в мою руку в надежде на подачку. Так думаю, кто заинтересован в подписке, тот найдет нужную кнопочку, гавное, чтобы она была. А с этим плавающим назойливым сервисом, по-моему, скорее отпугнуть можно, чем привлечь. </p><p>Да вот хотя бы на этом сайте! Деликатно, но наглядно. Захотел - нажал. Не захотел - дальше проистнул. Так - лчше. Но, конечно, дело вкуса.</p>
<p>Мне тоже не нравятся эти плавающие, выползающие, вылезающие окна. На свой сайт я устанавливаю только те плагины, которые нравятся мне, как пользователю. Нужные кнопки, безусловно должны присутствовать, притом на видном месте. Но я не уверена, что плавающий сайдбар будет сильно способствовать увеличению подписчиков.</p>
<p>Тут ещё многое зависит, от того, где расположен этот сайдбар, и какого он размера. Если правильно подобрать дизайн и местоположение, то раздражать не будет.</p>
<p>как это сделать?</p>
<p> </p><p>Берешь и устанавливаешь плагин, потом настраиваешь виджет.</p>