Меню аккордеон для Wordpress. Плагин JQuery Accordion Menu Widget
В данной статье я хотел бы рассказать о прекрасном плагине, позволяющем сделать удобное и стильное меню для категорий сайта. Поговорим о плагине JQuery Accordion Menu Widget. Все началось с того, что мне не понравилось меню в моей теме блога. Оно выглядело неудобно, некрасиво, не эстетично, и решил я сделать что-то этакое, чтобы двигалось и имело жесткую структуру. Почему жесткую, потому что я по опыту знаю жесткая структура – значит порядок, порядок значит – удобство, удобство – значит хорошо.
Ну да ладно, вернусь к меню и к плагину. Выбор для моего меню пал именно на этот плагин, так как мне уже приходилось использовать технологию Jquery Accordion Menu, правда не в wordpress, но все же. И я уже было думал, скачать библиотеку Jquery Accordion Menu, и допиливать напильником вывод рубрик, но на ум мне пришла умная мысль – не изобретать велосипед и поискать плагин, позволяющий реализовать данную возможность, без напильника. И что вы думаете, не успел я набрать в поисковике фразу: «wordpress jquery accordion menu», как мне тут же поисковик выдал десятки результатов, с готовыми решениями, осталось только выбрать лучшее. И я выбрал плагин JQuery Accordion Menu Widget. Ну а теперь о плагине по подробнее.
JQuery Accordion Menu Widget
Установить плагин можно с официального сайта WordPress – https://ru.wordpress.org/plugins/jquery-vertical-accordion-menu/
Плагин JQuery Accordion Menu Widget. (Установка, настройка и использование. Панель виджетов).
Скачиваем архив с плагином: https://downloads.wordpress.org/plugin/jquery-vertical-accordion-menu.3.1.2.zip
Заходим в консоли нашего сайта в раздел "Плагины", жмем "Добавить новый", нажимаем "Загрузить", выбираем наш архив с плагином и жмем "Установить".
После успешной установки не забываем активировать плагин.
На странице виджетов появился новый виджет JQuery Accordion Menu Widget, перетаскиваем его в блок Sidebar (или Боковая колонка). Осталось заполнить поля нового виджета.
Настройка JQuery Accordion Menu Widget
Так выглядит "Панель настроек":
Заголовок - Заголовок виджета.
Выберите меню - необходимо выбрать меню которое будет отображаться. Соответственно для того чтобы, было из чего выбирать, необходимо создать меню.
Click или Hover – эффект раскрытия панели меню, будет реагировать на нажатие левой клавиши мыши или просто на наведение мыши на заголовок (т.е. меню будет раскрываться и закрываться, тогда когда пользователь навел курсор на меню, нажатие клавиши мыши не требуется).
Auto Close Open Menus – опция определяет будет ли меню автоматически закрываться, в том случае когда с ним не работают.
Save Menu State (uses cookies) – сохранять позицию меню в памяти браузера.
Auto Expand Based on Current Page/Item – если опция активна, в подменю будут автоматически добавляться новые элементы.
Disable Parent Links – выключить родительские ссылки меню, т.е. если включена данная опция родительские пункты меню работать в качестве ссылок не будут. Данную опцию удобно использовать в случае, если в качестве эффекта раскрытия меню используется клик мыши.
Close Menu (hover only) – если опция активна меню будет не только раскрываться, но и закрываться. Опция работает только при использовании эффекта раскрытия панели меню – при наведении мыши.
Show Count – показывать количество дочерних элементов.
Menu Class – задать произвольный css класс меню.
Disable Class – задать произвольный css класс который будет использован при закрытии меню.
Hover Delay – опция задает интервал задержки в десятой доли секунды, до реакции на действие наведения мыши, т.е. если у вас в качестве эффекта раскрытия меню установлен эффект наведения курсора мыши, тогда через заданный промежуток после наведения на меню, оно раскроется.
Animation Speed – скорость анимации раскрытия и закрытия меню. Skin – необходимо выбрать дизайн меню, в случае необходимости можете расширить стиль своим вариантом.
По параметрам, всё. Но, как я уже упомянул, чтобы виджет заработал необходимо создать меню.
После этого меню выглядит таким образом в закрытом и открытом виде:
Рабочий пример:
Ну а данная статья подошла к концу, всем спасибо за внимание, до встречи.
Заглавное фото с сайта wordpress.org
Материал подготовил: @maximus00