когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Как сделать аккордеон меню для категорий сайта на Wordpress (реализация jQuery и Bootstrap 3 и Bootstrap 4)
Для чего это нужно
Владельцы сайтов постоянно думают, как бы улучшить навигацию по своему сайту, подчеркнуть важность тех или иных элементов, в частности рубрик (категория в wordpress). Для решения подобной задачи владелец сайта http://biznesshack.ru/ (блог о заработке в интернете) попросил меня создать на его сайте аккордеон-меню ( ну или коллапс-меню (collapsed /accordion). Результат можете увидеть на этом сайте.
Как выглядит
Реализация
Для реализации данного меню я выбрал jQuery и jQueryUI. Следовательно, для этого нужно подключить их, например, вот так.
Этого вам будет достаточно, но я рекомендую выбрать более свежую версию jQuery т.к. немного изменяется синтаксис кода (за место $ используется jQuery). Давайте пока отложим frontend и займёмся backend’ом т.е. вордпрессом.
Печать категорий
Для того чтобы печатать категории их нужно получить и прежде всего выбрать список категории, которые мы хотим показать посетителям сайта. Допустим, что мы выбрали список рубрик (категорий), которые нам нужны. Нам нужно узнать их ID чтобы потом выводить их в цикле. Можно было бы сначала сообщить имена категорий и делать запросы к WP по имени категории, но это не самый быстрый способ.
Получение IDрубрики WP
Получить id рубрики можно с помощью встроенных функций wp, до для этого нужно выполнять php, и записывать данные куда-то к блокноту чтобы потом написать соответствующий код. Мне это подход не нравиться и поэтому мы пойдём другим путём.
Существует плагин Reveal IDs. Суть работы его очень проста. В «админке» wordpress’а для всех рубрик, страниц, записей и т.д. в списке с их данными появляется поле, в котором появляется соответствующий id. В рубриках это будет выглядеть вот так.
Теперь мы можем сформировать массив (php) c id категорий которые нам нужны. Например:
У нас уже есть категории первого уровня, подкатегории мы будем получать и выводить в цикле с помощью функции get_categories(); Данная функция будет принимать массив с параметрами: ID родительской категории (child_of), отображать ли пустые рубрики (hide_empty). Функция get_categories() вернет нам массив с данными подкатегорий. Я бы мог выводить родительские категории функцией get_categories(), но это несколько усложнило мне задачу.
Цикл вывода
В данной статье будут рассматриваться несколько вариантов вывода:
С использованием jQuerry
С использованием Bootstrap 3
С использованием Bootstrap 4
Однако скелет цикла будет один и тот же. Вот простая схема
#HTML Оболочка#
#PHP цикл start#
#PHP вывод названия род. рубрики#
#PHP получение доч. категории#
#PHP цикл start#
#PHP вывод названия доч. категории и ссылка#
#PHP вывод кол-ва записей в доч. категории#
#/PHP цикл end#
#/PHP цикл end#
#/ HTML Оболочка#
На HTML оболочку у нас будут «повешены» события с помощью селекторов. Будет два цикла. В первом цикле будет печататься название родительских категорий, тех, которые мы перечислили в нашем массиве. Второй цикл будет внутри первого, в нём будут выводиться названия дочерних категорий, ссылка на них и кол-во записей.
В bootstrap 3 нет нативного метода аккордеон и в нём будет просто, так скажем, collapse menu. Разница лишь в том, что при открытии блока другой не закрывается.
Код:
<?php $arId = array(2, 21, 3); ?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
// Начало цикла для печати категорий
<?php foreach($arId as $id): ?>
<div class="panel panel-default"><!-- Начало визуального представления -->
<h4 class="panel-title"><!-- Начало печати заголовка -->
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $id;?>" aria-expanded="true" aria-controls="collapse<?php echo $id;?>">
<?php echo get_cat_name($id); ?><!-- Печать названия категорий -->
</a>
</h4><!-- Конец печати заголовка -->
</div>
<?php $sub_cats = get_categories( array('child_of' => $id, 'hide_empty' => 0) ); ?><!-- Получение подкатегорий -->
<div id="collapse<?php echo $id;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<?php echo $id;?>">
<?php if( $sub_cats ) {foreach( $sub_cats as $cat ): ?><!-- Начало печати категорий -->
<div class="panel-body">
<h3>
<a href="<?php echo get_category_link($cat->cat_ID); ?>">
<?php echo $cat->name; ?></a>
<span><?php echo $cat->category_count; ?></span>
</h3>
</div>
<?php endforeach; ?>
</div>
<?php } ?><!-- Конец печати категорий -->
<?php endforeach; ?>
</div>
Код для Bootstrap 4
В 4-м bootstrap есть аккордеон так что там будет примерно одинаковая картина с jQuery.
Помните, что нужно обязательно подключить jQuery и соответствующий скрипт. В первом случае это будет jQuery UI и маленький скрипт который указывает на селектор аккордеона. В случае с 3-м бутстрапом не забудьте подключить его стили в шапке и bootstrap.js после подключения jQuery, иначе ничего не будет работать. Подключение bootstrap.js без jQuery является распространённой ошибкой, из-за этого часто не работает выпадающие меню bootstrap, кстати, как сделать такое меню я писал в этой статье. И наконец для bootstrap 4 не забудьте подключить его. Всё делается так же как и с bootstrap 4.
P.S.
Хочу вам предложить воспользоваться инструментом на моём сайте «Строки». Он помогает быстро преобразовать ключевые слова из таблицы в строку разделив их запятыми.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.