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

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

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

Стандартные метки (tags) и категории в WordPress хорошо подходят для классификации контента, но в ряде случаев требуется более гибкая и специфичная система фильтрации. Например, если у вас сайт с обзорами техники, вы можете добавить метки, связанные с характеристиками устройств, такими как «водонепроницаемый», «беспроводной», «с поддержкой 5G» и т.д.

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

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

Первым шагом создадим собственную таксономию, которая будет работать как пользовательские метки. Используем хук init и функцию register_taxonomy. Ниже пример кода с префиксом wplancer, чтобы избежать конфликтов:

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

    $args = array(
        'labels' => $labels,
        'hierarchical' => false, // как метки
        'public' => true,
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => array('slug' => 'custom-tag'),
    );

    register_taxonomy('custom_tag', 'post', $args);
}
add_action('init', 'wplancer_register_custom_tags');

После добавления этого кода в functions.php темы или в собственный плагин, в админке появится новый раздел для управления пользовательскими метками.

Создание интерфейса динамического фильтра на фронтенде

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

Получим все термины таксономии custom_tag и выведем их в форме:

function wplancer_custom_tags_filter_form() {
    $terms = get_terms(array(
        'taxonomy' => 'custom_tag',
        'hide_empty' => false,
    ));

    if(empty($terms) || is_wp_error($terms)) {
        return;
    }

    // Получаем выбранные метки из GET-запроса
    $selected_tags = isset($_GET['custom_tag']) ? (array)$_GET['custom_tag'] : array();

    echo '<form method="GET" id="custom-tags-filter">';
    foreach($terms as $term) {
        $checked = in_array($term->slug, $selected_tags) ? 'checked' : '';
        echo '<p><label><input type="checkbox" name="custom_tag[]" value="' . esc_attr($term->slug) . '" ' . $checked . ' /> ' . esc_html($term->name) . '</label></p>';
    }
    echo '<p><button type="submit">Фильтровать</button></p>';
    echo '</form>';
}

Добавьте вызов этой функции в нужное место шаблона, например, в sidebar.php или на странице архива.

Запрос записей с условием по пользовательским меткам

Теперь нужно изменить основной запрос WordPress, чтобы он фильтровал записи по выбранным меткам. Сделаем это через хук pre_get_posts:

function wplancer_filter_posts_by_custom_tags($query) {
    if(is_admin() || !$query->is_main_query()) {
        return;
    }

    if(isset($_GET['custom_tag']) && is_array($_GET['custom_tag']) && count($_GET['custom_tag']) > 0) {
        $tax_query = array(
            'relation' => 'AND',
        );

        foreach($_GET['custom_tag'] as $tag_slug) {
            $tax_query[] = array(
                'taxonomy' => 'custom_tag',
                'field' => 'slug',
                'terms' => $tag_slug,
                'operator' => 'IN',
            );
        }

        $query->set('tax_query', $tax_query);
    }
}
add_action('pre_get_posts', 'wplancer_filter_posts_by_custom_tags');

Обратите внимание, что мы строим массив tax_query с оператором AND, чтобы записи обязательно имели все выбранные метки.

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

Реализация фильтра своими силами — отличный способ гибко настроить функционал. Но если нужна более сложная фильтрация с ajax, улучшенным интерфейсом и поддержкой других таксономий, можно рассмотреть плагины:

• FacetWP — мощный плагин фильтрации с ajax, поддерживает кастомные таксономии и метаполя.
• WPGPT Search & Filter (https://wpshop.ru/plugins/wpgpt/?utm_source=wplancer.ru&utm_medium=article&utm_campaign=kak-sozdat-dinamicheskij-filtr-po-polzovatelskim-metkikam-v-wordpress) — плагин, который позволяет создавать умные фильтры и поисковые формы, интегрируется с WP REST API.
• Search & Filter Pro — полнофункциональный плагин для фильтрации с поддержкой кастомных типов записей и таксономий.

Если хотите добавить ajax-фильтрацию самостоятельно, можно использовать wp_localize_script для передачи параметров и реализовать обработку через admin-ajax.php. Но это тема для отдельной статьи.

Подводим итоги и рекомендации

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

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

Для удобства пользователей продумайте UI: например, добавьте кнопку «Сбросить фильтр», показывайте количество записей рядом с каждой меткой и используйте AJAX для обновления результатов без перезагрузки страницы.

Подробно изучить работу с пользовательскими таксономиями и фильтрами можно в официальной документации WordPress, а также на https://wpshop.ru/ с UTM-метками для получения дополнительных плагинов и тем (https://wpshop.ru/?utm_source=wplancer.ru&utm_medium=article&utm_campaign=kak-sozdat-dinamicheskij-filtr-po-polzovatelskim-metkikam-v-wordpress).