Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 179. Как сделать фиксированные виджеты в сайдбаре?

Урок 179. Как сделать фиксированные виджеты в сайдбаре?

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

Привет!

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

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

Переходим в админке в пункт Плагины -> Добавить новый, далее вписываем: Q2W3 Fixed Widget, после чего устанавливаем и сразу активируем.

Что делать если виджет налезает на футер?

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

Переходим в настройки, а именно: Внешний вид ->Фикс. виджеты. Здесь нам предлагают вставить идентификатор элемента, приближаясь к которому необходимо остановиться. В нашем случае это футер. Посмотрите на исходный код Вашего сайта. Сделать это можно либо в браузере, либо открыв файл footer.php, который находится в папке с темой (wp-content/themes/название_вашей_темы).

Так вот, подвал сайта, называемый футером, чаще всего имеет структуру похожую:

Однако в старых версиях шаблона чаще встречается обычный <div>. В любом случае надо узнать, какой блок и есть наш футер. Нам нужен его айди (то, что указано: id="footer"). Если такового нет, а вместо него только class или вообще ничего - достаточно добавить. Например:

В этом примере значение, которое нам нужно - my_value. Можете вместо него написать какое угодно. В моем случае это footer.

Возвращаемся к настойкам, вписываем наше значение в поле: Стоп ID.

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

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

Осталось самое легкое - переходим во Внешний вид -> Виджеты, выбираем текущие, или ставим новые, и видим, что внизу появился чекбокс (поле, куда можно поставить галочку) с надписью: "Зафиксировать виджет". Устанавливаем галочку, сохраняем, и все! Наш виджет теперь плавает вслед за страницей, и всегда у нас на виду!

Можно ли обойтись без плагина?

Конечно! Можно написать скрипт, но в данном случае я бы советовал воспользоваться именно плагином. Скрипт даст ограниченную возможность, во-первых, надо будет указывать какие конкретно виджеты делать фиксированными, а какие нет. А для этого придется лезть в код. Во-вторых, надо будет правильно и кроссбраузерно просчитывать расстояние до стоп-блоков. Делать это не сложно, но муторно, и я предпочитаю отказываться от рутины. В данном случае использование плагина не противопоказано, а даже наоборот.

Ну как, получилось?

Here is a collection of places you can buy bitcoin online right now.

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Супер!!! Кладезь знаний... Спасибо. Подпишусь обязательно...

27.05.2017
0

Спасибо, буду рад)

07.07.2017

Плагин отличный! Долго искал простое решение, пока не наткнулся на Fixed Widget. А сама по себе фиксация сайдбара дает интересные возможности.

08.09.2017

its very good..thanks...

19.09.2017

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

Поделиться