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

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

Зачем нужна динамическая пагинация с AJAX

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

Рассмотрим, как реализовать такую пагинацию самостоятельно, используя стандартные хуки WordPress и минимальное количество кода.

Создание функции вывода записей и пагинации

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

function wpdesk_get_posts_pagination($paged = 1) {
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $paged,
    ];
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        echo '<div id="wpdesk-posts-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<article class="post-item">';
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<div>' . get_the_excerpt() . '</div>';
            echo '</article>';
        }
        echo '</div>';
        
        // Пагинация
        $big = 999999999; // уникальное число для замены
        $pagination = paginate_links([
            'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
            'format' => '?paged=%#%',
            'current' => max(1, $paged),
            'total' => $query->max_num_pages,
            'type' => 'array',
            'prev_text' => '« Назад',
            'next_text' => 'Вперед »',
        ]);
        if (!empty($pagination)) {
            echo '<nav class="wpdesk-pagination"><ul>';
            foreach ($pagination as $page_link) {
                echo '<li>' . $page_link . '</li>';
            }
            echo '</ul></nav>';
        }
    } else {
        echo '<p>Записей не найдено.</p>';
    }
    wp_reset_postdata();
}

Эта функция принимает номер страницы $paged и выводит 5 постов с пагинацией. Пагинация формируется в виде массива ссылок для удобного дальнейшего оформления.

Добавление AJAX-поддержки пагинации

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

JavaScript для обработки кликов

Создадим JS-скрипт, который будет перехватывать клики по ссылкам пагинации и отправлять AJAX-запрос:

jQuery(document).ready(function($) {
    $(document).on('click', '.wpdesk-pagination a', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        var paged = href.match(/paged=(\d+)/);
        paged = paged ? paged[1] : 1;

        $.ajax({
            url: wpdesk_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpdesk_load_posts',
                paged: paged
            },
            beforeSend: function() {
                $('.wpdesk-pagination').append('<span class="loading">Загрузка...</span>');
            },
            success: function(response) {
                $('#wpdesk-posts-list').html(response.posts_html);
                $('.wpdesk-pagination').html(response.pagination_html);
            },
            complete: function() {
                $('.loading').remove();
            }
        });
    });
});

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

PHP-обработчик AJAX-запроса

Добавим в functions.php или плагин обработчик AJAX, который вернет HTML с записями и пагинацией:

add_action('wp_ajax_wpdesk_load_posts', 'wpdesk_ajax_load_posts');
add_action('wp_ajax_nopriv_wpdesk_load_posts', 'wpdesk_ajax_load_posts');

function wpdesk_ajax_load_posts() {
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    ob_start();
    wpdesk_get_posts_pagination($paged);
    $content = ob_get_clean();

    // Разделим пагинацию и записи
    preg_match('/<div id="wpdesk-posts-list">(.*?)<\/div>/s', $content, $posts_match);
    preg_match('/<nav class="wpdesk-pagination">(.*?)<\/nav>/s', $content, $pagination_match);

    wp_send_json_success([
        'posts_html' => $posts_match[0] ?? '',
        'pagination_html' => $pagination_match[0] ?? '',
    ]);
}

Этот обработчик получает номер страницы из POST-запроса, генерирует HTML и возвращает JSON с двумя блоками: списком постов и навигацией.

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

Чтобы JavaScript знал URL для AJAX, пропишем подключение скрипта и локализацию:

function wpdesk_enqueue_scripts() {
    wp_enqueue_script('wpdesk-ajax-pagination', get_template_directory_uri() . '/js/wpdesk-ajax-pagination.js', ['jquery'], null, true);
    wp_localize_script('wpdesk-ajax-pagination', 'wpdesk_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpdesk_enqueue_scripts');

Особенности и улучшения

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

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

Если вы используете кастомные типы записей или таксономии, передавайте их параметры в AJAX запрос и учитывайте в WP_Query.

Выводы и рекомендации

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

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