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

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

Что такое динамический фильтр по таксономиям и зачем он нужен

Фильтр по таксономиям позволяет посетителям выбирать записи на сайте, основываясь на определённых критериях таксономий. Например, если у вас интернет-магазин на WordPress с категориями товаров, фильтр поможет выбрать товары по категориям, цветам или брендам.

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

Реализация такого фильтра позволяет:

• Улучшить удобство поиска нужного контента;
• Снизить нагрузку на сервер за счёт AJAX-запросов;
• Предоставить гибкие настройки отображения;
• Обеспечить поддержку кастомных таксономий и типов записей.

Создание кастомного фильтра по таксономиям: пошаговое руководство

Шаг 1. Подготовка таксономий и типов записей

Для начала убедитесь, что у вас есть кастомные таксономии и типы записей, по которым вы хотите фильтровать. Например, создадим тип записи «product» и таксономию «brand».

function hueman_register_custom_post_type_and_taxonomy() {
    register_post_type('product', array(
        'labels' => array('name' => 'Товары'),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
    ));

    register_taxonomy('brand', 'product', array(
        'labels' => array('name' => 'Бренды'),
        'hierarchical' => true,
        'public' => true,
    ));
}
add_action('init', 'hueman_register_custom_post_type_and_taxonomy');

Этот код создаст новый тип записей «product» и таксономию «brand».

Шаг 2. Вывод фильтра на фронтенде

Далее создадим HTML-блок с чекбоксами, которые будут отображать все доступные термины таксономии «brand».

function hueman_display_taxonomy_filter() {
    $terms = get_terms(array(
        'taxonomy' => 'brand',
        'hide_empty' => true,
    ));

    if (!empty($terms) && !is_wp_error($terms)) {
        echo '<form id="hueman-filter-form">';
        foreach ($terms as $term) {
            echo '<label>';
            echo '<input type="checkbox" name="brands[]" value="' . esc_attr($term->slug) . '"> ' . esc_html($term->name);
            echo '</label><br>';
        }
        echo '<button type="submit">Фильтровать</button>';
        echo '</form>';
        echo '<div id="hueman-filter-results"></div>';
    }
}

Вызовите функцию hueman_display_taxonomy_filter() в нужном шаблоне, чтобы вывести фильтр.

Шаг 3. Обработка AJAX-запроса для фильтрации

Чтобы фильтр работал без перезагрузки страницы, добавим AJAX-обработчик. Он будет принимать выбранные бренды и возвращать отфильтрованные записи.

function hueman_ajax_filter_products() {
    $brands = isset($_POST['brands']) ? array_map('sanitize_text_field', $_POST['brands']) : array();

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
    );

    if (!empty($brands)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'brand',
                'field' => 'slug',
                'terms' => $brands,
            ),
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="product-item"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
        }
    } else {
        echo '<p>Товары не найдены.</p>';
    }
    wp_die();
}
add_action('wp_ajax_hueman_filter_products', 'hueman_ajax_filter_products');
add_action('wp_ajax_nopriv_hueman_filter_products', 'hueman_ajax_filter_products');

Шаг 4. Скрипт AJAX на стороне клиента

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

function hueman_enqueue_scripts() {
    wp_enqueue_script('hueman-filter', get_template_directory_uri() . '/js/hueman-filter.js', array('jquery'), null, true);
    wp_localize_script('hueman-filter', 'hueman_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('hueman_filter_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_scripts');

Создайте файл hueman-filter.js в папке js вашей темы и добавьте следующий код:

jQuery(document).ready(function($) {
    $('#hueman-filter-form').on('submit', function(e) {
        e.preventDefault();
        var selectedBrands = [];
        $('#hueman-filter-form input[name="brands[]"]:checked').each(function() {
            selectedBrands.push($(this).val());
        });

        $.ajax({
            url: hueman_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'hueman_filter_products',
                brands: selectedBrands,
                _ajax_nonce: hueman_ajax_obj.nonce
            },
            success: function(response) {
                $('#hueman-filter-results').html(response);
            },
            error: function() {
                $('#hueman-filter-results').html('<p>Произошла ошибка при загрузке.</p>');
            }
        });
    });
});

Использование плагинов для динамического фильтра по таксономиям

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

• FacetWP — мощный плагин для фильтрации по таксономиям и мета-данным с поддержкой AJAX;
• Filter Everything — бесплатный плагин с возможностью фильтрации по категориям, тегам, произвольным таксономиям и полям;
• Search & Filter — простой в настройке плагин для создания фильтров с поддержкой кастомных типов записей и таксономий.

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

Советы по оптимизации и безопасности фильтров

При реализации динамических фильтров важно учитывать производительность и безопасность:

• Используйте sanitize_text_field и проверку nonce для защиты от CSRF;
• Ограничивайте количество выводимых записей, чтобы избежать нагрузки на базу данных;
• Кешируйте результаты AJAX-запросов, если возможно;
• Оптимизируйте запросы WP_Query, избегайте избыточных JOIN и больших tax_query;
• Проверяйте совместимость с другими плагинами и темой.

Правильная реализация фильтра повысит удобство пользователей и улучшит поведенческие факторы сайта.