Как использовать WP Pagination для улучшения навигации на сайте WordPress

Автор: Вадим Ершов | Опубликовано: 16.02.2026

Навигация по страницам с большим количеством записей — ключевой элемент удобства пользователя на сайте WordPress. Часто стандартные возможности пагинации не удовлетворяют требованиям по дизайну или функциональности. В этой статье мы подробно разберём, как использовать WP Pagination для создания удобной и кастомной навигации, а также рассмотрим практические примеры с кодом и полезные плагины.

Что такое WP Pagination и почему она важна

Пагинация (pagination) — это процесс разбивки большого списка записей (постов, товаров, комментариев) на страницы. В WordPress есть встроенные функции для пагинации, например paginate_links() и the_posts_pagination(), но их стандартный вывод часто требует доработки под дизайн и UX сайта.

Правильно настроенная пагинация помогает:

Улучшить скорость загрузки страниц, ограничив количество выводимых элементов
Повысить удобство навигации для пользователей
Снизить нагрузку на сервер при выводе большого объёма данных

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

Использование стандартных функций WordPress для пагинации

Для начала рассмотрим базовый пример использования функции the_posts_pagination(). Она выводит пагинацию с номерами страниц и кнопками «Следующая» и «Предыдущая».

function wpupgrade_custom_pagination() {
    the_posts_pagination(
        array(
            'mid_size'  => 2,
            'prev_text' => __('« Назад', 'wpupgrade'),
            'next_text' => __('Вперёд »', 'wpupgrade'),
            'screen_reader_text' => ' ',
        )
    );
}

Добавьте эту функцию в файл functions.php вашей темы и вызовите wpupgrade_custom_pagination() в нужном шаблоне, например в archive.php или index.php.

Параметр mid_size задаёт количество страниц, отображаемых слева и справа от текущей. Можно настроить тексты кнопок и скрыть текст для скринридеров.

Кастомизация вывода пагинации через фильтры

Для изменения HTML разметки пагинации можно использовать фильтр paginate_links. Например, чтобы добавить CSS-классы к ссылкам:

add_filter('paginate_links', 'wpupgrade_add_class_to_pagination_links');
function wpupgrade_add_class_to_pagination_links($link) {
    return str_replace('<a', '<a class="wpupgrade-pagination-link"', $link);
}

Это позволит вам стилизовать ссылки пагинации через CSS по классу wpupgrade-pagination-link.

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

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

Основные возможности ABC Pagination:

Стилизация через шаблоны и CSS
Поддержка числовой и классической пагинации
Встроенная поддержка AJAX для подгрузки контента без перезагрузки страницы
Гибкие настройки отображения

После установки и активации плагина вы можете вставлять пагинацию с помощью шорткода или PHP-функций, например:

if (function_exists('abc_pagination')) {
    abc_pagination();
}

Пример интеграции ABC Pagination с кастомным WP_Query

Часто пагинация нужна для кастомных запросов. Вот пример, как это реализовать:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
        the_title('<h2>', '</h2>');
        the_excerpt();
    endwhile;
    
    if (function_exists('abc_pagination')) {
        abc_pagination(array('query' => $query));
    }
    
    wp_reset_postdata();
endif;

Обратите внимание, что передаём объект $query в функцию пагинации, чтобы она знала об общем количестве страниц.

Реализация собственной функции пагинации с поддержкой SEO

Иногда необходимо создать свою функцию пагинации, чтобы полностью контролировать HTML и SEO-аспекты, например добавлять rel="nofollow" или schema.org разметку.

Пример функции пагинации с поддержкой schema.org:

function wpupgrade_custom_seo_pagination() {
    global $wp_query;
    $big = 999999999; // уникальное число для замены

    $pages = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'type'  => 'array',
        'prev_text' => __('« Назад', 'wpupgrade'),
        'next_text' => __('Вперёд »', 'wpupgrade'),
    ));

    if (is_array($pages)) {
        echo '<nav class="wpupgrade-pagination" role="navigation" aria-label="Пагинация" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul>';
        foreach ($pages as $page) {
            // Добавляем rel="nofollow" к ссылкам, кроме активной
            if (strpos($page, 'current') === false) {
                $page = str_replace('<a ', '<a rel="nofollow" ', $page);
            }
            echo '<li>' . $page . '</li>';
        }
        echo '</ul></nav>';
    }
}

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

Работа с AJAX пагинацией для динамической подгрузки контента

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

Пример простой AJAX пагинации:

Добавьте в JavaScript обработчик кликов по ссылкам пагинации, который будет отправлять AJAX-запрос на сервер.
На сервере создайте обработчик, который вернёт HTML с необходимыми постами.
Обновите содержимое списка постов на странице без перезагрузки.

Пример JS (jQuery):

jQuery(document).on('click', '.wpupgrade-pagination a', function(e) {
    e.preventDefault();
    var href = jQuery(this).attr('href');
    jQuery.ajax({
        url: href,
        type: 'GET',
        success: function(data) {
            var newContent = jQuery(data).find('.posts-list').html();
            jQuery('.posts-list').html(newContent);
            // Обновляем пагинацию
            var newPagination = jQuery(data).find('.wpupgrade-pagination').html();
            jQuery('.wpupgrade-pagination').html(newPagination);
        }
    });
});

В шаблоне оборачивайте список постов в контейнер с классом posts-list, чтобы JS мог корректно обновлять содержимое.

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

Для улучшения навигации на сайте WordPress пагинация — обязательный элемент, требующий кастомизации и оптимизации. Используйте встроенные функции для базовой пагинации и фильтры для её доработки. Если нужна расширенная функциональность — подключайте плагин ABC Pagination, который значительно ускорит разработку и улучшит UX.

Для проектов с высокой посещаемостью и большим объёмом записей стоит рассмотреть реализацию AJAX пагинации, чтобы ускорить загрузку страниц и снизить нагрузку на сервер.

И не забывайте про SEO-аспекты пагинации: правильные rel-атрибуты, схема разметки и валидный HTML улучшат ранжирование и обеспечат удобство для пользователей.