Главная / Плагины / Как зафиксировать виджет в боковой колонке сайта WordPress
Плагин WordPress - Q2W3 Fixed Widget
Плагин для фиксации виджета в боковой колонке сайта на WordPress

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

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

В первую очередь плавающие виджеты (отдельные блоки, элементы сайта) необходимы для того, чтобы повысить финансовую отдачу от рекламы на сайте, повысить количество подписок на аккаунты в социальных сетях или, например — увеличить поведенческие факторы сайта! Поясню главную суть подобных элементов на сайте.

При чтении любой большой интересной статьи (например, этой 🙂 ) – Вы не один раз будете вынуждены прокручивать (скролить) веб-страницу вниз. С каждой такой прокруткой уже прочитанный материал будет уступать место новому, а вместе с ним скоро «закончится» и сайдбар (боковая колонка Вашего сайта).

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

В этом нам поможет очень классный плагин WordPress — «Q2W3 Fixed Widget (Sticky Widget)», который позволяет «зафиксировать» блок с информацией на Вашем сайте в любом месте (точнее там, где Ваша тема использует виджеты), в любом сайдбаре (если их два) и любое количество раз.

С плагином Q2W3 Fixed Widget — плавающие элементы в независимости от количества прокруток будут всегда находиться на глазах у Ваших читателей, а значит и процент кликов по ним (процент выполнения целевых действий) будет Выше, чем у просто статичных элементов!

Одно важное замечание! Данный плагин WordPress работает со всеми виджетами, которые есть (или будут) у Вас в наличии. А значит плацдарм для творчества здесь неисчерпаемый! Вы можете использовать его для продвижения своей продукции или услуг, партнерских программ, популярных постов и все остального, что только придет Вам на ум.

Плагин WordPress — Q2W3 Fixed Widget. Плавающий виджет в сайдбаре

Скачать плагин Q2W3 FixedWidget можно в официальном репозитории на WordPress.org (ниже я приведу ссылку на его скачивание).

Официальное название плагина: «Q2W3 Fixed Widget (Sticky Widget)»;

Адрес для скачивания плагина: http://wordpress.org/plugins/q2w3-fixed-widget/

Официальный сайт: http://www.q2w3.ru/

Автор плагина: Max Bond;

Работает с версией WordPress: от 3.3 и выше;

Последнее обновление (на момент обзора): 01.06.2014;

Плагин был скачан (на момент обзора): 69 432 раз;

Текущий рейтинг качества: 4.8 из 5 звезд;

Доступные языки: Английский, Русский.

Установка и работа плагина WordPress — Q2W3 Fixed Widget

Ниже будет предложена небольшая пошаговая инструкция для всех, кто решился обзавестись плавающим виджетом в боковой колонке сайта!

1. Первым делом необходимо установить и активировать плагин Q2W3 FixedWidget. Процедура эта полностью стандартная для ВордПресс. Можно воспользоваться поиском плагина по названию в окне административной консоли WordPress – «Плагины» или же закачать файл с плагином на веб-сервер по FTP.

Установка плагина из админки WordPress

2. После активации плагина, можно сразу же его испробовать в действии. Для этого давайте перейдем к разделу «Внешний вид» — «Виджеты» в админке Вашего сайта. Теперь можно выбрать любой из имеющихся виджетов (или создать новый) и сделать его плавающим (фиксированным).

Плагин Q2W3 Fixed Widget в действии

В момент активации наш плагин добавил в меню настроек каждого Вашего активного виджета дополнительный пункт «Зафиксировать виджет». Чтобы облюбованный Вами виджет стал плавающим (не исчезал при прокрутке страницы вниз)– поставьте флажок напротив этого пункта и сохраните изменения.

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

В противном случае – он будет не совсем красиво «перескакивать» через другие элементы и раздражать посетителей Вашего сайта.

