выплывающий левый сайдбар на сайте

Выдвигающийся боковой сайдбар слева и справа

Здравствуйте, сегодня продолжим создавать выдвигающиеся сайдбары, но с помощью другого плагина — позволяет создавать сайдбары не только слева (как в предыдущей статье), но и справа или одновременно слева и справа.

Скачать исходники для статьи можно ниже

Речь пойдет о плагине «Sidr — Side Menus» — его к сожалению нет на сайте «wordpress.org», но можно скачать его с моего сайта — скачать Sidr — Side Menus.

Демонстрационный примеры и информацию о плагине, скрипты можете прочитать по следующей ссылке — «berriart.com/sidr/» (автор плагина).

Установка и настройка плагина Sidr — Side Menus:

1. Установка плагина к себе на сайт.

Для этого скачиваем плагин к себе на компьютер — ссылка на скачивания вверху.

Далее заходим в панель управления wordpress, в левом меню выбираем пункт «Плагины» и его подпункт «Добавить новый», далее жмем на кнопку «Загрузить» и выбираем на своем компьютере скачавшийся zip файл плагина — sidr-extended.zip, устанавливаем и активируем плагин.

2. После активации плагина у вас должно появиться 2-а новых сайдбара:

Sidr Left Sidebar
Sidr Right Sidebar

То есть заходим в панели управления wordpress  в пункт «Внешний вид» и его подпункт «Виджеты» и наполняем сайдбары:  Sidr Left Sidebar, Sidr Right Sidebar нужными вам виджетами:

выдвигающийся сайдбар по обе стороны сайта

3. Осталось последнее — вставить ссылки для вызова сайдбаров.

То есть как только вы нажмете на ссылку в нужно месте (слева и/или справа) выползет сайдбар.

Код для ссылок следующий:

<a id="sidr-left-link" href="#sidr-left">Левый сайдбар</a>
<a id="sidr-right-link" href="#sidr-right">Правый сайдбар</a>

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

выдвигающейся садбар слева и справа сайта

При нажатии на ссылку «Левый сайдбар» — выплывает левый садбар:

выплывающий левый сайдбар на сайте

При нажатии на ссылку «Правый сайдбар» — выплывает правый садбар:

создаем выдвигающийся сайдбар справа сайта

На этом все!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

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