mojwp.ru
Назад

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

Опубликовано: 14.09.2013
18
605

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если честно, то перечисленные выше пункты являются ответами на возникающие вопросы, если не работает плагин, но никак не "тормозом" в пользу его установки. Поэтом пробуйте. Лично у меня количество кликов увеличилось.
[downpg wp="3.0+" vp="4.0.1" href="http://wordpress.org/plugins/q2w3-fixed-widget/"]Скачать Q2W3 Fixed Widget[/downpg]

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Андрей
    Опубликовано: 14.09.2013 Ответить на сообщение

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

  • Сергей
    Опубликовано: 14.09.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 14.09.2013 Ответить на сообщение

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

  • prostolinux
    Опубликовано: 15.09.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 15.09.2013 Ответить на сообщение

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

      • Иван
        Опубликовано: 03.10.2013 Ответить на сообщение

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

        • Max Bond
          Опубликовано: 05.10.2013 Ответить на сообщение

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

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

  • prostolinux
    Опубликовано: 15.09.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 15.09.2013 Ответить на сообщение

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

    • Артём
      Опубликовано: 20.11.2013 Ответить на сообщение

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

    • Антон
      Опубликовано: 20.10.2014 Ответить на сообщение

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

      • Виктор
        Опубликовано: 14.02.2016 Ответить на сообщение

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

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

  • Дмитрий
    Опубликовано: 16.09.2013 Ответить на сообщение

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

  • Андрей Булгаков
    Опубликовано: 17.09.2013 Ответить на сообщение

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

  • Хьюго Пьюго
    Опубликовано: 10.10.2013 Ответить на сообщение

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

  • Евгения
    Опубликовано: 19.11.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 20.11.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 21.11.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.