Как сделать аккордеон меню для категорий сайта на WordPress (реализация jQuery и Bootstrap 3 и Bootstrap 4)
Для чего это нужно
Владельцы сайтов постоянно думают, как бы улучшить навигацию по своему сайту, подчеркнуть важность тех или иных элементов, в частности рубрик (категория в wordpress). Для решения подобной задачи, владелец сайта http://biznesshack.ru/ (блог о заработке в интернете) попросил меня создать на его сайте аккордеон-меню ( ну или коллапс-меню (collapsed /accordion). Результат можете увидеть на этом сайте.
Как выглядит
Реализация
Для реализации данного меню я выбрал jQuery и jQueryUI. Следовательно, для этого нужно подключить их, например, вот так.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Этого вам будет достаточно, но я рекомендую выбрать более свежую версию jQuery, т.к. немного изменяется синтаксис кода (за место $ используется jQuery). Давайте пока отложим frontend и займёмся backend’ом, т.е. вордпрессом.
Печать категорий
Для того, чтобы печатать категории, их нужно получить и прежде всего выбрать список категорий, которые мы хотим показать посетителям сайта. Допустим, что мы выбрали список рубрик (категорий), которые нам нужны. Нам надо узнать их ID, чтобы потом выводить их в цикле. Можно было бы сначала сообщить имена категорий и делать запросы к WP по имени категории, но это не самый быстрый способ.
Получение ID рубрики WP
Получить id рубрики можно с помощью встроенных функций wp, но для этого нужно выполнять php и записывать данные куда-то в блокнот, чтобы потом написать соответствующий код. Мне этот подход не нравится и поэтому мы пойдём другим путём.
Существует плагин Reveal IDs. Суть работы его очень проста. В «админке» wordpress’а для всех рубрик, страниц, записей и т.д. в списке с их данными появляется поле, в котором присутствует соответствующий id. В рубриках это будет выглядеть вот так:
Теперь мы можем сформировать массив (php) c id категорий, которые нам нужны. Например:
<?php $arId = array(2, 21, 3); ?>
Этот массив мы будем использовать далее.
Получение списка дочерних категорий (подкатегорий)
У нас уже есть категории первого уровня, подкатегории мы будем получать и выводить в цикле с помощью функции 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 оболочку у нас будут «повешены» события с помощью селекторов. Есть два цикла. В первом цикле будет печататься название родительских категорий, тех, которые мы перечислили в нашем массиве. Второй цикл внутри первого. В нём будут выводиться названия дочерних категорий, ссылка на них и кол-во записей.
Код для jQuery
<?php $arId = array(2, 21, 3); ?>
<div class="cnt-right">
<ul id="accordion">
<?php
foreach($arId as $id): ?>
<h2><?php echo get_cat_name($id); ?></h2>
<div>
<?php $sub_cats = get_categories( array('child_of' => $id, 'hide_empty' => 0) ); ?>
<?php
if( $sub_cats ) {
foreach( $sub_cats as $cat ): ?>
<h3><href="<?php echo get_category_link($cat->cat_ID); ?>"><?php echo $cat->name; ?></a> <span><?php echo $cat->category_count; ?></span></h3>
<?php endforeach; ?>
<?php } ?>
</div>
<?php endforeach; ?>
</ul>
</div>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
Код для Bootstrap 3
В 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.
Код:
<?php $arId = array(2, 21, 3); $i=1; ?>
<div class="accordion" id="accordion">
// Начало цикла для печати категорий
<?php foreach($arId as $id): ?>
<div class="card">
<div class="card-header" id="heading<?php echo $id;?>">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse<?php echo $id;?>" aria-expanded="true" aria-controls="collapse<?php echo $id;?>">
<?php echo get_cat_name($id); ?><!-- Печать названия категорий -->
</button>
</h2>
</div>
<?php $sub_cats = get_categories( array('child_of' => $id, 'hide_empty' => 0) ); ?><!-- Получение подкатегорий -->
<?php if( $sub_cats ) {foreach( $sub_cats as $cat ): ?><!-- Начало печати категорий -->
<div id="collapse<?php echo $id;?>" class="collapse <?php if($i == 1){echo 'show';} ?>" aria-labelledby="heading<?php echo $id;?>" data-parent="#accordion">
<div class="card-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>
</div>
<?php endforeach; ?>
<?php } ?><!-- Конец печати категорий -->
</div>
<?php $i++; endforeach; ?>
</div>
Примечание
Помните, что нужно обязательно подключить jQuery и соответствующий скрипт. В первом случае это будет jQuery UI и маленький скрипт, который указывает на селектор аккордеона. В случае с 3-м бутстрапом не забудьте подключить его стили в шапке и bootstrap.js после подключения jQuery, иначе ничего не будет работать. Подключение bootstrap.js без jQuery является распространённой ошибкой, из-за этого часто не работает выпадающие меню bootstrap. Кстати, как сделать такое меню я писал в этой статье. И наконец, для bootstrap 4 не забудьте подключить его. Всё делается так же как и с bootstrap 3.
P.S.
Хочу вам предложить воспользоваться инструментом на моём сайте «Строки». Он помогает быстро преобразовать ключевые слова из таблицы в строку, разделив их запятыми.
