Как создать функцию автоматического расширения категорий в WordPress

Автор: Кирилл Комаров | Опубликовано: 25.12.2025

В WordPress часто возникает необходимость выводить список категорий с дочерними элементами в сложных вложенных меню. Если у вас большой сайт с иерархией категорий, вручную строить дерево становится неудобно. В этой статье разберём, как создать функцию автоматического расширения категорий — то есть отображать категории и их подкатегории динамически, с возможностью разворачивания веток через AJAX. Это полезно для каталогов, интернет-магазинов и блогов с многоуровневой структурой.

Почему автоматическое расширение категорий важно

Традиционный вывод категорий в WordPress с помощью wp_list_categories() или виджетов не всегда подходит, когда нужно показать вложенную структуру с возможностью интерактивного раскрытия. Особенно если категорий много — весь список сразу грузится тяжело и неудобен для пользователя.

Автоматическое расширение категорий позволяет:

Динамически подгружать дочерние категории по мере необходимости;
Уменьшить нагрузку на страницу и ускорить её загрузку;
Сделать удобную навигацию для посетителей;
Гибко настраивать внешний вид и поведение меню категорий.

Рассмотрим, как реализовать такую функциональность с помощью PHP, AJAX и jQuery.

Создание PHP-функции для получения дочерних категорий

Для начала напишем функцию, которая будет возвращать дочерние категории конкретной категории в JSON-формате. Это позволит загружать их по AJAX.

function wpmy_get_child_categories_json($parent_id) {
    $args = array(
        'taxonomy' => 'category',
        'hide_empty' => false,
        'parent' => $parent_id
    );
    $categories = get_categories($args);
    $result = array();
    foreach ($categories as $cat) {
        $result[] = array(
            'id' => $cat->term_id,
            'name' => $cat->name,
            'has_children' => (get_categories(array('parent' => $cat->term_id, 'hide_empty' => false)) ? true : false),
            'link' => get_category_link($cat->term_id)
        );
    }
    return wp_json_encode($result);
}

В этой функции мы получаем все дочерние категории для заданного $parent_id, проверяем, есть ли у них свои дочерние категории, и формируем массив с нужными данными.

Создание AJAX-обработчика в WordPress

Для динамического подгружения категорий через AJAX нужно зарегистрировать обработчик в WordPress. Добавляем следующий код в файл functions.php вашей темы или в плагин:

add_action('wp_ajax_wpmy_load_categories', 'wpmy_ajax_load_categories');
add_action('wp_ajax_nopriv_wpmy_load_categories', 'wpmy_ajax_load_categories');

function wpmy_ajax_load_categories() {
    if (!isset($_GET['parent_id'])) {
        wp_send_json_error('Missing parent_id');
    }
    $parent_id = intval($_GET['parent_id']);
    $categories_json = wpmy_get_child_categories_json($parent_id);
    echo $categories_json;
    wp_die();
}

Этот обработчик принимает параметр parent_id и возвращает JSON со списком дочерних категорий.

Подключение JavaScript для динамического раскрытия категорий

Теперь добавим скрипт, который будет отправлять AJAX-запросы и показывать дочерние категории на странице. Для простоты используем jQuery.

Добавьте следующий код в файл JavaScript вашей темы или подключите его отдельно:

jQuery(document).ready(function($) {
    $('.wpmy-category-expand').on('click', function(e) {
        e.preventDefault();
        var button = $(this);
        var parentId = button.data('parent');
        var container = button.siblings('.wpmy-subcategories');

        if (container.is(':empty')) {
            $.ajax({
                url: wpmy_ajax_object.ajax_url,
                data: {
                    action: 'wpmy_load_categories',
                    parent_id: parentId
                },
                success: function(data) {
                    if (data.length) {
                        var html = '<ul>';
                        $.each(data, function(i, cat) {
                            html += '<li>' +
                                (cat.has_children ? '<a href="#" class="wpmy-category-expand" data-parent="' + cat.id + '">[+]</a> ' : '') +
                                '<a href="' + cat.link + '">' + cat.name + '</a>' +
                                '<div class="wpmy-subcategories"></div>' +
                                '</li>';
                        });
                        html += '</ul>';
                        container.html(html);
                    } else {
                        container.html('<em>Подкатегории отсутствуют</em>');
                    }
                },
                error: function() {
                    container.html('<em>Ошибка загрузки</em>');
                }
            });
        } else {
            container.toggle();
        }
    });
});

Для работы этого скрипта нужно локализовать объект wpmy_ajax_object с URL AJAX-запроса. Добавьте в PHP:

function wpmy_enqueue_scripts() {
    wp_enqueue_script('wpmy-category-expand', get_template_directory_uri() . '/js/wpmy-category-expand.js', array('jquery'), '1.0', true);
    wp_localize_script('wpmy-category-expand', 'wpmy_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpmy_enqueue_scripts');

Вывод начального списка категорий и верстка

Для начала нужно вывести корневые категории на странице с кнопкой для расширения:

$categories = get_categories(array('parent' => 0, 'hide_empty' => false));
echo '<ul>';
foreach ($categories as $cat) {
    $has_children = get_categories(array('parent' => $cat->term_id, 'hide_empty' => false));
    echo '<li>';
    if ($has_children) {
        echo '<a href="#" class="wpmy-category-expand" data-parent="' . $cat->term_id . '">[+]</a> ';
    }
    echo '<a href="' . get_category_link($cat->term_id) . '">' . esc_html($cat->name) . '</a>';
    echo '<div class="wpmy-subcategories"></div>';
    echo '</li>';
}
echo '</ul>';

Так мы выводим корневые категории и кнопку [+], которая при клике загрузит дочерние категории.

Оптимизация и кэширование

Если у вас много категорий и AJAX-запросов, рекомендуется добавить кэширование результатов с помощью Transients API. Это ускорит повторные запросы и снизит нагрузку на сервер.

function wpmy_get_child_categories_json_cached($parent_id) {
    $transient_key = 'wpmy_child_cats_' . $parent_id;
    $cached = get_transient($transient_key);
    if ($cached !== false) {
        return $cached;
    }
    $data = wpmy_get_child_categories_json($parent_id);
    set_transient($transient_key, $data, 12 * HOUR_IN_SECONDS);
    return $data;
}

Замените вызов wpmy_get_child_categories_json в AJAX-обработчике на wpmy_get_child_categories_json_cached для использования кэша.

Заключение

Автоматическое расширение категорий — отличное решение для удобной навигации на сайтах с большим количеством категорий. Реализация через AJAX позволяет динамично подгружать данные и улучшить UX. Представленная реализация легко адаптируется под любые задачи и может быть расширена дополнительными функциями, например, запоминанием состояния раскрытия или интеграцией с плагинами кеширования.

Если хотите упростить работу с категориями и оптимизировать структуру, обратите внимание на плагин Clearfy Pro. Он содержит полезные инструменты для оптимизации и управления таксономиями в WordPress.