При разработке сложных сайтов на WordPress часто возникает задача отображения иерархической структуры разделов с возможностью подсчета количества вложенных элементов и фильтрации по разным параметрам. Такая функциональность полезна для каталогов, новостных порталов, интернет-магазинов и любых проектов с большим объемом контента, разделенного на категории или пользовательские таксономии.
Зачем нужно дерево разделений с подсчетом и фильтрацией
Дерево разделений — это визуальное представление иерархии категорий, тегов или других таксономий, где каждый уровень раскрывается для удобства навигации пользователя. Подсчет количества элементов в каждой ветке помогает понять объем контента в разделе, а фильтрация — быстро отфильтровать нужные записи.
Без такой структуры пользователь может запутаться, особенно если таксономий много и они вложены друг в друга. Кроме того, поисковые системы ценят удобную навигацию и правильную иерархию, что положительно сказывается на SEO.
Для реализации такой функциональности в WordPress можно использовать как готовые плагины, так и писать собственные решения с помощью REST API и AJAX для динамической подгрузки.
Использование плагинов для дерева разделений
Для начала рассмотрим несколько популярных плагинов, которые помогут создать дерево разделений с подсчетом и фильтрацией.
- Category Posts Widget — простой плагин для вывода списка записей из заданных категорий с подсчетом количества. Работает как виджет, но не поддерживает динамическую фильтрацию.
- Taxonomy Tree — плагин для визуализации иерархии таксономий в виде дерева. Позволяет менять уровни раскрытия, подсчитывает количество записей, но требует кастомизации для фильтров.
- WP AJAX Filter — расширенный плагин для AJAX-фильтрации по таксономиям и метаполям, позволяет создавать сложные фильтры на фронтенде без перезагрузки страницы.
Для комплексной задачи лучше комбинировать «Taxonomy Tree» для отображения структуры и «WP AJAX Filter» для фильтрации.
Пример кода: создание собственного дерева разделений с подсчетом и AJAX-фильтром
Если нужна максимально гибкая реализация, можно написать свой код. Ниже приведен пример, как вывести дерево категорий с подсчетом постов и AJAX-фильтром.
1. Вывод дерева категорий с подсчетом
function wphierarchy_get_category_tree($parent = 0) {
$categories = get_categories(array(
'parent' => $parent,
'hide_empty' => false
));
if (!$categories) return '';
$html = '<ul>';
foreach ($categories as $category) {
$count = $category->count;
$html .= '<li data-cat-id="' . $category->term_id . '">' . esc_html($category->name) . ' (' . $count . ')';
$html .= wphierarchy_get_category_tree($category->term_id);
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}Этот рекурсивный вызов строит дерево категорий с указанием количества записей в каждой.
2. Добавление AJAX-фильтрации постов по категории
Для реализации фильтрации добавим скрипт, который при клике на категорию будет загружать посты через AJAX:
add_action('wp_enqueue_scripts', 'wphierarchy_enqueue_scripts');
function wphierarchy_enqueue_scripts() {
wp_enqueue_script('wphierarchy-filter', get_template_directory_uri() . '/js/wphierarchy-filter.js', array('jquery'), null, true);
wp_localize_script('wphierarchy-filter', 'wphierarchy_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_ajax_wphierarchy_filter_posts', 'wphierarchy_filter_posts_callback');
add_action('wp_ajax_nopriv_wphierarchy_filter_posts', 'wphierarchy_filter_posts_callback');
function wphierarchy_filter_posts_callback() {
$cat_id = intval($_POST['cat_id']);
$query = new WP_Query(array(
'cat' => $cat_id,
'posts_per_page' => 10,
));
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
}
} else {
echo '<p>Записей не найдено</p>';
}
wp_die();
}В файле wphierarchy-filter.js нужно написать:
jQuery(document).ready(function($) {
$('ul li').on('click', function(e) {
e.stopPropagation();
var catId = $(this).data('cat-id');
$.post(wphierarchy_ajax.ajax_url, {
action: 'wphierarchy_filter_posts',
cat_id: catId
}, function(response) {
$('#wphierarchy-posts-container').html(response);
});
});
});Таким образом при клике на категорию выводятся посты из нее без перезагрузки страницы.
Оптимизация и расширение функционала
Улучшение UX с помощью раскрывающихся подкатегорий
Чтобы дерево выглядело удобнее, можно добавить динамическое раскрытие подкатегорий по клику, а не показывать все сразу. Это снизит нагрузку на страницу и упростит восприятие.
Для этого в JS можно добавить проверку, есть ли вложенные списки, и показывать/скрывать их по клику.
Кэширование результатов
Для ускорения работы имеет смысл кэшировать вывод дерева категорий и результаты запросов. Это можно сделать с помощью Transients API WordPress или внешних кешей.
Поддержка пользовательских таксономий
Приведенный код легко адаптируется под кастомные таксономии, достаточно заменить функцию get_categories на get_terms с указанием нужной таксономии.
Пример использования плагина WPRemark для улучшения дерева разделений
Плагин WPRemark позволяет создавать расширенные иерархии отзывов и комментариев, что можно интегрировать в дерево разделений для отображения рейтингов и отзывов по категориям.
Это особенно полезно, если дерево используется для каталога товаров или услуг. WPRemark поддерживает AJAX-подгрузку, кастомные поля и интеграцию с рейтингами, что значительно расширит возможности вашего сайта.
Итоги
Создание дерева разделений с подсчетом и фильтрацией — задача, решаемая разными способами: от готовых плагинов до написания собственного кода с AJAX. Важно выбрать подход, который лучше всего подходит под конкретные требования проекта, чтобы обеспечить удобство навигации и быстрый доступ к нужной информации.
Используйте приведенные примеры и рекомендации, чтобы реализовать мощную и гибкую структуру разделов на вашем сайте WordPress.