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

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

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

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

Кроме того, кастомная пагинация позволяет интегрировать дополнительные функции, например, добавлять микроразметку для SEO или использовать AJAX-загрузку постов.

Основы создания пагинации в WordPress

Для начала напомним, что WordPress имеет встроенную функцию paginate_links(), которая генерирует ссылки пагинации на основе текущих параметров запроса. Основная задача — правильно передать параметры и оформить вывод.

Пример минимального кода пагинации:

function wppagenavi_custom_pagination() {
    global $wp_query;
    $big = 999999999; // нужно для замены
    echo 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,
        'prev_text'    => __('« Назад'),
        'next_text'    => __('Вперёд »'),
    ));
}

Вызывайте эту функцию в нужном месте шаблона, например, в файле index.php или archive.php после цикла WordPress.

Расширение пагинации: добавляем стили и улучшения

Чтобы сделать пагинацию более удобной и красивой, нужно добавить CSS-классы и обернуть ссылки в теги списка:

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,
        'prev_text' => '«',
        'next_text' => '»',
        'type' => 'array',
    ));

    if (is_array($pages)) {
        echo '<ul class="wppagenavi-pagination">';
        foreach ($pages as $page) {
            echo '<li class="wppagenavi-page-item">' . $page . '</li>';
        }
        echo '</ul>';
    }
}

Далее создайте CSS-стили для классов .wppagenavi-pagination и .wppagenavi-page-item, чтобы оформить внешний вид пагинации согласно вашему дизайну.

Пример простого CSS:

.wppagenavi-pagination {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
}
.wppagenavi-page-item a {
    padding: 6px 12px;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
}
.wppagenavi-page-item .current {
    background-color: #0073aa;
    color: white !important;
    border-color: #0073aa;
}

Как добавить AJAX пагинацию без перезагрузки страницы

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

Общий принцип такой: при клике на ссылку пагинации срабатывает JavaScript, который отправляет AJAX-запрос на сервер, получает новый HTML с постами и заменяет содержимое контейнера.

Пример AJAX-скрипта:

jQuery(document).ready(function($) {
    $(document).on('click', '.wppagenavi-pagination a', function(e) {
        e.preventDefault();
        var link = $(this).attr('href');
        $('#posts-container').fadeOut(200, function() {
            $.get(link + ' #posts-container > *', function(data) {
                $('#posts-container').html(data).fadeIn(200);
            });
        });
    });
});

В данном примере предполагается, что список постов находится в контейнере с id posts-container. По клику на ссылку пагинации загружается содержимое новой страницы и заменяется в текущем блоке.

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

Дополнительные советы по оптимизации пагинации

1. Используйте правильные параметры запроса — для сложных запросов, например, в кастомных WP_Query, пагинацию нужно настраивать вручную, передавая параметры paged и posts_per_page.

2. Добавляйте микроразметку Schema.org для пагинации, чтобы улучшить восприятие поисковыми системами.

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

4. Тестируйте пагинацию на разных типах контента — записи, страницы, кастомные типы.

Пример ограничения ссылок пагинации:

function wppagenavi_limited_pagination() {
    global $wp_query;
    $big = 999999999;
    $current = max(1, get_query_var('paged'));
    $total = $wp_query->max_num_pages;
    $links = [];

    if ($current > 1) {
        $links[] = '<a href="' . get_pagenum_link($current - 1) . '">«</a>';
    }

    $start = max(1, $current - 2);
    $end = min($total, $current + 2);

    for ($i = $start; $i <= $end; $i++) {
        if ($i == $current) {
            $links[] = '<span class="current">' . $i . '</span>';
        } else {
            $links[] = '<a href="' . get_pagenum_link($i) . '">' . $i . '</a>';
        }
    }

    if ($current < $total) {
        $links[] = '<a href="' . get_pagenum_link($current + 1) . '">»</a>';
    }

    echo '<div class="wppagenavi-limited-pagination">' . implode(' ', $links) . '</div>';
}

Такой подход делает пагинацию компактной и понятной.