Как создать иерархию таксономий с поддержкой AJAX в WordPress

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

Почему стоит использовать AJAX для иерархии таксономий

Стандартное отображение иерархии таксономий в WordPress предполагает загрузку всех терминов сразу, что при большом количестве может привести к замедлению страницы и затруднениям в навигации. Использование AJAX позволяет подгружать дочерние термины по требованию, то есть когда пользователь раскрывает определенный узел иерархии. Это существенно снижает нагрузку на браузер и сервер.

Кроме того, AJAX делает интерфейс более интерактивным и удобным для пользователя, особенно если требуется редактировать или фильтровать контент на основе таксономий.

Примером может служить использование AJAX в админке для управления категорией товаров или метками блога с глубокой вложенностью.

Пример создания AJAX-запроса для подгрузки дочерних терминов

Для начала создадим функцию, которая будет обрабатывать AJAX-запросы и возвращать дочерние термины таксономии. В нашем примере возьмем таксономию product_cat — категорию товаров.

add_action('wp_ajax_wphierarchy_load_child_terms', 'wphierarchy_load_child_terms');
add_action('wp_ajax_nopriv_wphierarchy_load_child_terms', 'wphierarchy_load_child_terms');

function wphierarchy_load_child_terms() {
    if (!isset($_POST['parent'])) {
        wp_send_json_error('Parent term ID is missing');
        wp_die();
    }

    $parent = intval($_POST['parent']);
    $taxonomy = 'product_cat';

    $terms = get_terms([
        'taxonomy' => $taxonomy,
        'parent' => $parent,
        'hide_empty' => false,
    ]);

    if (is_wp_error($terms)) {
        wp_send_json_error('Error loading terms');
        wp_die();
    }

    $response = [];
    foreach ($terms as $term) {
        $response[] = [
            'id' => $term->term_id,
            'name' => $term->name,
            'hasChildren' => $term->count > 0,
        ];
    }

    wp_send_json_success($response);
    wp_die();
}

В этом коде мы регистрируем AJAX-обработчик wphierarchy_load_child_terms, который получает ID родительского термина, загружает его дочерние термины и возвращает данные в формате JSON.

Подключение скрипта и реализация фронтенда

Далее подключим JavaScript, который будет отправлять AJAX-запросы и динамически отображать иерархию.

function wphierarchy_enqueue_scripts() {
    wp_enqueue_script('wphierarchy-ajax', get_template_directory_uri() . '/js/wphierarchy-ajax.js', ['jquery'], null, true);
    wp_localize_script('wphierarchy-ajax', 'wphierarchy_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wphierarchy_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'wphierarchy_enqueue_scripts');

В файле wphierarchy-ajax.js реализуем обработку кликов по элементам и загрузку дочерних терминов:

jQuery(document).ready(function($) {
    function loadChildTerms(parentId, container) {
        $.post(wphierarchy_ajax.ajax_url, {
            action: 'wphierarchy_load_child_terms',
            parent: parentId,
            _ajax_nonce: wphierarchy_ajax.nonce
        }, function(response) {
            if (response.success) {
                let list = $('<ul></ul>');
                $.each(response.data, function(index, term) {
                    let li = $('<li></li>').text(term.name).attr('data-term-id', term.id);
                    if (term.hasChildren) {
                        li.addClass('has-children');
                    }
                    list.append(li);
                });
                container.append(list);
            } else {
                container.append('<p>Ошибка загрузки терминов.</p>');
            }
        });
    }

    $(document).on('click', 'li.has-children', function(e) {
        e.stopPropagation();
        let li = $(this);
        if (li.children('ul').length === 0) {
            let termId = li.data('term-id');
            loadChildTerms(termId, li);
        } else {
            li.children('ul').toggle();
        }
    });
});

В этом скрипте мы навешиваем обработчик клика на элементы с классом has-children, при первом клике выполняем AJAX-запрос и подгружаем дочерние термины, при повторных кликах просто переключаем видимость вложенного списка.

Реализация безопасного и масштабируемого решения

Для безопасности важно добавить проверку nonce в AJAX обработчике:

function wphierarchy_load_child_terms() {
    check_ajax_referer('wphierarchy_nonce');
    // остальной код
}

Также стоит ограничить максимальную глубину рекурсии при подгрузке, чтобы избежать слишком глубокой вложенности и ухудшения UX. Можно добавить параметр глубины в запрос и проверять его в PHP.

Если вы хотите расширить функционал, можно добавить возможность выбора терминов с чекбоксами, фильтрацию по метаданным и интеграцию с плагинами SEO или фильтрации товаров.

Как использовать с плагином Clearfy Pro

Плагин Clearfy Pro помогает оптимизировать работу WordPress, включая управление таксономиями и очистку базы данных. После реализации AJAX-подгрузки дочерних терминов можно дополнительно ускорить сайт, отключив лишние скрипты и стили через Clearfy Pro, что положительно скажется на скорости загрузки страниц с иерархиями таксономий.

Выводы

Создание иерархии таксономий с поддержкой AJAX позволяет значительно улучшить производительность сайта и удобство работы с большим количеством терминов. Представленный пример демонстрирует базовый подход, который можно расширять и адаптировать под конкретные задачи. Использование современных плагинов, таких как Clearfy Pro, поможет дополнительно оптимизировать и обезопасить ваше решение.