Как добавить пагинацию в кастомных виджетах WordPress

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

Почему пагинация в кастомных виджетах важна

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

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

Подготовка к добавлению пагинации в виджет WordPress

Для начала создадим простой кастомный виджет, который выводит список постов с пагинацией. В примере используем стандартный класс WP_Widget. Основное отличие от обычного шаблона пагинации в том, что здесь нужно правильно формировать ссылки с параметрами пагинации, учитывая текущий URL и другие параметры.

Создание базового класса виджета

class Wppagenavi_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wppagenavi_custom_widget',
            'Кастомный виджет с пагинацией'
        );
    }

    public function widget($args, $instance) {
        $this->wppagenavi_custom_widget_render($args, $instance);
    }

    private function wppagenavi_custom_widget_render($args, $instance) {
        // Здесь будет код вывода с пагинацией
    }
}

Регистрируем виджет в функции widgets_init:

function wppagenavi_register_custom_widget() {
    register_widget('Wppagenavi_Custom_Widget');
}
add_action('widgets_init', 'wppagenavi_register_custom_widget');

Реализация пагинации в виджете: пошагово

Теперь добавим в метод wppagenavi_custom_widget_render логику пагинации.

1. Получение текущей страницы

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

$paged = isset($_GET['widget_page']) ? max(1, intval($_GET['widget_page'])) : 1;

2. Формирование запроса WP_Query

Создаем запрос с ограничением количества постов на страницу и текущей страницей:

$posts_per_page = 5;
$args_query = [
    'post_type' => 'post',
    'posts_per_page' => $posts_per_page,
    'paged' => $paged,
];
$query = new WP_Query($args_query);

3. Вывод постов

Простой вывод заголовков постов:

if ($query->have_posts()) {
    echo '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
} else {
    echo '<p>Посты не найдены.</p>';
}
wp_reset_postdata();

4. Вывод пагинации

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

$big = 999999999; // уникальное число для замены
$base_url = remove_query_arg('widget_page');
$base = add_query_arg('widget_page', '%#%', $base_url);

$pagination = paginate_links([
    'base' => $base,
    'format' => '',
    'current' => $paged,
    'total' => $query->max_num_pages,
    'prev_text' => '<',
    'next_text' => '>',
]);

if ($pagination) {
    echo '<nav class="wppagenavi-widget-pagination">' . $pagination . '</nav>';
}

Особенности и улучшения пагинации в виджетах

Обработка других GET-параметров и SEO

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

Также стоит учитывать SEO: лучше избегать множества параметров в URL, если пагинация влияет на индексируемый контент. Для виджетов пагинация чаще всего влияет на фрагменты страницы, поэтому поисковые системы обычно не индексируют такие параметры. Для этого можно добавить тег rel="nofollow" к ссылкам пагинации — это можно реализовать через фильтр paginate_links.

Использование AJAX для пагинации в виджетах

Чтобы улучшить UX и снизить нагрузку на сервер, можно реализовать пагинацию через AJAX, подгружая посты без перезагрузки страницы. Для этого нужно добавить обработчик AJAX-запросов в functions.php и JavaScript-код для отправки запроса и обновления содержимого.

Пример простого AJAX-обработчика:

add_action('wp_ajax_wppagenavi_widget_pagination', 'wppagenavi_widget_pagination_callback');
add_action('wp_ajax_nopriv_wppagenavi_widget_pagination', 'wppagenavi_widget_pagination_callback');

function wppagenavi_widget_pagination_callback() {
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    $posts_per_page = 5;

    $query = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
    ]);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
    } else {
        echo '<li>Посты не найдены.</li>';
    }
    wp_reset_postdata();
    wp_die();
}

В JavaScript нужно реализовать отправку AJAX-запроса при клике на номер страницы, например, через jQuery или нативный JS.

Пример использования плагина ABC Pagination для виджетов

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

Пример инициализации ABC Pagination:

if (function_exists('abc_pagination')) {
    abc_pagination($query->max_num_pages, $paged);
}

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

Добавление пагинации в кастомных виджетах — задача, требующая внимательности к деталям URL, параметрам запроса и пользовательскому опыту. Используйте уникальные GET-параметры для пагинации, корректно формируйте запросы WP_Query и выводите навигацию с помощью paginate_links. Для повышения удобства пользователей рекомендуем рассмотреть AJAX-пагинацию и готовые решения, такие как ABC Pagination.

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