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

Автор: Юлия Соколова | Опубликовано: 26.01.2026

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

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

Основой для создания кастомного списка статей служит класс WP_Query. Он позволяет гибко настраивать выборку записей по любым параметрам — категориям, таксономиям, мета-полям, дате и другим.

Например, чтобы вывести список статей из категории «Технологии» с 5 записей на странице, можно использовать такой код:

function wpexpert_get_filtered_posts($args = []) {
    $default_args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'category_name' => 'technologies',
    ];
    $query_args = array_merge($default_args, $args);
    $query = new WP_Query($query_args);
    
    if ($query->have_posts()) {
        echo '<ul class="wpexpert-post-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Статьи не найдены.</p>';
    }
    wp_reset_postdata();
}

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

Добавление AJAX для динамической фильтрации

Чтобы пользователи могли менять фильтры и видеть обновлённый список сразу, используем AJAX на стороне WordPress. Для этого создадим обработчик AJAX-запроса, который будет принимать параметры фильтрации, запускать WP_Query с нужными аргументами и возвращать HTML списка.

Регистрация AJAX обработчиков

Добавьте в functions.php следующий код:

add_action('wp_ajax_wpexpert_filter_posts', 'wpexpert_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpexpert_filter_posts', 'wpexpert_ajax_filter_posts');

function wpexpert_ajax_filter_posts() {
    $category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
    $posts_per_page = isset($_POST['posts_per_page']) ? intval($_POST['posts_per_page']) : 5;

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
    ];

    if (!empty($category)) {
        $args['category_name'] = $category;
    }

    ob_start();
    wpexpert_get_filtered_posts($args);
    $html = ob_get_clean();

    wp_send_json_success(['html' => $html]);
    wp_die();
}

Этот обработчик принимает POST-параметры и возвращает HTML списка статей.

JavaScript для отправки запросов и обновления страницы

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

jQuery(document).ready(function($) {
    $('.wpexpert-filter-select').on('change', function() {
        var category = $('#wpexpert-category-filter').val();
        var postsPerPage = $('#wpexpert-posts-per-page').val();

        $.ajax({
            url: wpexpert_ajax_object.ajax_url,
            method: 'POST',
            data: {
                action: 'wpexpert_filter_posts',
                category: category,
                posts_per_page: postsPerPage
            },
            success: function(response) {
                if (response.success) {
                    $('.wpexpert-post-list-container').html(response.data.html);
                }
            },
            error: function() {
                alert('Ошибка при загрузке статей');
            }
        });
    });
});

Не забудьте локализовать скрипт в PHP, чтобы передать адрес AJAX:

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

Формы фильтра и дополнительные параметры

Для удобства пользователей добавим выпадающие списки для выбора категории и количества выводимых записей:

<div class="wpexpert-filters">
    <select id="wpexpert-category-filter" class="wpexpert-filter-select">
        <option value="">Все категории</option>
        <option value="technologies">Технологии</option>
        <option value="news">Новости</option>
        <option value="reviews">Обзоры</option>
    </select>
    
    <select id="wpexpert-posts-per-page" class="wpexpert-filter-select">
        <option value="5">5 записей</option>
        <option value="10">10 записей</option>
        <option value="20">20 записей</option>
    </select>
</div>
<div class="wpexpert-post-list-container">
    <!-- Сюда подгружается список -->
</div>

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

Фильтрация по пользовательским полям и мета-данным

Если у вас есть статьи с дополнительными мета-полями, например, рейтингом, датой события или уровнем сложности, можно добавить их в фильтр. WP_Query поддерживает параметр meta_query.

Пример выборки статей с рейтингом 4 и выше:

$args = [
    'post_type' => 'post',
    'meta_query' => [
        [
            'key' => 'wpexpert_rating',
            'value' => 4,
            'type' => 'NUMERIC',
            'compare' => '>='
        ]
    ]
];
$query = new WP_Query($args);

Можно расширить AJAX-обработчик и форму фильтров, чтобы принимать и передавать эти параметры.

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

При больших объемах контента динамическая фильтрация может нагрузить сервер. Рекомендуется использовать кеширование результатов запросов — например, через Transients API или внешние кеш-плагины.

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