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

Автор: Тимур Захаров | Опубликовано: 04.01.2026

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

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

Почему стандартная пагинация WordPress не всегда подходит

Стандартная пагинация WordPress, реализуемая через функции paginate_links() или the_posts_pagination(), выводит простую линейную навигацию. Это хорошо для небольших блогов, но при большом объёме контента и иерархических структур (например, в интернет-магазинах или каталогах) пользователю сложно понять контекст и быстро перемещаться по разделам.

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

Возможности плагина ABC Pagination для WordPress

Плагин ABC Pagination — мощный инструмент, позволяющий создавать кастомные пагинации с гибкой настройкой внешнего вида и логики вывода. Среди ключевых возможностей:

Поддержка многоуровневых структур пагинации;
Гибкие шаблоны и стили вывода;
Возможность разбивки пагинации на группы;
Интеграция с WP_Query и пользовательскими типами записей;
Простая настройка через админ-панель и использование хуков для кастомизации.

Установка и базовая настройка ABC Pagination

Установить плагин можно через админ-панель WordPress в разделе Плагины → Добавить новый. Поиск по названию «ABC Pagination» позволит быстро найти нужный плагин, после чего активируйте его.

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

Создание многоуровневой пагинации с кастомным кодом

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

Основная идея — использовать фильтры плагина для вывода кастомной разметки. Вот пример функции, которую нужно добавить в файл functions.php вашей темы или в кастомный плагин:

function wpeasy_custom_abc_pagination( $pagination_html, $args ) {
    // Разбиваем ссылки пагинации на массив
    $pages = explode('<a', $pagination_html);
    
    // Здесь можно реализовать логику группировки страниц по 10
    $grouped_pages = array_chunk( $pages, 10 );
    
    $output = '<div class="abc-pagination-multilevel">';
    
    foreach ( $grouped_pages as $index => $group ) {
        $output .= '<div class="page-group"><h3>Группа ' . ( $index + 1 ) . '</h3><div class="pages">';
        foreach ( $group as $page ) {
            // Восстанавливаем тег <a
            if ( $page !== $pages[0] ) {
                $output .= '<a' . $page;
            }
        }
        $output .= '</div></div>';
    }
    
    $output .= '</div>';
    
    return $output;
}
add_filter( 'abc_pagination_html', 'wpeasy_custom_abc_pagination', 10, 2 );

Этот код разбивает пагинацию на группы по 10 ссылок и выводит каждую группу в отдельном блоке с заголовком. Вы можете адаптировать стили и логику под свои задачи.

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

Чтобы визуально разграничить группы, добавьте в файл стилей темы (style.css) следующий CSS:

.abc-pagination-multilevel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.page-group {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    width: 200px;
    background: #f9f9f9;
}
.page-group h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #333;
}
.page-group .pages a {
    display: inline-block;
    margin: 3px 5px;
    padding: 5px 10px;
    background: #0073aa;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
}
.page-group .pages a:hover {
    background: #005177;
}
.page-group .pages a.current {
    background: #222;
}

Интеграция многоуровневой пагинации с WP_Query и пользовательскими типами записей

Если у вас сайт с большим количеством кастомных типов постов (например, каталог товаров, новости и т.д.), стандартная пагинация может не справляться. Используйте ABC Pagination в связке с WP_Query, чтобы выводить многоуровневую пагинацию именно для нужных запросов.

Пример запроса с кастомной пагинацией:

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'product',
    'posts_per_page' => 20,
    'paged' => $paged
);
$query = new WP_Query( $args );

if ( $query->have_posts() ) :
    while ( $query->have_posts() ) : $query->the_post();
        // Вывод шаблона товара
    endwhile;

    // Вывод пагинации с ABC Pagination
    echo do_shortcode('[abc_pagination query="' . esc_attr( serialize( $query ) ) . '"]');

    wp_reset_postdata();
endif;

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

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

Использование AJAX для подгрузки страниц

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

Для реализации AJAX-пагинации с ABC Pagination потребуется написать JS-скрипт, который будет перехватывать клики по ссылкам пагинации, отправлять AJAX-запрос и обновлять содержимое контента и навигации.

Оптимизация SEO при многоуровневой пагинации

Многоуровневая пагинация может создавать дублированный контент и усложнять индексацию. Используйте мета-теги rel="next" и rel="prev", а также настройте правильные канонические URL для каждой страницы пагинации.

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

Заключение

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

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