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

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

Что такое таксономии в WordPress и зачем их фильтровать

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

Для примера возьмём пользовательскую таксономию genre для постов с типом book. Мы создадим фильтр, который будет подгружать книги по выбранному жанру без перезагрузки страницы.

Создание пользовательской таксономии "genre"

Если у вас ещё нет таксономии, её нужно зарегистрировать. Добавьте следующий код в файл functions.php вашей темы или в плагин:

function wordpresses_register_taxonomy_genre() {
    register_taxonomy('genre', 'book', [
        'label' => 'Жанры',
        'rewrite' => ['slug' => 'genre'],
        'hierarchical' => true,
        'show_ui' => true,
        'show_in_rest' => true,
    ]);
}
add_action('init', 'wordpresses_register_taxonomy_genre');

Этот код создаёт иерархическую таксономию для типа записей book. Если у вас нет кастомного типа book, его тоже нужно зарегистрировать.

Регистрация кастомного типа записи "book"

function wordpresses_register_post_type_book() {
    register_post_type('book', [
        'labels' => [
            'name' => 'Книги',
            'singular_name' => 'Книга',
        ],
        'public' => true,
        'has_archive' => true,
        'rewrite' => ['slug' => 'books'],
        'supports' => ['title', 'editor', 'thumbnail'],
        'show_in_rest' => true,
    ]);
}
add_action('init', 'wordpresses_register_post_type_book');

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

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

Вывод фильтра по жанрам

Сначала выведем список жанров для выбора:

$genres = get_terms(['taxonomy' => 'genre', 'hide_empty' => true]);
echo '<select id="wordpresses-genre-filter">';
echo '<option value="">Все жанры</option>';
foreach ($genres as $genre) {
    echo '<option value="' . esc_attr($genre->slug) . '">' . esc_html($genre->name) . '</option>';
}
echo '</select>';

HTML для списка постов

Создайте контейнер для вывода постов:

<div id="wordpresses-posts-container"></div>

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

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

function wordpresses_enqueue_scripts() {
    wp_enqueue_script('wordpresses-filter', get_template_directory_uri() . '/js/wordpresses-filter.js', ['jquery'], null, true);
    wp_localize_script('wordpresses-filter', 'wordpresses_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wordpresses_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wordpresses_enqueue_scripts');

Создайте файл js/wordpresses-filter.js с таким содержимым:

jQuery(document).ready(function($) {
    $('#wordpresses-genre-filter').on('change', function() {
        var genre = $(this).val();
        $.ajax({
            url: wordpresses_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wordpresses_filter_books',
                genre: genre,
                nonce: wordpresses_ajax_obj.nonce
            },
            success: function(response) {
                $('#wordpresses-posts-container').html(response);
            },
            error: function() {
                $('#wordpresses-posts-container').html('<p>Произошла ошибка при загрузке данных.</p>');
            }
        });
    });

    // Триггерим загрузку при первой загрузке страницы
    $('#wordpresses-genre-filter').trigger('change');
});

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

Добавим обработчик в functions.php, который будет возвращать список книг в зависимости от выбранного жанра:

function wordpresses_ajax_filter_books() {
    check_ajax_referer('wordpresses_nonce', 'nonce');

    $genre = isset($_POST['genre']) ? sanitize_text_field($_POST['genre']) : '';

    $args = [
        'post_type' => 'book',
        'posts_per_page' => 10,
    ];

    if ($genre) {
        $args['tax_query'] = [
            [
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => $genre,
            ],
        ];
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<ul>';
        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();

    wp_die();
}
add_action('wp_ajax_wordpresses_filter_books', 'wordpresses_ajax_filter_books');
add_action('wp_ajax_nopriv_wordpresses_filter_books', 'wordpresses_ajax_filter_books');

Использование плагина ABC Pagination для постраничной навигации

Если у вас много записей, имеет смысл добавить постраничную навигацию. Плагин ABC Pagination отлично справляется с этой задачей. Он позволяет легко добавить пагинацию в AJAX-запросы.

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

Преимущества такого подхода

• Пользователь видит список записей, отфильтрованных по нужной таксономии без перезагрузки страницы;
• Уменьшается нагрузка на сервер и база данных, так как запрашиваются только нужные записи;
• Можно масштабировать функционал, добавляя сортировку, дополнительные фильтры и пагинацию;
• Поддерживается SEO благодаря использованию REST API и правильной разметке.

Заключение по реализации динамического фильтра

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

Для расширения функционала советуем ознакомиться с плагином Clearfy Pro, который оптимизирует работу сайта и улучшает взаимодействие с WP REST API, что важно для сложных AJAX-решений.