Как сделать аккордеон меню для категорий сайта на Wordpress (реализация jQuery и Bootstrap 3 и Bootstrap 4)

Как сделать аккордеон меню для рубрик сайта на WordPress (реализация jQuery, Bootstrap3 и Bootstrap 4)

Для чего это нужно

Владельцы сайтов постоянно думают, как бы улучшить навигацию по своему сайту, подчеркнуть важность тех или иных элементов, в частности рубрик (категория в wordpress). Для решения подобной задачи владелец сайта http://biznesshack.ru/ (блог о заработке в интернете) попросил меня создать на его сайте аккордеон-меню ( ну или коллапс-меню (collapsed /accordion). Результат можете увидеть на этом сайте.

Как выглядит

Сайт http://biznesshack.ru/ меню

Реализация

Для реализации данного меню я выбрал 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(), но это несколько усложнило мне задачу.

Цикл вывода

В данной статье будут рассматриваться несколько вариантов вывода:

  1. С использованием jQuerry
  2. С использованием Bootstrap 3
  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 4.

P.S.

Хочу вам предложить воспользоваться инструментом на моём сайте «Строки». Он помогает быстро преобразовать ключевые слова из таблицы в строку разделив их запятыми.