Как сделать пагинацию для WooCommerce с использованием WP-PageNavi

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

Почему стоит использовать WP-PageNavi для пагинации WooCommerce

Стандартная пагинация WooCommerce довольно простая и не всегда удобная для пользователей, особенно если в магазине много товаров. WP-PageNavi предлагает:

• более читаемый и понятный интерфейс пагинации с номерами страниц;
• возможность тонкой настройки внешнего вида;
• поддержку SEO-дружественных URL;
• простую интеграцию с темами и плагинами.

Однако для корректной работы с WooCommerce нужна небольшая доработка, так как WooCommerce использует собственные запросы для вывода товаров.

Как подключить WP-PageNavi к WooCommerce: пошаговое руководство

Установка и активация плагина

Первым делом установите и активируйте плагин WP-PageNavi через админку WordPress или скачайте его с официального репозитория.

Отключение стандартной пагинации WooCommerce

Чтобы использовать WP-PageNavi, нужно убрать стандартную пагинацию WooCommerce. Для этого добавьте в functions.php вашей темы следующий код:

function wppagenavi_remove_woocommerce_pagination() {
    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
}
add_action( 'init', 'wppagenavi_remove_woocommerce_pagination' );

Этот код отключит стандартный вывод пагинации после списка товаров.

Вывод пагинации WP-PageNavi в шаблоне WooCommerce

Далее необходимо добавить вызов WP-PageNavi там, где должна отображаться пагинация. Обычно это файл archive-product.php или шаблон каталога товаров.

В нужном месте замените стандартный вызов пагинации на следующий код:

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

Если у вас нет прямого доступа к файлам темы, можно сделать это через хук:

function wppagenavi_add_custom_pagination() {
    if ( function_exists( 'wp_pagenavi' ) ) {
        wp_pagenavi();
    }
}
add_action( 'woocommerce_after_shop_loop', 'wppagenavi_add_custom_pagination', 20 );

Как адаптировать WP-PageNavi под запросы WooCommerce

WP-PageNavi по умолчанию работает с глобальной переменной $wp_query, а WooCommerce часто использует свои кастомные запросы для товаров. Чтобы пагинация корректно работала, нужно убедиться, что плагин обрабатывает именно текущий запрос.

Использование кастомного запроса с WP-PageNavi

Пример кода, который позволит интегрировать WP-PageNavi с кастомным запросом WooCommerce:

function wppagenavi_woocommerce_custom_pagination( $query ) {
    if ( function_exists( 'wp_pagenavi' ) ) {
        global $wp_query;
        $temp_query = $wp_query;
        $wp_query = $query;
        wp_pagenavi();
        $wp_query = $temp_query;
    }
}

Используйте эту функцию, передавая в неё объект запроса WooCommerce, если вы выводите товары с помощью WP_Query.

Кастомизация внешнего вида пагинации WP-PageNavi для WooCommerce

Настройка через админку

В разделе Настройки > WP-PageNavi можно задать шаблоны вывода, стили и тексты кнопок. Например, изменить надписи «Далее» и «Назад» на что-то более подходящее для магазина.

Стилизация через CSS

Для более гибкой стилизации добавьте в файл стилей темы CSS-код:

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

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

Дополнительные советы по улучшению пагинации WooCommerce

Оптимизация SEO при использовании WP-PageNavi

WP-PageNavi генерирует пагинацию с понятными URL, что положительно сказывается на SEO. Чтобы дополнительно улучшить результаты, используйте плагин Clearfy Pro (подробнее), который поможет убрать дубли страниц пагинации и настроить правильные метатеги.

Поддержка AJAX пагинации с WP-PageNavi и WooCommerce

Для более плавного пользовательского опыта можно реализовать AJAX пагинацию. Это требует подключения скриптов и обработки AJAX-запросов. Вот упрощённый пример:

jQuery(document).ready(function($) {
    $(document).on('click', '.wp-pagenavi a', function(e) {
        e.preventDefault();
        var link = $(this).attr('href');
        $('.products').fadeOut(200);
        $.get(link + ' .products', function(data) {
            var products = $(data).find('.products');
            $('.products').html(products.html()).fadeIn(200);
            // Обновляем пагинацию
            var pagination = $(data).find('.wp-pagenavi');
            $('.wp-pagenavi').html(pagination.html());
        });
    });
});

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

Заключение по теме пагинации WooCommerce с WP-PageNavi

Использование WP-PageNavi позволяет значительно улучшить навигацию по страницам товаров в интернет-магазине на WooCommerce. Немного кастомизации в коде и стилях — и у вас удобная и гибкая пагинация, которая повысит удобство пользователей и может положительно сказаться на SEO.

Если хотите упростить работу с WordPress и WooCommerce в целом, рекомендуем обратить внимание на продукты WPShop, например, Clearfy Pro для оптимизации и ускорения сайта.