Как установить и настроить WP-PageNavi для пагинации в WordPress

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

Что такое WP-PageNavi и почему его стоит использовать

По умолчанию WordPress предлагает базовую пагинацию с кнопками «Предыдущая» и «Следующая». Это работает, но далеко не всегда удобно для пользователей, особенно на крупных сайтах с большим количеством записей.

WP-PageNavi заменяет стандартный вывод пагинации на более подробный список страниц, например: 1, 2, 3, … 10, 11, 12. Такой формат позволяет посетителям легче ориентироваться и быстро переходить к нужной странице.

Основные преимущества WP-PageNavi:

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

Установка и базовая настройка WP-PageNavi

Для установки плагина выполните следующие шаги:

1. В админ-панели WordPress перейдите в раздел Плагины → Добавить новый.
2. В строке поиска введите WP-PageNavi.
3. Найдите плагин разработчика Lester 'GaMerZ' Chan и нажмите Установить, затем Активировать.

После активации плагина перейдите в Настройки → PageNavi, где можно настроить отображение пагинации:

• Текст ссылок: изменить подписи для «Вперёд», «Назад» и т.д.
• Количество страниц: сколько номеров страниц показывать вокруг текущей.
• Формат вывода: обёртки, CSS-классы и прочие опции.

Как подключить WP-PageNavi в теме WordPress

Чтобы вывести пагинацию с помощью WP-PageNavi в шаблоне темы (например, в index.php, archive.php или category.php), нужно заменить стандартный вызов пагинации на функцию плагина.

Вместо:

if (function_exists('wppagenavi')) {
    wppagenavi();
} else {
    the_posts_navigation();
}

или, если в теме нет вызова пагинации, можно добавить:

<?php
function wppagenavi_ru_custom_pagination() {
    if (function_exists('wp_pagenavi')) {
        wp_pagenavi();
    } else {
        the_posts_navigation();
    }
}

wppagenavi_ru_custom_pagination();
?>

Обратите внимание, что в примере мы используем функцию wppagenavi_ru_custom_pagination с префиксом домена для избежания конфликтов.

Кастомизация внешнего вида пагинации

WP-PageNavi выводит пагинацию в виде списка <div> с классом wp-pagenavi. Для изменения стилей используйте CSS. Вот базовый пример:

.wp-pagenavi {
  text-align: center;
  margin: 20px 0;
}
.wp-pagenavi a, .wp-pagenavi span {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #ddd;
  color: #0073aa;
  text-decoration: none;
  border-radius: 3px;
}
.wp-pagenavi .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}
.wp-pagenavi a:hover {
  background-color: #005177;
  color: #fff;
  border-color: #005177;
}

Этот стиль сделает пагинацию аккуратной, с выделением текущей страницы и приятным наведением.

Расширенные возможности: добавляем AJAX пагинацию с WP-PageNavi

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

Добавьте в файл functions.php следующую функцию для регистрации скрипта и локализации:

function wppagenavi_ru_load_ajax_scripts() {
    wp_enqueue_script('wppagenavi-ajax', get_template_directory_uri() . '/js/wppagenavi-ajax.js', array('jquery'), null, true);
    wp_localize_script('wppagenavi-ajax', 'wppagenaviAjax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppagenavi_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wppagenavi_ru_load_ajax_scripts');

// Обработка AJAX запроса
function wppagenavi_ru_ajax_pagination() {
    check_ajax_referer('wppagenavi_nonce', 'nonce');

    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    $query_args = array(
        'post_type' => 'post',
        'paged' => $paged,
        'posts_per_page' => get_option('posts_per_page'),
    );

    $wp_query = new WP_Query($query_args);

    if ($wp_query->have_posts()) :
        ob_start();
        while ($wp_query->have_posts()) : $wp_query->the_post();
            get_template_part('template-parts/content', get_post_format());
        endwhile;
        wp_reset_postdata();

        $posts_html = ob_get_clean();

        ob_start();
        wp_pagenavi(array('query' => $wp_query));
        $pagination_html = ob_get_clean();

        wp_send_json_success(array(
            'posts' => $posts_html,
            'pagination' => $pagination_html,
        ));
    else :
        wp_send_json_error('No posts found');
    endif;

    wp_die();
}
add_action('wp_ajax_wppagenavi_pagination', 'wppagenavi_ru_ajax_pagination');
add_action('wp_ajax_nopriv_wppagenavi_pagination', 'wppagenavi_ru_ajax_pagination');

Создайте файл js/wppagenavi-ajax.js в вашей теме с таким содержимым:

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

        $.ajax({
            url: wppagenaviAjax.ajaxurl,
            type: 'POST',
            data: {
                action: 'wppagenavi_pagination',
                paged: paged,
                nonce: wppagenaviAjax.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#posts-container').html(response.data.posts);
                    $('.pagination-container').html(response.data.pagination);
                    $('html, body').animate({ scrollTop: $('#posts-container').offset().top - 100 }, 500);
                }
            }
        });
    });
});

В шаблоне оберните вывод постов и пагинации в дивы с id для обновления:

<div id="posts-container">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            get_template_part('template-parts/content', get_post_format());
        endwhile;
    endif;
    ?>
</div>

<div class="pagination-container">
    <?php wp_pagenavi(); ?>
</div>

Полезные плагины для расширения функционала пагинации

Кроме WP-PageNavi, есть и другие плагины, которые можно использовать совместно или как альтернативу:

• Clearfy Pro — оптимизирует работу WordPress, включая пагинацию и SEO-настройки, подробнее на wpshop.ru/plugins/clearfy-pro.
• WP-PageNavi Plus — расширяет возможности стандартного плагина с дополнительными стилями и AJAX.
• WPGPT — для генерации контента и подсказок, может помочь создавать динамические списки с пагинацией.

Советы по SEO и производительности с WP-PageNavi

Чтобы пагинация не мешала SEO и не приводила к дублированию страниц, следует:

• Добавлять правильные теги rel="next" и rel="prev" в заголовке страницы. Это можно сделать через фильтры или плагин Clearfy Pro.
• Использовать кеширование, чтобы ускорить загрузку страниц с пагинацией. Например, совместить WP-PageNavi с плагином WP Super Cache или аналогичными.
• Оптимизировать запросы, не использовать сложные и ресурсоёмкие WP_Query без необходимости.

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

WP-PageNavi — простой и мощный инструмент для улучшения пагинации на сайте WordPress. Он позволяет быстро внедрить красивую и удобную навигацию, а при необходимости легко расширяется с помощью AJAX и кастомных стилей.

Используйте приведённые в статье примеры, чтобы установить, настроить и модифицировать пагинацию под свои задачи. Если нужен более комплексный подход к оптимизации, обратите внимание на плагины из экосистемы WPSHOP.