Как создать простой пагинационный класс в WordPress с поддержкой AJAX

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

Почему стоит создавать собственный пагинационный класс в WordPress

Стандартные функции, такие как paginate_links() или the_posts_pagination(), удобны, но не всегда отвечают требованиям кастомных решений. Например, если нужно:

• Создать пагинацию с нетипичной версткой и стилями.
• Поддерживать AJAX-запросы для загрузки новых данных без перезагрузки страницы.
• Управлять пагинацией для нестандартных типов записей или сложных запросов WP_Query.
• Интегрировать пагинацию с дополнительными параметрами фильтров и поиска.

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

Основные требования к пагинационному классу для WordPress

При реализации класса пагинации нужно учесть:

• Корректное формирование ссылок с учетом текущей страницы и общего количества.
• Поддержка AJAX-запросов с возвратом JSON-ответа.
• Гибкая настройка количества выводимых ссылок (например, число страниц вокруг текущей).
• Обработка граничных случаев — первая/последняя страница.
• Возможность использовать класс с разными WP_Query.

Все это обеспечит удобство и масштабируемость решения.

Пример простого пагинационного класса в WordPress

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

class Wponline_Pagination {
    private $total_pages;
    private $current_page;
    private $base_url;
    private $range;

    public function __construct($total_pages, $current_page = 1, $base_url = '', $range = 2) {
        $this->total_pages = $total_pages;
        $this->current_page = max(1, $current_page);
        $this->base_url = $base_url ? rtrim($base_url, '/') : '';
        $this->range = $range;
    }

    public function get_pagination_links() {
        if ($this->total_pages <= 1) return '';

        $links = [];

        // Предыдущая страница
        if ($this->current_page > 1) {
            $links[] = $this->create_link($this->current_page - 1, '« Предыдущая');
        }

        // Основные ссылки
        for ($i = 1; $i <= $this->total_pages; $i++) {
            if ($i == 1 || $i == $this->total_pages || ($i >= $this->current_page - $this->range && $i <= $this->current_page + $this->range)) {
                if ($i == $this->current_page) {
                    $links[] = '<span class="current">' . $i . '</span>';
                } else {
                    $links[] = $this->create_link($i);
                }
            } elseif (end($links) !== '...') {
                $links[] = '...';
            }
        }

        // Следующая страница
        if ($this->current_page < $this->total_pages) {
            $links[] = $this->create_link($this->current_page + 1, 'Следующая »');
        }

        return '<nav class="wponline-pagination">' . implode(' ', $links) . '</nav>';
    }

    private function create_link($page, $text = '') {
        $text = $text ?: $page;
        $url = $this->base_url . '?paged=' . $page;
        return '<a href="' . esc_url($url) . '">' . esc_html($text) . '</a>';
    }
}

Этот класс принимает общее количество страниц, текущую страницу, базовый URL и количество страниц вокруг текущей, которые нужно отображать. Метод get_pagination_links() возвращает готовый HTML с пагинацией.

Интеграция пагинации с AJAX-загрузкой

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

JavaScript для обработки кликов и загрузки данных

Пример простого скрипта на jQuery, который перехватывает клики по ссылкам пагинации, отправляет AJAX-запрос и обновляет контент:

jQuery(document).ready(function($) {
    $('.wponline-pagination').on('click', 'a', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                // Предполагаем, что сервер возвращает HTML с новым списком и пагинацией
                $('#content-list').html($(data).find('#content-list').html());
                $('.wponline-pagination').html($(data).find('.wponline-pagination').html());
            },
            error: function() {
                alert('Ошибка загрузки данных');
            }
        });
    });
});

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

В шаблоне или плагине нужно обрабатывать параметр paged и выводить нужный результат:

function wponline_render_ajax_content() {
    $paged = isset($_GET['paged']) ? intval($_GET['paged']) : 1;
    $posts_per_page = 5;

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
    ];

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<div id="content-list">';
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/content', get_post_format());
        }
        echo '</div>';

        $pagination = new Wponline_Pagination($query->max_num_pages, $paged, get_pagenum_link(1));
        echo $pagination->get_pagination_links();
    }
    wp_reset_postdata();
    wp_die();
}

Для полноценной работы нужно подключить AJAX в WordPress через admin-ajax.php или использовать URL с параметрами, как в нашем примере, чтобы возвращать часть страницы.

Советы по улучшению и расширению пагинационного класса

Чтобы сделать пагинацию удобнее и функциональнее, можно:

• Добавить поддержку ЧПУ (человекопонятных URL) вместо параметров ?paged=.
• Расширить класс для работы с фильтрами и сортировкой.
• Добавить aria-атрибуты для улучшения доступности.
• Использовать нативные REST API WordPress для получения данных и интеграции с фронтендом на Vue или React.
• Интегрировать с плагинами кеширования и оптимизации, например Clearfy Pro (подробнее).

Заключение

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