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

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

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

Таксономии в WordPress — это способ группировки записей по категориям, меткам или пользовательским таксономиям. Фильтры по таксономиям позволяют пользователям выбирать нужные параметры и отображать записи, которые соответствуют выбранным критериям.

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

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

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

Самый простой способ добавить фильтр — использовать параметр tax_query внутри WP_Query. Рассмотрим пример запроса, который выводит записи, принадлежащие к нескольким таксономиям:

$args = array(
    'post_type' => 'product',
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'product_cat',
            'field'    => 'slug',
            'terms'    => 'electronics',
        ),
        array(
            'taxonomy' => 'product_brand',
            'field'    => 'slug',
            'terms'    => array('sony', 'samsung'),
            'operator' => 'IN',
        ),
    ),
);
$query = new WP_Query($args);

Здесь мы фильтруем товары из категории «electronics» и брендов Sony или Samsung. Такой запрос удобно использовать для создания кастомных фильтров на фронтенде.

Динамическая фильтрация с помощью GET-параметров

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

https://example.com/shop?product_cat=electronics&product_brand=sony,samsung

В PHP-коде получаем параметры и формируем запрос:

function wpinc_get_filtered_query() {
    $tax_query = array('relation' => 'AND');

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

    if (!empty($_GET['product_brand'])) {
        $tax_query[] = array(
            'taxonomy' => 'product_brand',
            'field' => 'slug',
            'terms' => explode(',', sanitize_text_field($_GET['product_brand'])),
        );
    }

    $args = array(
        'post_type' => 'product',
        'tax_query' => $tax_query,
    );

    return new WP_Query($args);
}

Дальше остаётся вывести результаты запроса и создать на странице формы или ссылки для выбора фильтров.

Улучшение UX: AJAX-фильтрация товаров по таксономиям

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

Основные шаги:

• Создать форму фильтра с чекбоксами или селектами для таксономий.
• Повесить JavaScript-обработчик, который при изменении выбираемых параметров отправляет AJAX-запрос на сервер.
• На сервере обработать запрос, сформировать WP_Query с параметрами и вернуть HTML с результатами.
• Обновить в DOM контейнер с результатами.

Пример JS-кода на jQuery для отправки AJAX-запроса

jQuery(document).ready(function($) {
    $('.filter-form input[type=checkbox]').on('change', function() {
        var data = $('.filter-form').serialize();
        $.ajax({
            url: wpinc_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpinc_filter_products',
                filter: data
            },
            success: function(response) {
                $('#products-container').html(response);
            }
        });
    });
});

PHP: обработка AJAX-запроса

add_action('wp_ajax_wpinc_filter_products', 'wpinc_ajax_filter_products');
add_action('wp_ajax_nopriv_wpinc_filter_products', 'wpinc_ajax_filter_products');

function wpinc_ajax_filter_products() {
    parse_str($_POST['filter'], $filters);

    $tax_query = array('relation' => 'AND');

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

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

    $args = array(
        'post_type' => 'product',
        'tax_query' => $tax_query,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // Пример вывода товара
            echo '<div class="product-item">' . get_the_title() . '</div>';
        }
    } else {
        echo '<p>Товары не найдены</p>';
    }
    wp_die();
}

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

Если хочется сэкономить время, можно использовать готовые решения. Вот несколько популярных плагинов с возможностями фильтрации:

• WPEexpert Filter — мощный плагин для создания фильтров по таксономиям, мета-данным и другим параметрам с поддержкой AJAX;
• Clearfy Pro — среди множества функций есть инструменты для оптимизации и фильтрации контента;
• WPRemark — позволяет создавать отзывы и рейтинги с фильтрами по критериям, что можно адаптировать под таксономии.

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

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

Фильтры могут создавать большое количество URL с разными параметрами, что иногда негативно сказывается на SEO. Чтобы избежать проблем:

• Используйте канонические URL для фильтрованных страниц;
• Ограничьте индексирование слишком глубокой фильтрации через robots.txt или мета-теги noindex;
• Кешируйте результаты фильтрации, чтобы уменьшить нагрузку на сервер;
• Используйте AJAX для подгрузки результатов без перезагрузки страницы, это улучшит UX без создания дублирующегося контента.

Правильный подход к фильтрам поможет удержать пользователей и не навредить видимости сайта в поисковых системах.

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

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

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