Как создать динамическую пагинацию в WordPress с AJAX

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

Почему стоит использовать AJAX пагинацию в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет обновлять части страницы без полной перезагрузки. Это улучшает скорость работы сайта и делает интерфейс более плавным и отзывчивым. Особенно полезно при большом объеме контента — пользователю не приходится ждать полной загрузки страницы, а данные подгружаются по мере необходимости.

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

В WordPress для реализации AJAX пагинации понадобится написать PHP-функции для обработки AJAX-запросов и JavaScript-код для отправки этих запросов и обновления DOM.

Создание AJAX пагинации: подготовительный этап

Для начала убедимся, что у вас есть собственный файл шаблона, где выводятся записи с пагинацией. В этом примере мы будем работать с циклом WordPress (loop) и кнопкой «Загрузить еще».

Основная идея: при клике на кнопку «Загрузить еще» отправлять AJAX-запрос, получать следующую порцию записей и добавлять их в список без перезагрузки.

Шаг 1. Подключаем скрипты и локализуем ajaxurl

В functions.php вашей темы добавьте следующий код для подключения JavaScript и передачи в него URL для AJAX-запросов:

function wppagenavi_enqueue_scripts() {
    wp_enqueue_script('wppagenavi-ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', array('jquery'), null, true);
    wp_localize_script('wppagenavi-ajax-pagination', 'wppagenavi_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppagenavi_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wppagenavi_enqueue_scripts');

Этот код подключит JavaScript-файл ajax-pagination.js, который мы создадим позже. Также в скрипт передается объект wppagenavi_ajax с адресом AJAX и nonce для защиты запросов.

Шаг 2. Создаем AJAX обработчик в PHP

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

function wppagenavi_load_more_posts() {
    check_ajax_referer('wppagenavi_ajax_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => 5,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" class="post-item">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="excerpt"><?php the_excerpt(); ?></div>
            </article>
            <?php
        }
        wp_reset_postdata();
        $posts_html = ob_get_clean();
        wp_send_json_success(array('html' => $posts_html));
    } else {
        wp_send_json_error('no more posts');
    }
    wp_die();
}
add_action('wp_ajax_wppagenavi_load_more', 'wppagenavi_load_more_posts');
add_action('wp_ajax_nopriv_wppagenavi_load_more', 'wppagenavi_load_more_posts');

Здесь мы создаем WP_Query с учетом номера страницы paged, выводим несколько постов и возвращаем HTML в JS.

Реализация JavaScript для динамической пагинации

Создайте файл js/ajax-pagination.js в вашей теме или плагине и добавьте туда следующий код:

jQuery(document).ready(function($) {
    var page = 2; // следующая страница
    var loading = false;

    $('#load-more-btn').on('click', function(e) {
        e.preventDefault();
        if (loading) return;
        loading = true;

        $.ajax({
            url: wppagenavi_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'wppagenavi_load_more',
                page: page,
                nonce: wppagenavi_ajax.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#posts-container').append(response.data.html);
                    page++;
                    loading = false;
                } else {
                    $('#load-more-btn').hide();
                    loading = false;
                }
            },
            error: function() {
                alert('Ошибка загрузки данных');
                loading = false;
            }
        });
    });
});

Этот скрипт отслеживает клик по кнопке «Загрузить еще», отправляет AJAX-запрос с номером текущей страницы и подгружает новые записи в контейнер #posts-container. При отсутствии новых записей кнопка скрывается.

HTML-разметка для вывода и кнопки пагинации

В вашем шаблоне, например index.php или archive.php, замените стандартный цикл на следующий код:

<div id="posts-container">
<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'paged' => 1,
    'posts_per_page' => 5,
);
$query = new WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post(); ?>
        <article id="post-<?php the_ID(); ?>" class="post-item">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="excerpt"><?php the_excerpt(); ?></div>
        </article>
    <?php }
    wp_reset_postdata();
} else {
    echo '<p>Записей не найдено.</p>';
}
?>
</div>
<button id="load-more-btn">Загрузить еще</button>

Это контейнер для постов и кнопка, при клике на которую будет запускаться AJAX-загрузка.

Настройка и тестирование

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

Если у вас кастомные типы записей или сложные условия выборки – просто скорректируйте параметры WP_Query в вашей функции wppagenavi_load_more_posts.

Такой подход подходит для блогов, магазинов на WooCommerce и любых сайтов с большим объемом контента.

Дополнительные улучшения AJAX пагинации

Индикация загрузки и обработка ошибок

Для улучшения UX добавьте индикатор загрузки, например, спиннер или сообщение «Загрузка...». В JS-коде перед отправкой AJAX включайте индикатор, а по завершении скрывайте.

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

Бесконечная прокрутка вместо кнопки

Можно заменить кнопку «Загрузить еще» на автоматическую загрузку при прокрутке страницы до конца. Для этого используйте событие scroll и проверяйте позицию скролла.

SEO и индексация

Подгруженный контент с помощью AJAX не всегда индексируется поисковиками. Чтобы избежать проблем, рекомендую оставить стандартную пагинацию для поисковиков и пользователей без JavaScript, а AJAX использовать как дополнение.