Одним из эффективных способов улучшить навигацию и управление контентом в WordPress является создание иерархической структуры таксономий с возможностью динамического взаимодействия через REST API. Это позволит строить удобные интерфейсы для пользователей и администраторов, обеспечит гибкую фильтрацию и подгрузку данных без перезагрузки страницы.
Что такое иерархия таксономий и зачем нужна поддержка REST API
Иерархия таксономий — это организация терминов (категорий, меток или пользовательских таксономий) в древовидную структуру с родительскими и дочерними элементами. Такой подход помогает структурировать контент, например, создавать вложенные категории товаров, статей или проектов.
Поддержка REST API позволяет взаимодействовать с этими таксономиями через AJAX-запросы, создавая динамические интерфейсы, например, подгружающие дочерние категории при клике, без полной перезагрузки страницы. Это улучшает UX и ускоряет работу сайта.
В этом руководстве мы рассмотрим, как создать кастомную иерархическую таксономию, зарегистрировать REST API эндпоинты для работы с ней и реализовать динамическую подгрузку терминов на фронтенде.
Регистрация иерархической пользовательской таксономии с REST API поддержкой
Для начала создадим пользовательскую таксономию с параметром hierarchical => true и включим поддержку REST API, добавив 'show_in_rest' => true. Это позволит работать с таксономией через стандартные WP REST API маршруты.
function wphierarchy_register_taxonomy() {
$labels = array(
'name' => 'Темы',
'singular_name' => 'Тема',
'search_items' => 'Поиск тем',
'all_items' => 'Все темы',
'parent_item' => 'Родительская тема',
'parent_item_colon' => 'Родительская тема:',
'edit_item' => 'Редактировать тему',
'update_item' => 'Обновить тему',
'add_new_item' => 'Добавить новую тему',
'new_item_name' => 'Новое имя темы',
'menu_name' => 'Темы',
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'tema'),
'show_in_rest' => true,
'rest_base' => 'tema',
'rest_controller_class' => 'WP_REST_Terms_Controller',
);
register_taxonomy('tema', array('post'), $args);
}
add_action('init', 'wphierarchy_register_taxonomy');Обратите внимание, что rest_base задаёт базовый URL для запросов таксономии, а rest_controller_class отвечает за обработку REST API.
Добавление пользовательского REST API эндпоинта для получения иерархии терминов
Стандартные WP REST API возвращают термины без удобной иерархической вложенности. Чтобы получить дерево терминов с дочерними элементами, создадим кастомный маршрут и функцию-обработчик.
function wphierarchy_register_rest_routes() {
register_rest_route('wphierarchy/v1', '/terms-tree/', array(
'methods' => 'GET',
'callback' => 'wphierarchy_get_terms_tree',
'permission_callback' => '__return_true',
));
}
add_action('rest_api_init', 'wphierarchy_register_rest_routes');
function wphierarchy_get_terms_tree(WP_REST_Request $request) {
$taxonomy = 'tema';
$terms = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
'parent' => 0,
));
if (is_wp_error($terms)) {
return new WP_Error('no_terms', 'Таксономии не найдены', array('status' => 404));
}
$build_tree = function($parent_id) use (&$build_tree, $taxonomy) {
$children = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
'parent' => $parent_id,
));
$tree = array();
foreach ($children as $child) {
$tree[] = array(
'id' => $child->term_id,
'name' => $child->name,
'slug' => $child->slug,
'children' => $build_tree($child->term_id),
);
}
return $tree;
};
$tree = array();
foreach ($terms as $term) {
$tree[] = array(
'id' => $term->term_id,
'name' => $term->name,
'slug' => $term->slug,
'children' => $build_tree($term->term_id),
);
}
return rest_ensure_response($tree);
}Этот код создаёт REST API маршрут /wp-json/wphierarchy/v1/terms-tree/, который возвращает вложенную структуру терминов таксономии tema в формате JSON, включая всех потомков.
Пример динамической подгрузки и отображения иерархии таксономий на фронтенде
Для демонстрации динамического взаимодействия с REST API создадим простой JavaScript код, который загрузит и отобразит дерево терминов с возможностью раскрытия дочерних элементов.
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('wphierarchy-terms-container');
function createList(terms) {
const ul = document.createElement('ul');
terms.forEach(term => {
const li = document.createElement('li');
li.textContent = term.name;
if (term.children && term.children.length > 0) {
li.classList.add('has-children');
const childUl = createList(term.children);
childUl.style.display = 'none';
li.appendChild(childUl);
li.addEventListener('click', function(e) {
e.stopPropagation();
if (childUl.style.display === 'none') {
childUl.style.display = 'block';
} else {
childUl.style.display = 'none';
}
});
}
ul.appendChild(li);
});
return ul;
}
fetch('/wp-json/wphierarchy/v1/terms-tree/')
.then(response => response.json())
.then(data => {
const tree = createList(data);
container.appendChild(tree);
})
.catch(error => {
container.textContent = 'Ошибка загрузки данных';
console.error(error);
});
});Для вывода списка создайте в шаблоне или статье элемент с id wphierarchy-terms-container:
<div id="wphierarchy-terms-container">Загрузка иерархии...</div>Этот скрипт подгрузит и создаст вложенный список, раскрывающий дочерние элементы при клике, что позволит пользователям удобно просматривать структуру таксономий.
Рекомендации по оптимизации и безопасности
Если таксономия содержит большое количество терминов и уровней, стоит предусмотреть пагинацию или ленивую загрузку дочерних элементов по запросу. Это снизит нагрузку на сервер и ускорит отклик интерфейса.
Для защиты REST API маршрутов можно реализовать проверку прав доступа через permission_callback, например, ограничить получение терминов только авторизованным пользователям или администраторам.
Используйте кэширование ответов REST API на стороне сервера или клиента для уменьшения количества запросов при частом обращении.
Заключение
Создание динамической иерархии таксономий с поддержкой REST API позволит реализовать гибкие и удобные интерфейсы для работы с контентом в WordPress. Используя приведённый пример, вы сможете расширить функционал сайта, улучшить пользовательский опыт и упростить управление сложными структурами терминов.
Для расширения возможностей рассмотрите использование плагинов, например, Clearfy Pro, который помогает оптимизировать REST API и управлять таксономиями, или WPRemark для комментариев и отзывов с иерархией.