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

Что такое динамические фильтры таксономий в WordPress

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

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

В этой статье мы разберём, как реализовать такие фильтры с помощью PHP, JavaScript и AJAX, а также рассмотрим полезные плагины и инструменты для упрощения задачи.

Создание пользовательской таксономии и подготовка данных

Для начала создадим пользовательскую таксономию, например, «Производитель» для постов типа «product». Это позволит нам фильтровать товары по производителю.

function wpin_register_taxonomy_producer() {
    $labels = array(
        'name' => 'Производители',
        'singular_name' => 'Производитель',
        'search_items' => 'Поиск производителей',
        'all_items' => 'Все производители',
        'edit_item' => 'Редактировать производителя',
        'update_item' => 'Обновить производителя',
        'add_new_item' => 'Добавить нового производителя',
        'new_item_name' => 'Новое имя производителя',
        'menu_name' => 'Производители',
    );

    register_taxonomy('producer', 'product', array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'producer'),
    ));
}
add_action('init', 'wpin_register_taxonomy_producer');

После регистрации таксономии добавьте несколько терминов в админке WordPress. Это создаст базу для фильтрации.

Вывод фильтров на фронтенде с подсчётом элементов

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

function wpin_display_producer_filters() {
    $terms = get_terms(array(
        'taxonomy' => 'producer',
        'hide_empty' => true,
    ));

    if (!empty($terms) && !is_wp_error($terms)) {
        echo '<ul class="wpin-producer-filters">';
        foreach ($terms as $term) {
            echo '<li><label><input type="checkbox" name="producer_filter[]" value="' . esc_attr($term->slug) . '"> ' . esc_html($term->name) . ' (' . intval($term->count) . ')</label></li>';
        }
        echo '</ul>';
        echo '<button id="wpin-filter-button">Фильтровать</button>';
    }
}

Добавьте вызов wpin_display_producer_filters() в нужное место шаблона, например, в sidebar или на страницу каталога.

Реализация AJAX-фильтрации записей по выбранным таксономиям

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

Подключение скрипта и локализация

function wpin_enqueue_scripts() {
    wp_enqueue_script('wpin-filter', get_template_directory_uri() . '/js/wpin-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('wpin-filter', 'wpin_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpin_filter_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'wpin_enqueue_scripts');

JavaScript для отправки выбранных фильтров

jQuery(document).ready(function($) {
    $('#wpin-filter-button').on('click', function(e) {
        e.preventDefault();
        var selected = [];
        $('input[name="producer_filter[]"]:checked').each(function() {
            selected.push($(this).val());
        });
        $.ajax({
            url: wpin_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'wpin_filter_products',
                producers: selected,
                nonce: wpin_ajax.nonce
            },
            beforeSend: function() {
                $('#wpin-products-list').html('Загрузка...');
            },
            success: function(response) {
                $('#wpin-products-list').html(response.data);
            },
            error: function() {
                $('#wpin-products-list').html('Ошибка при загрузке данных');
            }
        });
    });
});

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

function wpin_ajax_filter_products() {
    check_ajax_referer('wpin_filter_nonce', 'nonce');

    $producers = isset($_POST['producers']) ? array_map('sanitize_text_field', (array) $_POST['producers']) : array();

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
    );

    if (!empty($producers)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'producer',
                'field' => 'slug',
                'terms' => $producers,
                'operator' => 'IN',
            ),
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        echo '<ul class="wpin-product-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
        wp_reset_postdata();
        $output = ob_get_clean();
    } else {
        $output = '<p>Товары не найдены.</p>';
    }

    wp_send_json_success($output);
}
add_action('wp_ajax_wpin_filter_products', 'wpin_ajax_filter_products');
add_action('wp_ajax_nopriv_wpin_filter_products', 'wpin_ajax_filter_products');

Оптимизация и расширение фильтров

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

Для примера, комбинация таксономий в tax_query позволяет строить сложные запросы:

$args['tax_query'] = array(
    'relation' => 'AND',
    array(
        'taxonomy' => 'producer',
        'field' => 'slug',
        'terms' => $producers,
    ),
    array(
        'taxonomy' => 'color',
        'field' => 'slug',
        'terms' => $colors,
    ),
);

Подобные фильтры улучшают поиск и повышают конверсию сайта.

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

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

• Clearfy Pro — содержит модули для оптимизации сайта и расширенной фильтрации.
• WPCommunity — если у вас форум на WordPress, там тоже есть фильтры по таксономиям.
• ABC Pagination — поможет удобно разбивать результаты фильтрации на страницы.

Выводы и рекомендации по реализации

Создание динамических фильтров для таксономий в WordPress — задача, требующая знания API WordPress, AJAX и JavaScript. Важно соблюдать безопасность (использовать nonce), оптимизировать запросы и обеспечить удобный интерфейс для пользователя.

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