Для реализации данного меню я выбрал 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
Код для jQuery
<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>
<?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>
<?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 4.