3. Теперь можно смело перейти к Вашему веб-сайту и проверить действие плагина. Прокрутите страницу вниз и полюбуйтесь эффектом! Иногда результат выглядит не совсем эстетично. Связанно это со специфическими особенностями конкретного сайта.

Например, у меня из-за плавающего (фиксированного) хедера заголовок плавающего виджета при стандартных настройках плагина скрывается под панелью «Меню». К счастью проблемы подобного рода легко решаются несложной перенастройкой плагина.

Настройка плагина плавающих (фиксированных) виджетов в боковой колонке

Чтобы изменить позиционирование всех фиксированных виджетов перейдите в окно настроек плагина Q2W3 Fixed Widget. Находится центр управления плагином в разделе: «Внешний вид» — «Фикс. Виджеты». Здесь все органы управления объединены в три главных группы:

  • основные настройки;
  • совместимость;
  • произвольные идентификаторы.
Панель настроек плагина Q2W3 Fixed Widget

Основные настройки плагина WordPress — Q2W3 FixedWidget

В группе «Основные настройки» мы можем задать точное положение плавающих виджетов в боковой колонке.

  1. Верхний отступ (в пикселах): задаем отступ плагина по высоте от верхней точки экрана браузера;
  2. Нижний отступ (в пикселах): задаем отступ плагина по высоте от нижней точки Вашего сайта (делается это для того, чтобы виджет при прокрутке страницы не наскакивал на футер);
  3. Интервал обновления (миллисекунды): задаем период времени, через который будут пересчитываться настройки положения плагина: нижний и верхний отступ. Главное учтите, чем чаще плагин пересчитывает свое положение – тем больше загрузка Вашего веб-сервера;
  4. Ширина окна браузера: задаем предельную ширину экрана браузера при которой эффект плавающего виджета будет работать.
В зависимости от используемой Вами темы WordPress (шаблона) при разной ширине экрана Ваш сайт может адаптироваться под различные параметры (адаптивный дизайн). При этом на небольших разрешениях экрана (например, на мобильных устройствах) плагин Q2W3 Fixed Widget будет работать не совсем корректно.

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

Раздел основные настройки плагина Q2W3 Fixed Widget

Совместимость плагина WordPress — Q2W3 Fixed Widget

В блоке «Совместимость» разработчик предусмотрел пять вариантов настроек:

  1. Автоматически исправлять id виджетов: в некоторых темах (шаблонах) WordPress у виджетов могут отсутствовать уникальные идентификаторы (html-атрибут id) или же они могут присваиваться не совсем корректно. Данный пункт позволяет в большинстве случаев решить эту проблему;
  2. Только зарегистрированные пользователи: это режим настройки плавающих виджетов при котором все текущие изменения будет видеть только администратор сайта – то есть Вы. Очень удобно при настройке оптимального положения виджета;
  3. Наследовать ширину фиксированного виджета: в некоторых адаптивных или резиновых темах ширина боковой колонки может меняться в зависимости от разрешения экрана браузера. Если у Вас как раз такой случай, и Вы хотите чтобы плагин работал корректно – активируйте этот пункт;
  4. Вкл. jQuery(window).load(): активируйте этот пункт, если скрипты JavaScript работают некорректно;
  5. Приоритет хука widget_display_callback: задаем приоритет для выполнения функции, которая выводить на экран панель виджетов в сайдбаре.
Настройка совместимости плагина Q2W3 Fixed Widget

Произвольные идентификаторы плагина WordPress — Q2W3 Fixed Widget

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

Раздел произвольные идентификаторы в плагине Q2W3 Fixed Widget

На этом мой обзор плавно подходит к концу. Я очень надеюсь, что плагин Q2W3 Fixed Widget для создания плавающих виджетов в боковой колонке поможет Вам повысить лояльность посетителей сайта к выполнению целевых действий (получить дополнительные клики: по рекламе, другим страницам сайта, кнопкам социальных сетей и прочее).

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

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

P.S. Если статья была для Вас полезной – отблагодарите автора нажатием одной из кнопок социальных сетей ниже. Спасибо и удачи!

