Как создать динамический фильтр по таксономиям в WordPress с примерами кода

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

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

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

Для реализации фильтра можно использовать готовые плагины, но зачастую они слишком громоздкие или не подходят под конкретные задачи. Поэтому рассмотрим создание легкого и настраиваемого фильтра на PHP и JavaScript.

Основы работы с таксономиями в WordPress

В WordPress таксономии — это способ группировки контента. Стандартные таксономии — «категории» и «метки», но можно создавать и свои. Для вывода фильтра нам нужно получить список терминов таксономии и построить интерфейс для выбора.

Для получения терминов используется функция wpstock_get_terms_for_taxonomy():

function wpstock_get_terms_for_taxonomy($taxonomy) {
    return get_terms(array(
        'taxonomy' => $taxonomy,
        'hide_empty' => true,
    ));
}

Здесь мы получаем только те термины, в которых есть записи.

Создание формы фильтрации по таксономиям (HTML и PHP)

Далее создадим форму с чекбоксами для выбора терминов. Например, фильтр по категории "product_cat" (если у вас магазин на WooCommerce) или пользовательской таксономии.

function wpstock_render_taxonomy_filter_form($taxonomy) {
    $terms = wpstock_get_terms_for_taxonomy($taxonomy);
    if (empty($terms) || is_wp_error($terms)) {
        echo '<p>Таксономия пуста или не найдена.</p>';
        return;
    }
    echo '<form method="GET" id="wpstock-filter-form">';
    foreach ($terms as $term) {
        $checked = (isset($_GET[$taxonomy]) && in_array($term->slug, (array)$_GET[$taxonomy])) ? 'checked' : '';
        echo '<label><input type="checkbox" name="' . esc_attr($taxonomy) . '[]" value="' . esc_attr($term->slug) . '" ' . $checked . '> ' . esc_html($term->name) . '</label><br>';
    }
    echo '<button type="submit">Фильтровать</button>';
    echo '</form>';
}

Эту функцию можно вызвать в шаблоне, передав нужную таксономию:

<?php wpstock_render_taxonomy_filter_form('product_cat'); ?>

Обработка и вывод отфильтрованных записей

После того как пользователь выбрал термины и отправил форму, нужно обработать запрос и вывести записи, соответствующие выбранным терминам. Для этого используем WP_Query с параметром 'tax_query'.

function wpstock_get_filtered_posts($taxonomy) {
    if (empty($_GET[$taxonomy])) {
        return new WP_Query(); // Без фильтра
    }
    $terms = array_map('sanitize_text_field', (array)$_GET[$taxonomy]);
    $args = array(
        'post_type' => 'post',
        'tax_query' => array(
            array(
                'taxonomy' => $taxonomy,
                'field' => 'slug',
                'terms' => $terms,
                'operator' => 'IN',
            ),
        ),
        'posts_per_page' => 10,
    );
    return new WP_Query($args);
}

Далее выводим результаты:

$query = wpstock_get_filtered_posts('product_cat');
if ($query->have_posts()) {
    echo '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
} else {
    echo '<p>Записи не найдены.</p>';
}
wp_reset_postdata();

Расширение фильтра: поддержка нескольких таксономий и AJAX

Для более сложных проектов можно расширить форму, добавив фильтры по нескольким таксономиям сразу. Для этого просто создайте несколько блоков чекбоксов с разными именами, например product_cat[] и product_tag[], и в WP_Query добавьте несколько элементов в массив tax_query.

Пример расширенного tax_query:

$tax_query = array('relation' => 'AND');
if (!empty($_GET['product_cat'])) {
    $tax_query[] = array(
        'taxonomy' => 'product_cat',
        'field' => 'slug',
        'terms' => array_map('sanitize_text_field', $_GET['product_cat']),
    );
}
if (!empty($_GET['product_tag'])) {
    $tax_query[] = array(
        'taxonomy' => 'product_tag',
        'field' => 'slug',
        'terms' => array_map('sanitize_text_field', $_GET['product_tag']),
    );
}
$args['tax_query'] = $tax_query;

Кроме того, чтобы не перезагружать страницу, можно реализовать AJAX-запросы для динамического обновления результатов. Для этого используйте wp_localize_script для передачи ajax_url, а на стороне JS — jQuery или vanilla JavaScript для отправки запросов и обновления контента без перезагрузки.

Использование плагинов для упрощения задачи

Если хочется минимизировать код, можно использовать плагины с поддержкой фильтрации по таксономиям. Например:

• ABC Pagination — позволяет создавать пагинацию и фильтры с гибкими настройками.
• Clearfy Pro — оптимизационный плагин с возможностью настройки фильтров и очистки кода.

Однако, изучение собственной реализации помогает лучше понять, как работает WordPress и контролировать производительность.

Заключение

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