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

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

Что такое динамическая пагинация и зачем она нужна

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

Основные преимущества динамической пагинации в WordPress:

Автоматическое обновление количества страниц при изменении контента;
Работа с кастомными типами записей и таксономиями;
Поддержка AJAX для загрузки страниц без перезагрузки;
Удобство для пользователей и SEO-оптимизация.

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

Использование функции `paginate_links` для динамической пагинации

WordPress предоставляет встроенную функцию paginate_links(), которая генерирует ссылки пагинации с учётом текущих параметров.

Для начала убедитесь, что в вашем шаблоне архива или главной страницы вы используете правильный WP_Query или главную петлю WordPress. Пример базовой реализации пагинации:

function wp_theme_paginate() {
    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' => '« Назад',
        'next_text' => 'Вперед »'
    ) );

    if( is_array( $pages ) ) {
        echo '<nav class="wp-theme-pagination"><ul>';
        foreach ( $pages as $page ) {
            echo '<li>' . $page . '</li>';
        }
        echo '</ul></nav>';
    }
}

Вызовите функцию wp_theme_paginate() в нужном месте шаблона, например, после цикла:

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // вывод записи
    endwhile;
    wp_theme_paginate();
endif;

Этот код автоматически сгенерирует ссылки пагинации с текущими параметрами запроса.

Динамическая пагинация для кастомных запросов WP_Query

Если вы используете кастомный запрос через WP_Query, нужно передать объект запроса в функцию пагинации, чтобы она правильно подсчитала количество страниц и текущую страницу.

Пример:

function wp_theme_paginate_custom( $custom_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'     => $custom_query->max_num_pages,
        'type'      => 'array',
        'prev_text' => '« Назад',
        'next_text' => 'Вперед »'
    ) );

    if( is_array( $pages ) ) {
        echo '<nav class="wp-theme-pagination"><ul>';
        foreach ( $pages as $page ) {
            echo '<li>' . $page . '</li>';
        }
        echo '</ul></nav>';
    }
}

$args = array(
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => get_query_var('paged') ? get_query_var('paged') : 1
);
$custom_query = new WP_Query( $args );

if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // вывод записи
    endwhile;
    wp_theme_paginate_custom( $custom_query );
endif;
wp_reset_postdata();

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

Добавление AJAX пагинации в тему WordPress

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

Основные шаги:

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

Пример JavaScript для AJAX пагинации

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

PHP обработчик AJAX в functions.php

Поскольку пагинация на WordPress уже обрабатывается стандартными URL, достаточно чтобы AJAX-запросы возвращали нужный HTML. В примере выше мы просто загружаем страницу с нужным номером и вытаскиваем из неё блок с записями и пагинацией. Если нужно более сложное API, можно добавить обработчики через add_action('wp_ajax_...') и add_action('wp_ajax_nopriv_...').

Оптимизация и SEO для пагинации в теме

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

Используйте правильные URL с параметрами ?paged= или человекочитаемыми ссылками;
Добавляйте теги rel="prev" и rel="next" в заголовок страницы, чтобы поисковики понимали связь страниц;
Избегайте дублированного контента, например, с помощью canonical-ссылок;
Оптимизируйте скорость загрузки страниц с пагинацией, минимизируя запросы и кешируя результаты.

Для добавления rel-ссылок можно добавить в functions.php следующий код:

function wp_theme_add_rel_links() {
    if ( is_paged() ) {
        $paged = get_query_var('paged');
        $max_pages = $GLOBALS['wp_query']->max_num_pages;

        if ( $paged > 1 ) {
            echo '<link rel="prev" href="' . get_pagenum_link( $paged - 1 ) . '" />';
        }
        if ( $paged < $max_pages ) {
            echo '<link rel="next" href="' . get_pagenum_link( $paged + 1 ) . '" />';
        }
    }
}
add_action( 'wp_head', 'wp_theme_add_rel_links' );