Как сделать многоуровневый фильтр в WordPress на примере товаров

Автор: Людмила Журавлева | Опубликовано: 04.04.2026

Многоуровневый фильтр — это удобный инструмент для пользователей сайта, который позволяет быстро находить нужные товары или записи, применяя несколько критериев поиска одновременно. В WordPress реализовать такой фильтр можно разными способами: с помощью готовых плагинов, кастомных типов записей, таксономий и пользовательских запросов.

Зачем нужен многоуровневый фильтр в WordPress

Если у вас интернет-магазин или каталог с большим ассортиментом, пользователи теряются в объёмах и уходят, не найдя нужное. Многоуровневый фильтр решает эту проблему, позволяя фильтровать товары по категориям, ценам, атрибутам и другим параметрам. Например, можно фильтровать смартфоны по бренду, цене и объёму памяти одновременно.

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

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

1. Использование плагинов для фильтрации

Для большинства пользователей самый простой вариант — установить специализированный плагин. Вот популярные решения:

WOOF – Products Filter for WooCommerce — мощный фильтр для WooCommerce с поддержкой AJAX, многоуровневой фильтрацией по атрибутам, категориям, цене и тегам.
FacetWP — платный, но очень гибкий плагин, который умеет создавать фильтры для любых типов записей и таксономий, поддерживает AJAX и быстро работает.
Filter Everything — бесплатный плагин с расширенной фильтрацией по мета-полям, таксономиям и типам записей, подходит для кастомных каталогов.

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

2. Кастомная реализация многоуровневого фильтра

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

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

Создать кастомные таксономии и мета-поля для товаров (если используется не WooCommerce).
Собрать форму фильтра с элементами для выбора значений (select, checkbox, radio).
Написать обработчик AJAX, который будет принимать выбранные параметры и выполнять WP_Query с аргументами фильтрации.
Обновлять список товаров на странице без перезагрузки.

Рассмотрим пример простой реализации фильтра по цвету и категории для кастомного типа записей wpeasy_product.

Пример кода многоуровневого фильтра

Регистрация кастомного типа записи и таксономий

function wpeasy_register_custom_post_types() {
    register_post_type('wpeasy_product', [
        'labels' => [
            'name' => 'Товары',
            'singular_name' => 'Товар'
        ],
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail']
    ]);

    register_taxonomy('wpeasy_category', 'wpeasy_product', [
        'label' => 'Категории',
        'hierarchical' => true,
        'public' => true
    ]);

    register_taxonomy('wpeasy_color', 'wpeasy_product', [
        'label' => 'Цвет',
        'hierarchical' => false,
        'public' => true
    ]);
}
add_action('init', 'wpeasy_register_custom_post_types');

Форма фильтрации

Добавляем форму с чекбоксами для выбора категорий и цветов:

<form id="wpeasy_filter_form">
  <h3>Категории</h3>
  <?php
  $categories = get_terms(['taxonomy' => 'wpeasy_category', 'hide_empty' => true]);
  foreach ($categories as $cat) {
      echo '<label><input type="checkbox" name="category[]" value="' . esc_attr($cat->slug) . '">' . esc_html($cat->name) . '</label><br>';
  }
  ?>

  <h3>Цвет</h3>
  <?php
  $colors = get_terms(['taxonomy' => 'wpeasy_color', 'hide_empty' => true]);
  foreach ($colors as $color) {
      echo '<label><input type="checkbox" name="color[]" value="' . esc_attr($color->slug) . '">' . esc_html($color->name) . '</label><br>';
  }
  ?>

  <button type="submit">Применить фильтр</button>
</form>
<div id="wpeasy_filter_results"></div>

AJAX-обработчик фильтра

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

function wpeasy_ajax_filter_handler() {
    $category = isset($_POST['category']) ? array_map('sanitize_text_field', $_POST['category']) : [];
    $color = isset($_POST['color']) ? array_map('sanitize_text_field', $_POST['color']) : [];

    $tax_query = ['relation' => 'AND'];

    if (!empty($category)) {
        $tax_query[] = [
            'taxonomy' => 'wpeasy_category',
            'field' => 'slug',
            'terms' => $category,
            'operator' => 'IN'
        ];
    }

    if (!empty($color)) {
        $tax_query[] = [
            'taxonomy' => 'wpeasy_color',
            'field' => 'slug',
            'terms' => $color,
            'operator' => 'IN'
        ];
    }

    $args = [
        'post_type' => 'wpeasy_product',
        'posts_per_page' => 10,
        'tax_query' => $tax_query
    ];

    $query = new WP_Query($args);

    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_die();
}
add_action('wp_ajax_wpeasy_filter', 'wpeasy_ajax_filter_handler');
add_action('wp_ajax_nopriv_wpeasy_filter', 'wpeasy_ajax_filter_handler');

JavaScript для отправки формы и обновления результатов

document.getElementById('wpeasy_filter_form').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);

    fetch(wpeasy_ajax_object.ajax_url, {
        method: 'POST',
        body: new URLSearchParams({
            action: 'wpeasy_filter',
            category: formData.getAll('category[]'),
            color: formData.getAll('color[]')
        })
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('wpeasy_filter_results').innerHTML = html;
    });
});

Важно зарегистрировать wpeasy_ajax_object в PHP с помощью wp_localize_script для передачи URL обработки AJAX.

Советы по оптимизации и улучшению фильтра

Используйте AJAX для динамического обновления

Это улучшает UX — пользователю не нужно перезагружать страницу, чтобы увидеть результаты фильтрации.

Кэширование результатов

При большом каталоге рекомендуем кэшировать результаты фильтрации, чтобы снизить нагрузку на сервер. Например, использовать Transients API или внешние решения.

Поддержка SEO

Для SEO хорошо, если фильтр создает понятные URL с параметрами (например, /products/?category=smartfony&color=black). Для этого можно использовать Rewrite Rules или плагин Clearfy Pro, который оптимизирует URL и убирает дубли.

Использование плагина Clearfy Pro для расширенной фильтрации

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

С Clearfy Pro можно быстро отключить ненужные функции WordPress, что ускорит работу фильтра, а также настроить дружественные URL и метаданные для фильтрованных страниц.

Итоги

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

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