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

Почему адаптивная пагинация важна для сайта на WordPress

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

Кроме того, адаптивность пагинации важна и с точки зрения SEO. Поисковики учитывают удобство навигации, поэтому правильно сделанная пагинация может положительно влиять на ранжирование.

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

Плагины для адаптивной пагинации в WordPress

WP-PageNavi — мощный базовый плагин

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

После установки и активации плагина вызов пагинации в теме заменяется на:

<?php wppagenavi_pagination(); ?>

где wppagenavi_pagination — функция с приставкой домена, которую можно определить так:

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

Для адаптивности добавим CSS:

.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.wp-pagenavi a, .wp-pagenavi span {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
}
@media (max-width: 600px) {
    .wp-pagenavi a, .wp-pagenavi span {
        padding: 6px 8px;
        font-size: 12px;
    }
}

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

Другие плагины: Pagination by BestWebSoft, WP-Paginate

Если WP-PageNavi кажется слишком базовым, обратите внимание на Pagination by BestWebSoft. Он предлагает множество настроек, включая показ/скрытие номеров страниц, кнопок "Вперед" и "Назад", а также адаптивные шаблоны. Для адаптивности достаточно активировать опцию "Responsive Pagination" в настройках плагина.

Также WP-Paginate — хороший выбор для тех, кто хочет больше контроля над дизайном и поведением пагинации. Плагин позволяет задать количество отображаемых страниц, отображать кнопки "Первая" и "Последняя", а также доступен набор стилей CSS для адаптивности.

Создание кастомной адаптивной пагинации без плагинов

Если вы хотите полностью контролировать внешний вид и поведение пагинации, можно написать собственную функцию. Она будет использовать стандартные возможности WordPress, но с кастомной разметкой и адаптивным CSS.

Пример функции кастомной пагинации wppagenavi_custom_pagination()

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

    if (is_array($pages)) {
        echo '<nav class="wppagenavi-custom" aria-label="Пагинация"><ul>';
        foreach ($pages as $page) {
            echo '<li>' . $page . '</li>';
        }
        echo '</ul></nav>';
    }
}

Далее вызов функции делаем там, где нужно показать пагинацию:

<?php wppagenavi_custom_pagination(); ?>

CSS для адаптивности кастомной пагинации

.wppagenavi-custom ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.wppagenavi-custom li {
    margin: 4px;
}
.wppagenavi-custom a, .wppagenavi-custom span {
    display: block;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.wppagenavi-custom .current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
@media (max-width: 480px) {
    .wppagenavi-custom a, .wppagenavi-custom span {
        padding: 6px 10px;
        font-size: 13px;
    }
}

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

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

Lazy Load и AJAX пагинация

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

Пример простого AJAX вызова с использованием jQuery:

jQuery(document).ready(function($) {
    $('.wppagenavi-custom a').on('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $('#content').fadeOut(200, function() {
            $('#content').load(url + ' #content > *', function() {
                $('#content').fadeIn(200);
            });
        });
    });
});

Для полноценной реализации AJAX пагинации нужно дополнительно настроить обработку истории браузера и SEO, но это уже тема для отдельной статьи.

Оптимизация производительности пагинации

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

• Использовать индексы в базе данных.
• Кэшировать результаты запросов (например, через Transients API).
• Ограничивать количество страниц, отображаемых в пагинации.
• Использовать фильтры и мета-запросы с умом, чтобы избежать тяжёлых запросов.

Пример простого кэширования пагинации с помощью Transients API:

function wppagenavi_get_cached_pagination() {
    $cache_key = 'wppagenavi_pagination_' . max(1, get_query_var('paged'));
    $pagination = get_transient($cache_key);
    if ($pagination === false) {
        ob_start();
        wppagenavi_custom_pagination();
        $pagination = ob_get_clean();
        set_transient($cache_key, $pagination, 3600); // кэш на час
    }
    echo $pagination;
}

Итог: адаптивная пагинация — просто и эффективно

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

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