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

Автор: Егор Сорокин | Опубликовано: 07.04.2026

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

Зачем нужен динамический фильтр таксономий в WordPress

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

Динамический фильтр позволяет:

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

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

Давайте создадим простой динамический фильтр по таксономиям «category» и «post_tag» с выбором нескольких значений и AJAX-подгрузкой.

1. Вывод формы фильтра в шаблоне

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

<form id="wpclass-dynamic-filter">
  <h3>Категории</h3>
  <?php
  $categories = get_terms(['taxonomy' => '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
  $tags = get_terms(['taxonomy' => 'post_tag', 'hide_empty' => true]);
  foreach ($tags as $tag) {
      echo '<label><input type="checkbox" name="post_tag[]" value="' . esc_attr($tag->slug) . '">' . esc_html($tag->name) . '</label><br>';
  }
  ?>

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

<div id="wpclass-filter-results"></div>

2. Обработка AJAX-запроса

Создадим PHP-функцию, которая будет принимать выбранные таксономии и возвращать подходящие записи.

add_action('wp_ajax_wpclass_filter_posts', 'wpclass_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpclass_filter_posts', 'wpclass_ajax_filter_posts');

function wpclass_ajax_filter_posts() {
    $category_slugs = isset($_POST['category']) ? array_map('sanitize_text_field', $_POST['category']) : [];
    $tag_slugs = isset($_POST['post_tag']) ? array_map('sanitize_text_field', $_POST['post_tag']) : [];

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

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

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

    $query_args = [
        'post_type' => 'post',
        'tax_query' => $tax_query,
        'posts_per_page' => 10,
    ];

    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
            echo '<p>' . get_the_excerpt() . '</p>';
        }
    } else {
        echo '<p>По вашему запросу ничего не найдено.</p>';
    }

    wp_die();
}

3. JavaScript для отправки AJAX-запроса и отображения результатов

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

jQuery(document).ready(function($) {
    $('#wpclass-filter-submit').on('click', function() {
        var data = {
            action: 'wpclass_filter_posts',
            category: [],
            post_tag: []
        };

        $('#wpclass-dynamic-filter input[name="category[]"]:checked').each(function() {
            data.category.push($(this).val());
        });
        $('#wpclass-dynamic-filter input[name="post_tag[]"]:checked').each(function() {
            data.post_tag.push($(this).val());
        });

        $.post('<?php echo admin_url( 'admin-ajax.php' ); ?>', data, function(response) {
            $('#wpclass-filter-results').html(response);
        });
    });
});

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

Если вы предпочитаете готовые решения, обратите внимание на следующие плагины, которые значительно упрощают создание фильтров:

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

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

Советы по оптимизации и безопасности

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

Используйте wp_nonce_field для проверки безопасности AJAX-запросов.
Кешируйте результаты запросов, если данные редко меняются, чтобы снизить нагрузку на базу.
Ограничьте количество возвращаемых записей, чтобы избежать долгой загрузки.
Обрабатывайте входные данные через функции санитизации (например, sanitize_text_field), чтобы предотвратить XSS и SQL-инъекции.

Итог

Создание динамического фильтра таксономий в WordPress — это эффективный способ улучшить навигацию для пользователей и повысить удобство работы с контентом. Простая реализация с помощью AJAX и стандартных функций WordPress позволит быстро внедрить эту функциональность. При необходимости используйте плагины WPSHOP для расширения возможностей сайта.