ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Плавающий виджет WordPress без плагина

Мир дверей главная каталог межкомнатные двери www.dlnsk.ru. .

vidzhetyiВсем привет!

В статье пойдет речь о том как сделать плавающий виджет WordPress без использования плагинов. Его еще называют фиксированным виджетом при скролле страницы. Хотя, кто не хочет возится с подключением скриптов, даю ссылку на аналогичный плагин под названием Q2W3 Fixed Widget, находящийся в репозитории WordPress и распостраняющийся бесплатно. Там-же можно посмотреть видео по его настройке.

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

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

Как сделать плавающий виджет WordPress без плагина

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

Скачайте минимизированный скрипт stickywidget.min.js и подключите его в файле functions.php, как на примере ниже.

Естественно, перед подключением, распакуйте скачанный архив и поместите файлstickywidget.min.js  в папку js вашей активной темы.

Подключаем скрипт плавающиего виджета WordPress

Плавающий виджет подключаем в окончании файла functions.php:

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

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

Для этого скопируйте приведенный ниже код инициализации и вставьте его в файл footer.php , сразу перед закрывающим тегом  </body>и настройте:

Настраиваем плавающий виджет WordPress

Давайте теперь настроим фиксированный виджет. По настройкам:

  • «sidebar» : «sidebar-1» — Вместо sidebar-1 нужно вписать ID вашего сайдбара. ID сайдбара можно узнать в файле functions.php, либо посмотреть исходный код страницы, либо воспользоваться расширениями браузеров — инструментами для разработчиков. Для браузера Google Chrome это Developer Tools (встроено в браузер).
  • «margin_top» : 100  — 100 это отступ в px от верха. Попробуйте сначала оставить как есть.
  • «margin_bottom» : 300 — 300px отступ от нижнего края экрана, при котором прекращается фиксация. Оставьте так, потом настроите индивидуально, меняя это значение.
  • «screen_max_width» : 991— Максимальная ширина экрана, если меньше, то скрипт перестает работать и фиксированный виджет WordPress становится обычным виджетом. Так как сейчас почти все сайты приспособлены под мобильные устройства, обычно сайдбар при изменении размера монитора как бы подныревает под зону контента. Для корректного отображения на мобильных и планшетах и сделана эта настройка фиксированного виджета. Ведь фиксировать виджет на маленьких мониторах совсем не к чему. Воспользуйтесь инструментами разработчика, посмотрите при какой ширине экрана ваш сайдбар уходит вниз и установите нужную именно вам ширину в этом параметре.
  • «widgets» : ['text-30']  — Здесь text-30 ID виджета, который нужно закрепить. Узнать айдишник можно аналогично айдишнику сайдбара, посмотрев исходный код элемента.

— На этом все. Есть вопросы, не стесняйтесь, задавайте в комментариях к статье.

БЕРЕГИТЕ СЕБЯ!

 

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

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