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

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

Зачем использовать AJAX для фильтрации по авторам

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

Это улучшает UX, ускоряет работу сайта и снижает нагрузку на сервер, так как не загружается весь шаблон заново.

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

Создание формы фильтра по авторам

Начнём с простой формы, которая отобразит список всех авторов сайта в виде выпадающего списка. Для вывода авторов используем функцию wpzoom_get_authors_list(), которую создадим для удобства.

function wpzoom_get_authors_list() {
    $authors = get_users(array(
        'who' => 'authors',
        'has_published_posts' => true
    ));
    $options = '';
    foreach ($authors as $author) {
        $options .= '<option value="' . esc_attr($author->ID) . '">' . esc_html($author->display_name) . '</option>';
    }
    return $options;
}

В файле шаблона, например в archive.php или в нужном месте, вставим форму:

<form id="wpzoom-author-filter">
    <label for="wpzoom-author-select">Выберите автора:</label>
    <select id="wpzoom-author-select" name="author">
        <option value="">Все авторы</option>
        <?php echo wpzoom_get_authors_list(); ?>
    </select>
</form>
<div id="wpzoom-posts-container">
    <?php
    // Здесь по умолчанию выводим записи без фильтра
    $query = new WP_Query(array('posts_per_page' => 10));
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            ?>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <?php
        }
        wp_reset_postdata();
    } else {
        echo '<p>Записей не найдено.</p>';
    }
    ?>
</div>

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

Теперь нужно добавить обработчик AJAX, который будет принимать ID выбранного автора, делать WP_Query и возвращать HTML с постами.

Добавим в файл functions.php или в плагин следующий код:

add_action('wp_ajax_wpzoom_filter_posts_by_author', 'wpzoom_filter_posts_by_author_callback');
add_action('wp_ajax_nopriv_wpzoom_filter_posts_by_author', 'wpzoom_filter_posts_by_author_callback');

function wpzoom_filter_posts_by_author_callback() {
    // Проверяем nonce, если используете (рекомендуется)

    $author_id = isset($_POST['author']) ? intval($_POST['author']) : 0;

    $args = array(
        'posts_per_page' => 10,
        'post_status' => 'publish',
    );

    if ($author_id) {
        $args['author'] = $author_id;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<h3><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h3>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Записей не найдено.</p>';
    }

    wp_die(); // завершение AJAX
}

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

Добавьте в ваш шаблон или отдельный JS-файл следующий скрипт. Не забудьте подключить jQuery (обычно он уже есть в WordPress).

jQuery(document).ready(function($) {
    $('#wpzoom-author-select').on('change', function() {
        var author = $(this).val();

        $.ajax({
            url: wpzoom_ajax_object.ajax_url, // передается через wp_localize_script
            type: 'POST',
            data: {
                action: 'wpzoom_filter_posts_by_author',
                author: author
            },
            beforeSend: function() {
                $('#wpzoom-posts-container').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wpzoom-posts-container').html(response);
            },
            error: function() {
                $('#wpzoom-posts-container').html('<p>Произошла ошибка при загрузке данных.</p>');
            }
        });
    });
});

Чтобы переменная wpzoom_ajax_object.ajax_url была доступна, зарегистрируйте скрипт и передайте параметр из PHP:

function wpzoom_enqueue_scripts() {
    wp_enqueue_script('wpzoom-filter-author', get_template_directory_uri() . '/js/wpzoom-filter-author.js', array('jquery'), null, true);
    wp_localize_script('wpzoom-filter-author', 'wpzoom_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpzoom_enqueue_scripts');

Дополнительные улучшения и рекомендации

Пагинация результатов

Если записей много, имеет смысл добавить пагинацию. Для этого нужно передавать параметр paged через AJAX и в WP_Query, а также выводить ссылки пагинации. Это чуть усложняет логику, но повышает удобство.

Безопасность и проверка nonce

Для защиты от CSRF рекомендуется использовать nonce. Добавьте nonce в форму и передавайте его в AJAX-запросе, проверяйте на сервере функцией check_ajax_referer().

Использование кеширования

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

Поддержка нескольких авторов и дополнительных фильтров

Можно расширить фильтр, добавив возможность выбирать сразу нескольких авторов или комбинировать с другими фильтрами (категории, даты и т.д.). Тогда в AJAX-запросе будет передаваться массив параметров, а на сервере строится более сложный WP_Query.

Пример интеграции с плагином Clearfy Pro для оптимизации

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

Итоги

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

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