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

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

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

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

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

Подготовка: регистрация пользовательских таксономий и типов записей

Для примера предположим, что у вас есть кастомный тип записей product с таксономиями brand и color. Если они ещё не зарегистрированы, можно сделать так:

function wpsystem_register_custom_types() {
    register_post_type('product', [
        'label' => 'Продукты',
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
    ]);
    register_taxonomy('brand', 'product', [
        'label' => 'Бренды',
        'hierarchical' => true,
        'public' => true,
    ]);
    register_taxonomy('color', 'product', [
        'label' => 'Цвета',
        'hierarchical' => false,
        'public' => true,
    ]);
}
add_action('init', 'wpsystem_register_custom_types');

Эти таксономии мы будем использовать в фильтре.

Создание HTML интерфейса для фильтра

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

<form id="wpsystem-filter-form">
    <h3>Фильтр по брендам</h3>
    <?php
    $brands = get_terms(['taxonomy' => 'brand', 'hide_empty' => false]);
    foreach ($brands as $brand) : ?>
        <label>
            <input type="checkbox" name="brand[]" value="<?php echo esc_attr($brand->slug); ?>"> <?php echo esc_html($brand->name); ?>
        </label><br>
    <?php endforeach; ?>

    <h3>Фильтр по цветам</h3>
    <?php
    $colors = get_terms(['taxonomy' => 'color', 'hide_empty' => false]);
    foreach ($colors as $color) : ?>
        <label>
            <input type="checkbox" name="color[]" value="<?php echo esc_attr($color->slug); ?>"> <?php echo esc_html($color->name); ?>
        </label><br>
    <?php endforeach; ?>

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

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

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

Обработка AJAX-запроса и вывод отфильтрованных записей

Теперь создадим обработчик AJAX, который будет принимать выбранные значения таксономий и возвращать соответствующие записи.

add_action('wp_ajax_wpsystem_filter_products', 'wpsystem_ajax_filter_products');
add_action('wp_ajax_nopriv_wpsystem_filter_products', 'wpsystem_ajax_filter_products');

function wpsystem_ajax_filter_products() {
    // Проверяем nonce для безопасности (если используете)

    $tax_query = [];

    if (!empty($_POST['brand'])) {
        $tax_query[] = [
            'taxonomy' => 'brand',
            'field' => 'slug',
            'terms' => array_map('sanitize_text_field', $_POST['brand']),
            'operator' => 'IN',
        ];
    }

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

    $args = [
        'post_type' => 'product',
        'posts_per_page' => 10,
        'tax_query' => $tax_query ? ['relation' => 'AND'] + $tax_query : [],
    ];

    $query = new WP_Query($args);

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

    wp_die();
}

JS-код для отправки данных и обновления результатов

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

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('wpsystem-filter-form');
    const results = document.getElementById('wpsystem-filter-results');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(form);
        formData.append('action', 'wpsystem_filter_products');

        fetch(wpsystem_ajax_object.ajax_url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            results.innerHTML = data;
        })
        .catch(error => {
            results.innerHTML = '<p>Ошибка при загрузке данных</p>';
            console.error(error);
        });
    });
});

Не забудьте локализовать скрипт в PHP, чтобы передать переменную wpsystem_ajax_object.ajax_url:

function wpsystem_enqueue_scripts() {
    wp_enqueue_script('wpsystem-filter', get_template_directory_uri() . '/js/wpsystem-filter.js', ['jquery'], null, true);
    wp_localize_script('wpsystem-filter', 'wpsystem_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpsystem_enqueue_scripts');

Оптимизация и советы по использованию

Чтобы фильтр работал быстро и эффективно, обратите внимание на следующие моменты:

• Добавьте кеширование результатов AJAX-запросов, если фильтр часто используется.
• Используйте индексы в базе данных для таксономий, если количество записей очень большое.
• При необходимости добавьте пагинацию AJAX с параметрами offset и paged.
• Если у вас сайт с большим трафиком и сложной структурой, рассмотрите использование специализированных плагинов, например, Clearfy Pro, который оптимизирует запросы и улучшает общую производительность сайта.

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