Как создать уникальный фильтрованный список постов в WordPress

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

Фильтрованный список постов — это отличный способ улучшить взаимодействие пользователей с вашим сайтом, позволяя быстро находить нужный контент по категориям, тегам, мета-полям или другим параметрам. Особенно актуально для новостных порталов, блогов с большим количеством записей и магазинов на базе WooCommerce.

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

Также рассмотрим, какие плагины могут помочь с расширением функционала фильтрации.

Использование WP_Query для создания кастомного запроса

Первым шагом всегда будет формирование правильного запроса к базе данных WordPress для получения нужных постов. Рассмотрим пример, в котором мы фильтруем записи по двум параметрам: категории и пользовательскому полю (мета-ключу).

function wpall_get_filtered_posts($category_id = 0, $meta_key = '', $meta_value = '') {
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 10,
        'category__in' => $category_id ? [$category_id] : [],
    ];
    if ($meta_key && $meta_value) {
        $args['meta_query'] = [
            [
                'key' => $meta_key,
                'value' => $meta_value,
                'compare' => '=',
            ],
        ];
    }
    $query = new WP_Query($args);
    return $query->posts;
}

В этом коде функция wpall_get_filtered_posts принимает ID категории и мета-данные для фильтрации. Возвращается массив объектов постов.

Пояснение параметров WP_Query

• post_type — тип записей, например, 'post' или 'product';
• posts_per_page — количество выводимых записей;
• category__in — массив ID категорий для фильтра;
• meta_query — массив условий для фильтрации по мета-данным.

Важно учитывать, что параметры можно комбинировать для более точной выборки.

Динамическая фильтрация с помощью AJAX

Чтобы фильтр обновлялся без перезагрузки страницы, нам нужна реализация AJAX-запроса. Рассмотрим пример, как это сделать в WordPress.

Шаг 1: JavaScript для отправки запроса

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

jQuery(document).ready(function($) {
    $('#wpall-filter-form').on('change', 'select, input', function() {
        var data = {
            action: 'wpall_filter_posts',
            category: $('#wpall-category').val(),
            meta_key: $('#wpall-meta-key').val(),
            meta_value: $('#wpall-meta-value').val(),
        };
        $.post(wpall_ajax_object.ajax_url, data, function(response) {
            $('#wpall-post-list').html(response);
        });
    });
});

Шаг 2: PHP обработчик AJAX-запроса

Зарегистрируем AJAX-обработчик в functions.php или в вашем плагине, который вызовет функцию фильтрации и вернёт HTML с результатами.

add_action('wp_ajax_wpall_filter_posts', 'wpall_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpall_filter_posts', 'wpall_ajax_filter_posts');

function wpall_ajax_filter_posts() {
    $category = intval($_POST['category']);
    $meta_key = sanitize_text_field($_POST['meta_key']);
    $meta_value = sanitize_text_field($_POST['meta_value']);

    $posts = wpall_get_filtered_posts($category, $meta_key, $meta_value);

    if (!empty($posts)) {
        foreach ($posts as $post) {
            setup_postdata($post);
            echo '<div class="wpall-post-item">';
            echo '<h3><a href="' . get_permalink($post) . '">' . esc_html(get_the_title($post)) . '</a></h3>';
            echo '<p>' . esc_html(get_the_excerpt($post)) . '</p>';
            echo '</div>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Посты не найдены по заданным параметрам.</p>';
    }
    wp_die();
}

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

Чтобы работал AJAX, нужно подключить JS и передать URL админ-ajax.php:

function wpall_enqueue_scripts() {
    wp_enqueue_script('wpall-filter', get_template_directory_uri() . '/js/wpall-filter.js', ['jquery'], false, true);
    wp_localize_script('wpall-filter', 'wpall_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpall_enqueue_scripts');

Пример HTML формы для фильтрации

Вот минимальная форма с селектами и полями для ввода, которая будет отправлять данные для фильтрации:

<form id="wpall-filter-form">
    <label for="wpall-category">Категория:</label>
    <select id="wpall-category" name="category">
        <option value="0">Все</option>
        <option value="1">Новости</option>
        <option value="2">Обзоры</option>
    </select>
    <label for="wpall-meta-key">Мета-ключ:</label>
    <input type="text" id="wpall-meta-key" name="meta_key" />
    <label for="wpall-meta-value">Мета-значение:</label>
    <input type="text" id="wpall-meta-value" name="meta_value" />
</form>

<div id="wpall-post-list">
    <!-- Здесь появятся посты -->
</div>

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

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

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

• FacetWP — мощный плагин с поддержкой AJAX, позволяет создавать сложные фильтры по таксономиям и пользовательским полям.
• Filter Everything — бесплатный и удобный плагин для создания фильтров по типам записей, мета-данным и таксономиям.
• Search & Filter — легкий плагин для создания форм поиска и фильтрации с множеством настроек.

Однако при использовании плагинов стоит учитывать нагрузку на сайт и совместимость с вашей темой и другими расширениями.

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

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

При необходимости расширьте функционал, добавив пагинацию, сортировку, кэширование результатов и обработку ошибок.

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