Как сделать подвижный сайдбар на wordpress

Добрый день дорогие друзья. В этом посте я расскажу о том, как сделать сайдбар вашего сайта намного эффективнее.
Дело в том, что пришедший из поиска посетитель, практически не замечает того, что находиться в сайдбаре. Обычно, человек сразу начинает читать нужную ему статью, пролистывает страничку в низ, а сайдбар остается  в стороне. А ведь в нем могут размещаться другие полезные материалы, форма подписки, возможно ссылки на какие-то курсы и много других полезностей, поэтому сайдбар нужно сделать немножко заметнее.
плавающий виджет на wp
Я предлагаю вам создать плавающий виджет, который будет “преследовать” пользователя независимо от того насколько он глубоко листает статью.

Польза от такого виджета на лицо: во-первых можно разместить в нем блок контекстной рекламы и за счет небольшой назойливости собирать больше кликов. Однако, насколько мне известно, Google относиться к подвижным элементам очень строго, поэтому не рекомендую размещать в них блоки от AdSense. Во-вторых, можно  прикрутить “плавающую” форму подписки, которая будет собирать дополнительных читателей. Уверен, эффект от нее будет очень знатным. В третьих, можно продавать в подвижном сайдбаре рекламные баннеры, которые за счет своих показов будут стоить дороже. В общем, при достаточной смекалке, эту плюшку можно весьма выгодно использовать. Ну а теперь к делу. Плавающий виджет можно сделать 2-мя способами – плагином и с помощью кода. Рассмотрим их подробнее.

Плавающий виджет в сайдбаре с помощью плагина

Скачиваем плагин отсюда, распаковываем и устанавливаем. В общем, все как обычно, ничего нового. Кстати, если у вас не получается распаковать или открыть файл какого либо расширения или формата, то советую посетить сайт openext.ru, на котором вы всегда сможете найти программу для открытия того или иного типа файла. После установки плагина вам необходимо настроить виджет, который вы хотите сделать подвижным.

Добавьте новый виджет или нажмите на старый, вы увидите галочку с надписью “зафиксировать виджет”:

фиксация виджета

Отмечаете этот пункт галочкой и вуаля, нужная часть сайдбара стала подвижной. Теперь при желании все это дело можно настроить. Зайдите в раздел  админки “внешний вид” и выберите пункт “фикс. виджет”:

настройка виджета

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

Плавающий сайдбар с помощью кода

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

Итак, вот код самого скрипта:

<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>

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

В 7-й строке измените ширину под ваш дизайн. Если вы хотите задать к блоку свои стили, то пропиши в style.css вашей темы следующий ID:

#scrollable{ тут ваши стили };

На сегодня у меня все. Как видите плюшка достаточно полезна и может принести много выгоды сайту и его автору. В следующей статье, я расскажу основные способы заработка на своем сайте. Подпишитесь, будет интересно! Жду ваших царских лайков и комментариев. До встречи!

Музыкальная пауза, сегодня для вас играет трек Depeche Mode – Free Love:


Да не покарает меня гос. дума за размещение этих клипов.

Ваш комментарий

  1. Спасибо за полезный плагин, с вашего разрешения, я и своим читателям о нем напишу.

  2. У меня почему-то не плавает…

    • Кирилл Тараненко:

      Значит, где-то ошибка. По инструкции все правильно сделали? Ничего не упустили?

  3. :-), Попробую потестить твой вариант, может получиться поставить.

  4. Ссылки на плагин нет

  5. Спасибо, совершенно ничего сложного как оказалось нет, установила виджет к себе за пару минут, всё работает прекрасно!