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

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

Зачем нужна уникальная пагинация в WordPress

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

• Улучшить визуальное восприятие навигации;
• Добавить больше контекста — например, номера страниц с активным выделением;
• Оптимизировать SEO, корректно выводя ссылки и атрибуты;
• Добавить дополнительные возможности — кнопки «Вперёд», «Назад», «Первая» и «Последняя».

Рассмотрим, как создать уникальное пагинационное меню с нуля и как использовать плагин ABC Pagination для расширенной функциональности.

Создание кастомного пагинационного меню в WordPress

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

function premiumwp_custom_pagination($pages = '', $range = 2) {
    $showitems = ($range * 2) + 1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages) $pages = 1;
    }

    if(1 != $pages) {
        echo '<div class="premiumwp-pagination">';

        // Кнопка Первая
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) 
            echo '<a href="'.get_pagenum_link(1).'" class="first-page"><<< Первая</a> ';
        // Кнопка Назад
        if($paged > 1) 
            echo '<a href="'.get_pagenum_link($paged - 1).'" class="prev-page">< Назад</a> ';

        for ($i=1; $i <= $pages; $i++) {
            if (1 != $pages && 
                (!($i < $paged - $range) || !($i > $paged + $range)) ) {
                if ($paged == $i)
                    echo '<span class="current">'.$i.'</span> ';
                else
                    echo '<a href="'.get_pagenum_link($i).'" class="page-num">'.$i.'</a> ';
            }
        }

        // Кнопка Вперёд
        if ($paged < $pages) 
            echo '<a href="'.get_pagenum_link($paged + 1).'" class="next-page">Вперёд ></a> ';
        // Кнопка Последняя
        if ($paged < $pages - 1 &&  $paged + $range - 1 < $pages && $showitems < $pages) 
            echo '<a href="'.get_pagenum_link($pages).'" class="last-page">Последняя >>></a>';

        echo '</div>';
    }
}

Эта функция выводит пагинацию с кнопками «Первая», «Назад», номерами страниц с выделением текущей и кнопками «Вперёд», «Последняя». Параметр $range задаёт количество страниц слева и справа от текущей.

Чтобы использовать пагинацию, вызовите функцию в шаблонах архивов или на главной странице, где выводятся посты:

premiumwp_custom_pagination();

Стилизация пагинации

Для лучшего восприятия добавьте CSS:

.premiumwp-pagination {
  text-align: center;
  margin: 20px 0;
}
.premiumwp-pagination a, .premiumwp-pagination span {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  color: #0073aa;
  text-decoration: none;
  border-radius: 3px;
}
.premiumwp-pagination .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
  pointer-events: none;
}
.premiumwp-pagination a:hover {
  background-color: #005177;
  color: #fff;
  border-color: #005177;
}

Использование плагина ABC Pagination для расширенных возможностей

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

• Настраивать стиль и внешний вид пагинации через интерфейс;
• Выбирать типы пагинации — числовая, бесконечная прокрутка, «Загрузить ещё»;
• Интегрироваться с популярными плагинами и темами;
• Использовать AJAX для подгрузки страниц без перезагрузки.

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

Пример использования шорткода ABC Pagination в шаблоне

echo do_shortcode('[abc_pagination]');

Оптимизация пагинации с точки зрения SEO и UX

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

• SEO: добавляйте rel="nofollow" или rel="prev" и rel="next" для ссылок, чтобы поисковые системы корректно индексировали страницы;
• Доступность: используйте понятные aria-label и роли для навигации;
• Мобильная адаптивность: пагинация должна хорошо выглядеть и быть удобной на разных устройствах;
• Скорость: избегайте избыточного количества ссылок — лучше ограничить диапазон выводимых страниц.

Пример добавления rel в функции пагинации:

echo '<a href="'.get_pagenum_link($i).'" rel="nofollow" class="page-num">'.$i.'</a> ';

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

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

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