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

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

Почему стоит создавать фильтры постов без плагинов

Использование плагинов для фильтрации контента часто приводит к избыточной нагрузке и конфликтам с другими компонентами сайта. Кроме того, плагины могут добавлять лишний CSS и JavaScript, увеличивая время загрузки страницы. Создавая собственное решение, вы контролируете весь процесс, минимизируете объём кода и адаптируете функционал под конкретные задачи.

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

Общая архитектура решения и план действий

Идея состоит в том, чтобы на странице вывести список постов и рядом — набор фильтров по категориям и меткам (таксономиям). При выборе фильтра страница должна подгружать посты, соответствующие выбранным параметрам, без перезагрузки или с минимальной перезагрузкой с помощью AJAX.

Основные шаги:

• Создать страницу шаблона с выводом фильтров и контейнером для постов.
• Написать WP_Query с параметрами фильтра.
• Реализовать AJAX-обработчик для подгрузки постов по фильтрам.
• Добавить JavaScript для отправки AJAX-запросов и обновления списка.

Шаг 1. Вывод фильтров категорий и меток

Начнём с отображения чекбоксов категорий и меток. Предположим, что у вас есть стандартные категории и метки для записей.

function wpturbo_get_filters_html() {
    $categories = get_categories(array('hide_empty' => true));
    $tags = get_tags(array('hide_empty' => true));
    
    $html = '<div class="wpturbo-filters">';
    
    $html .= '<h3>Фильтр по категориям</h3>';
    foreach ($categories as $cat) {
        $html .= '<label><input type="checkbox" class="wpturbo-filter-category" value="' . esc_attr($cat->term_id) . '"> ' . esc_html($cat->name) . '</label><br>';
    }
    
    $html .= '<h3>Фильтр по меткам</h3>';
    foreach ($tags as $tag) {
        $html .= '<label><input type="checkbox" class="wpturbo-filter-tag" value="' . esc_attr($tag->term_id) . '"> ' . esc_html($tag->name) . '</label><br>';
    }
    
    $html .= '</div>';
    return $html;
}

Этот код выводит два блока с чекбоксами для выбора категорий и меток.

Шаг 2. Вывод списка постов с WP_Query по фильтрам

Теперь создадим функцию, которая принимает массивы выбранных категорий и меток и возвращает HTML с постами.

function wpturbo_get_filtered_posts($category_ids = array(), $tag_ids = array()) {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 10,
        'post_status' => 'publish',
    );

    if (!empty($category_ids)) {
        $args['category__in'] = $category_ids;
    }

    if (!empty($tag_ids)) {
        $args['tag__in'] = $tag_ids;
    }

    $query = new WP_Query($args);
    
    if (!$query->have_posts()) {
        return '<p>Посты не найдены.</p>';
    }

    $html = '<div class="wpturbo-posts-list">';
    while ($query->have_posts()) {
        $query->the_post();
        $html .= '<article class="wpturbo-post-item">';
        $html .= '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
        $html .= '<div>' . get_the_excerpt() . '</div>';
        $html .= '</article>';
    }
    $html .= '</div>';
    wp_reset_postdata();
    return $html;
}

Функция формирует WP_Query с учетом выбранных фильтров и возвращает HTML с результатами.

Шаг 3. AJAX-обработчик на стороне PHP

Для динамической подгрузки постов реализуем AJAX-обработчик.

add_action('wp_ajax_wpturbo_filter_posts', 'wpturbo_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpturbo_filter_posts', 'wpturbo_ajax_filter_posts');

function wpturbo_ajax_filter_posts() {
    $category_ids = isset($_POST['categories']) ? array_map('intval', $_POST['categories']) : array();
    $tag_ids = isset($_POST['tags']) ? array_map('intval', $_POST['tags']) : array();

    $html = wpturbo_get_filtered_posts($category_ids, $tag_ids);

    wp_send_json_success(array('html' => $html));
}

Этот обработчик принимает массивы ID выбранных категорий и тегов, возвращает список постов в формате JSON.

Шаг 4. JavaScript для отправки запросов и обновления контента

Добавим скрипт, который отслеживает изменение чекбоксов и отправляет AJAX-запрос на сервер.

jQuery(document).ready(function($) {
    function wpturboCollectFilters() {
        var categories = [];
        var tags = [];
        $('.wpturbo-filter-category:checked').each(function() {
            categories.push($(this).val());
        });
        $('.wpturbo-filter-tag:checked').each(function() {
            tags.push($(this).val());
        });
        return {categories: categories, tags: tags};
    }

    function wpturboLoadPosts() {
        var filters = wpturboCollectFilters();
        $.ajax({
            url: wpturbo_ajax_object.ajax_url,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'wpturbo_filter_posts',
                categories: filters.categories,
                tags: filters.tags
            },
            beforeSend: function() {
                $('.wpturbo-posts-list').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                if (response.success) {
                    $('.wpturbo-posts-list').html(response.data.html);
                }
            }
        });
    }

    $('.wpturbo-filters input[type=checkbox]').on('change', function() {
        wpturboLoadPosts();
    });

    // Инициализация начальной загрузки
    wpturboLoadPosts();
});

Для работы AJAX необходимо локализовать скрипт из PHP:

function wpturbo_enqueue_scripts() {
    wp_enqueue_script('wpturbo-filter', get_template_directory_uri() . '/js/wpturbo-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('wpturbo-filter', 'wpturbo_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'wpturbo_enqueue_scripts');

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

Чтобы улучшить UX, можно добавить пагинацию, сортировку и индикаторы загрузки. Например, пагинацию можно реализовать с параметрами offset и posts_per_page, передаваемыми через AJAX. Для сортировки добавьте селект с вариантами (по дате, по популярности) и изменяйте параметры WP_Query.

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

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

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

Заключение

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