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

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

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

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

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

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

Создание динамического фильтра по таксономии с AJAX в WordPress

Регистрация Custom Taxonomy и Custom Post Type

Для начала создадим кастомный тип записи book и таксономию genre (жанры книг). Добавьте следующий код в файл functions.php вашей темы или в собственный плагин:

function wpcore_register_book_post_type() {
    register_post_type('book', array(
        'labels' => array(
            'name' => 'Книги',
            'singular_name' => 'Книга'
        ),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'show_in_rest' => true
    ));
}
add_action('init', 'wpcore_register_book_post_type');

function wpcore_register_genre_taxonomy() {
    register_taxonomy('genre', 'book', array(
        'labels' => array(
            'name' => 'Жанры',
            'singular_name' => 'Жанр'
        ),
        'hierarchical' => true,
        'show_in_rest' => true
    ));
}
add_action('init', 'wpcore_register_genre_taxonomy');

Теперь в админке WordPress появится новый тип записи «Книги» и таксономия «Жанры».

Вывод фильтра на фронтенде

Создадим форму с чекбоксами для выбора жанров и контейнер для вывода списка книг:

<form id="wpcore-genre-filter">
    <?php
    $genres = get_terms(array(
        'taxonomy' => 'genre',
        'hide_empty' => true,
    ));
    foreach ($genres as $genre) {
        echo '<label><input type="checkbox" name="genre[]" value="' . esc_attr($genre->term_id) . '">' . esc_html($genre->name) . '</label>';
    }
    ?>
</form>

<div id="wpcore-books-list">
    <?php // Здесь будет вывод списка книг по умолчанию
    $args = array(
        'post_type' => 'book',
        'posts_per_page' => 10
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<h3>' . get_the_title() . '</h3>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Книги не найдены.</p>';
    }
    ?>
</div>

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

Теперь добавим AJAX, чтобы при выборе жанров автоматически подгружался список книг без перезагрузки страницы.

function wpcore_enqueue_scripts() {
    wp_enqueue_script('wpcore-filter', get_template_directory_uri() . '/js/wpcore-filter.js', array('jquery'), null, true);
    wp_localize_script('wpcore-filter', 'wpcore_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpcore_enqueue_scripts');

function wpcore_ajax_filter_books() {
    $genre_ids = isset($_POST['genres']) ? array_map('intval', $_POST['genres']) : array();

    $args = array(
        'post_type' => 'book',
        'posts_per_page' => 10,
    );

    if (!empty($genre_ids)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'genre',
                'field' => 'term_id',
                'terms' => $genre_ids,
            ),
        );
    }

    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<h3>' . get_the_title() . '</h3>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Книги не найдены.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpcore_filter_books', 'wpcore_ajax_filter_books');
add_action('wp_ajax_nopriv_wpcore_filter_books', 'wpcore_ajax_filter_books');

JavaScript для AJAX-запроса

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

jQuery(document).ready(function($) {
    $('#wpcore-genre-filter input[type=checkbox]').on('change', function() {
        var selectedGenres = [];
        $('#wpcore-genre-filter input[type=checkbox]:checked').each(function() {
            selectedGenres.push($(this).val());
        });

        $.ajax({
            url: wpcore_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'wpcore_filter_books',
                genres: selectedGenres
            },
            beforeSend: function() {
                $('#wpcore-books-list').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wpcore-books-list').html(response);
            },
            error: function() {
                $('#wpcore-books-list').html('<p>Ошибка загрузки данных.</p>');
            }
        });
    });
});

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

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

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

Советы по оптимизации динамических фильтров в WordPress

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

• Используйте кэширование AJAX-ответов, например, через transient API или плагины кэширования.
• Ограничивайте количество выводимых записей на страницу и добавляйте пагинацию.
• Проверяйте запросы на наличие ненужных JOIN и оптимизируйте WP_Query.
• Подключайте скрипты и стили только на страницах, где используется фильтр.
• Обрабатывайте ошибки AJAX-запросов и выводите понятные сообщения пользователю.

Заключение

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

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