Неисчезающий виджет, который следует за прокруткой

Любите писать длинные статьи, а ваш сайдбар ограничен информацией на полтора экрана? Знакомое чувство...

Сегодня я предлагаю вам решение проблемы при помощи плагина Q2W3 Fixed Widget, который сделает выбранный вами виджет постоянно видимым посетителю, независимо от вертикальной прокрутки страницы.

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

постоянно видимый виджет wordpress

Если сейчас прокрутите страничку вниз, то он "поползет" вслед за ней. Вы также можете сделать у себя на сайте полезный для вас блок, который обязательно должны видеть посетители.

Неисчезающий виджет при помощи Q2W3 Fixed Widget

Ссылку на скачивание найдете в конце статьи, а теперь немного о его настройках.

После установки плагина, у вас в разделе "Внешний вид" (во всяком случае у меня так было) появится новый пункт "Фикс. виджеты":

зафиксировать виджет wordpress

Плагин переведен на русский, так что проблем не будет. Чисто поясню нюанс:

плавающий виджет wordpress

  • Верхний отступ - отступ от верхнего края окна браузера. Советую делать не менее 10 (пикс.). Тогда он будет следовать за прокруткой страницы с самого верха, но не "сливаться" с верхом.
  • Нижний отступ - противоположность верхнему. Если здесь меняете значение, отличное от нуля, то ставьте цифры, не менее высоты вашего футера. Лично я не трогал эти параметры, т.к. сверху закрепленный виджет смотрится лучше.
  • Ширина окна браузера - данная настройка отключит функцию "неисчезающего виджета" на экранах, разрешение которых меньше заданного. Т.е. на мобильниках и планшетах с разрешением менее 1024px по ширине, данная функция закрепления не будет работать. Иначе бы ваш виджет "наезжал" на текст, что делало бы его не читабельным. Можете выставить 800.

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

Как включить неисчезающий виджет

Здесь все просто: идем в админке сайта в раздел Внешний вид ► Виджеты, выбираем виджет, который хотим закрепить, и ставим галочку:

как зафиксировать виджет

Отступление
Обратили внимание на этой картинке, как я вывел внешние ссылки и контент с самого первого скриншота этой статьи? Всем известно, что поисковики видят ссылки в nofollow. Я же сделал данный блок через ajax, о чем писал в статье Как подгрузить блоки контента при помощи Ajax. Так и некоторые другие элементы на сайте сделаны, что оставляет "вес" страницы.

Подводные камни

В подавляющем большинстве шаблонов данный плагин будет работать отлично. Но, если случится проблема, то некоторые ответы можно найти здесь (блог создателя/переводчика). А также следует учитывать, что плагин работает только если:

  • Виджеты на сайте имеют уникальные атрибуты ID в коде HTML (это у большинства, кроме "кривых" шаблонов).
  • У вас установлен JQuery не ниже 1.7. Если что, в помощь статья Автоматическое обновление jQuery до новой версии. Чeть позже я напишу как сделать это без плагина.
  • Нет ошибок в JavaScript (опять же, от создателей шаблона зависит).
  • В header и footer присутствуют функции wp_head() and wp_footer(). Опять же все во власти создателей шаблона.
  • Замечание лично от меня: виджет работает олично, если он изначально размещен последним в списке.

Если честно, то перечисленные выше пункты являются ответами на возникающие вопросы, если не работает плагин, но никак не "тормозом" в пользу его установки. Поэтом пробуйте. Лично у меня количество кликов увеличилось.

Требуемая версия WP:  3.0+
Рассмотренная версия плагина:  4.0.1
Скачать плагин

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 18 комментариев
  1. Андрей (129 комм.):
    http://zarobitok.ru/

    Спасибо Виталий за плагин, пригодится.

  2. Сергей (11 комм.):
    http://webtous.ru

    нагрузку на сервер оказывает? Не мерили?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Не мерял. Но плагин стоит несколько месяцев. Предыдущая статья про снижение нагрузки на скриншотах была с активным Q2W3 Fixed Widget.

  3. prostolinux (14 комм.):
    http://prostolinux.ru/kak-zafiksirovat-saydbar/

    Не на всех темах это работает, лучше использовать простой скрипт http://prostolinux.ru/kak-zafiksirovat-saydbar/ Это надёжней и проще. Но есть и минус, обычный сайдбар, созданный плагином каким нибудь, уже не сделаешь.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Данный код пробовал до плагина. На мобильниках наезжал на текст. По этой причине поставил плагин.

      • Иван (3 комм.):
        http://disseo.ru

        Плагин нестабилен и работает не на всех шаблонах.

        • Max Bond (1 комм.):
          http://www.q2w3.ru

          Зачем обобщать?

          На вашем сайте плагин и правда работать не будет, но не потому что он "нестабилен". Просто сайт банально не вписывается в минимальные требования...

  4. prostolinux (14 комм.):
    http://prostolinux.ru/kak-zafiksirovat-saydbar/

    А ещё интересно, как отнесётся google, если в такой блок запихать блок рекламы adsense ?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      В Google не работаю, поэтому не подскажу))

    • Артём (83 комм.):
      http://blog-artema.ru/

      Ну на avito плавают рекламные баннеры гугла и вроде норм =)

    • Антон (1 комм.):
      http://freeams.ru

      Запрещено по правилам AdSense,
      Такие объявления называются "прикрепленными". Использовать их запрещено. При обнаружении такого типа размещения рекламы будут предприняты необходимые меры.

      • Виктор (1 комм.):

        Серьёзно? Далеко не один крупный сайт видел с такими прикреплёнными блоками, как ггл, так и рся. Лайфхакер, например...

        Где именно написанно, что нельзя "прикреплять" обьявления?

  5. Дмитрий (16 комм.):
    http://nashsovetik.ru/kak-prigotovit-marinad/

    Спасиб за плагин. Установил, настроил.

  6. Андрей Булгаков (2 комм.):
    http://www.seolast.ru/

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

  7. Хьюго Пьюго (1 комм.):
    http://idi-k-nam.ru/

    Спасибо, убедили, помогли...

  8. Евгения (4 комм.):
    http://lebeddeva.ru

    Очень понравилась функция плагина. Установила себе, все работает. Главное в моем занудливом шаблоне сработал плагин! Спасибо за идею.

  9. Артём (83 комм.):
    http://blog-artema.ru/

    Поставил себе, неплохо.
    А регистрации рефов увеличились?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      По одной позиции.
      Надо делать другой набор)

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.24MB | MySQL:83 | 0,364sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html