Автор текста: Сергей ГеркХард

Сегодня речь пойдет о том, как зафиксировать виджет в боковой колонке сайта на WordPress. «Плавающий виджет» (или как его еще часто обзывают – фиксированный виджет) может стать очень эффективным инструментов в руках умелого веб-мастера (владельца сайта) для решения самого разнообразного круга задач. В первую очередь плавающие виджеты (отдельные блоки, элементы сайта) необходимы для того, чтобы повысить финансовую отдачу от рекламы на сайте, повысить количество подписок на аккаунты в социальных сетях или, например - увеличить поведенческие факторы сайта! Поясню главную суть подобных элементов на сайте. При чтении любой большой интересной статьи (например, этой :) ) – Вы не один раз будете…

Обзор

Полезность данной статьи - 88%
Актуальность данной статьи - 92%

90%

Спасибо!

Итог: Суммарная оценка данной статьи:

Рейтинг пользователей 3.98 ( 30 голосов)

О GerkHard

Хотите быть в курсе последних событий в мире WordPress. Хотите создать сайт бесплатно? Интресесует заработок в интернете? Все это Вы найдете на сайте GerkHard.com, подписывайтесь на канал РСС, а также на наши официальные странички в популярных социальных сетях!

9 комментариев

  1. Спасибо автору за подробную статью про плавающий виджет в сайтбаре! Поставил себе на сайт.

    • Да, вы совершенно правы — плавающие виджеты используют уже многие. Думаю тут даже вопрос не в моде, а в конверсии — по сути те блоки, которые вы хотите продемонстрировать посетителю вашего сайта — находятся у него во время чтения статьи все время, а не первые 30 секунд, когда о проскролит страницу вниз и обычные блоки «уйдут» из поля зрения.

  2. Этот плагин отвратительно работает с WPBakery Visual Composer, печалька, альтернативы вразумительной не нашел( Видел где то на ВП сайте, виджет не сразу скользит за скролом, а позже, а потом снова уходит и появляется другой виджет и тоже ближе к концу уходит. Жадко не помню где видел, найти бы такое…

    • Добрый день, настроить скорость скольжения и задержки можно в настройках данного плагина. В чем именно некорректная работа с WPBakery Visual Composer? Если у Вас не слишком много сайдбаров на сайте, можно лишь один раз вручную заполнить этот виджет и использовать.

      Если требуется полная совместимость с WPBakery Visual Composer — здесь бесплатными вариантами не обойтись. Посмотрите платные плагины на сервисе themeforest.net. Там же можно задать вопрос разработчику перед покупкой о совместимости плагина.

      • Вся проблема с настройкой колонок в Visual Composer, просто для красоты «морды» сначала колонки идут по 3, третья из которых занята виджетами(которые и проставляются посредством Visual Composer), а далее идет например блок во всю ширину листа, т.е. на все 3 колонки. Визуально смотрится красиво, но если использовать Q2W3, то закрепленный виджет заезжает под этот широкий блок(( Так же с Q2W3 можно прикреплять только нижние виджеты, иначе опять уродство… Как то так…

        З.Ы.
        А еще можете поделиться секретом, как вы настроили на этом сайте боковые лайки? А то я купил ESSB, но прозрачность не нашел как настроить, а стандартно она появляется только когда hover, а у вас наоборот. Очень буду признателен!))

        • С плагином ESSB я пока еще особо не изощрялся, еще руки не дошли. По-моему там просто шаблон стоит по умолчанию: Main settings — Template — Blocks (Retina).

          • Странно, с такой настройкой кнопки с фоном(как и со всеми остальными), просто выезжают и всё… Там есть еще настройка в стилях, но при ней кнопки становятся прозрачными при наведении, т.е. наоборот нежели здесь на сайте…

  3. Спасибо большое за статью! Очень полезный виджет. Как раз то, что искал. Кстати очень простой и надежный

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

Оставить комментарий

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

*