Как сделать пагинацию для контента в Page Builder WordPress

При работе с современными конструкторскими плагинами для WordPress, такими как Elementor, Beaver Builder, WPBakery и другими, часто возникает задача добавить пагинацию для длинного контента или вывода записей. Стандартные инструменты WordPress пагинации здесь не всегда работают «из коробки», поэтому важно понимать, как реализовать пагинацию в Page Builder с помощью кода или дополнительных плагинов.

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

Большинство page builder’ов выводят контент через свои виджеты, которые могут использовать собственные запросы WP_Query или вовсе обходиться без них. Это значит, что стандартный хук paginate_links() или функции типа the_posts_pagination() не всегда применимы. В итоге пагинация либо не отображается, либо работает некорректно.

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

Создание пользовательской пагинации для кастомного запроса в Page Builder

Рассмотрим пример, как добавить простую пагинацию для вывода записей в кастомном виджете или блоке, используя WP_Query и URL-параметр paged.

Шаг 1. Создаем функцию для запроса с пагинацией

function wppagenavi_get_custom_query_with_pagination() {
    $paged = max(1, get_query_var('paged', 1));

    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $paged,
    ];

    return new WP_Query($args);
}

Здесь мы получаем текущую страницу и создаём запрос с нужным количеством записей на страницу.

Шаг 2. Выводим записи и пагинацию

function wppagenavi_render_custom_loop() {
    $query = wppagenavi_get_custom_query_with_pagination();

    if ($query->have_posts()) {
        echo '<div class="custom-post-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<article>';
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<div>' . get_the_excerpt() . '</div>';
            echo '</article>';
        }
        echo '</div>';

        // Пагинация
        $big = 999999999; // уникальное число
        echo paginate_links([
            'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
            'format' => '?paged=%#%',
            'current' => max(1, get_query_var('paged')),
            'total' => $query->max_num_pages,
            'prev_text' => '« Назад',
            'next_text' => 'Вперед »',
        ]);

        wp_reset_postdata();
    } else {
        echo '<p>Записей не найдено.</p>';
    }
}

Данную функцию можно подключить в PHP-тему в том месте, где нужно вывести пагинируемый список.

Добавление пагинации в Page Builder с AJAX для плавной подгрузки

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

Пример AJAX пагинации с jQuery

// PHP: AJAX обработчик
add_action('wp_ajax_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_handler');
add_action('wp_ajax_nopriv_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_handler');

function wppagenavi_ajax_pagination_handler() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

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

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            echo '<article><h2>' . get_the_title() . '</h2></article>';
        }
        wp_reset_postdata();
        $content = ob_get_clean();
        wp_send_json_success(['content' => $content, 'max_page' => $query->max_num_pages]);
    } else {
        wp_send_json_error('Нет записей');
    }
    wp_die();
}

// JS (подключить в footer или отдельным файлом)
jQuery(document).ready(function($){
    let currentPage = 1;
    const maxPage = 10; // можно динамически получать из PHP

    $('#load-more-btn').on('click', function(){
        if (currentPage >= maxPage) return;
        currentPage++;
        $.post(
            wppagenavi_ajax_obj.ajax_url,
            {
                action: 'wppagenavi_ajax_pagination',
                page: currentPage
            },
            function(response) {
                if(response.success) {
                    $('#custom-post-list').append(response.data.content);
                    if(currentPage >= response.data.max_page) {
                        $('#load-more-btn').hide();
                    }
                }
            }
        );
    });
});

Для работы этого кода нужно локализовать скрипт, передав в него ajax_url и добавить кнопку с id load-more-btn и контейнер с id custom-post-list.

Полезные плагины для пагинации в Page Builder

Если вы не хотите писать код с нуля, можно обратить внимание на следующие плагины, которые интегрируются с популярными конструкторскими решениями:

• ABC Pagination — расширенный плагин пагинации с множеством настроек и поддержкой AJAX. Отлично подходит для кастомных запросов.
• WP-PageNavi — классика, которую можно адаптировать под Page Builder с помощью небольших доработок.
• Clearfy Pro — помимо оптимизации WordPress, содержит настройки по улучшению пагинации и скорости загрузки.

Все эти плагины доступны на WPSHOP.RU с подробной документацией и поддержкой.

Как интегрировать пагинацию с WP-PageNavi в кастомный шаблон Page Builder

Если вы используете WP-PageNavi, то можете вывести пагинацию следующим образом:

function wppagenavi_render_pagenavi() {
    if (function_exists('wp_pagenavi')) {
        wp_pagenavi();
    } else {
        echo '<p>Плагин WP-PageNavi не установлен.</p>';
    }
}

После этого вызовите wppagenavi_render_pagenavi() в нужном месте шаблона или виджета Page Builder.

Поддержка SEO при пагинации в Page Builder

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

Для этого можно добавить в functions.php следующий код для вывода тегов:

function wppagenavi_add_rel_prev_next() {
    if (is_paged()) {
        $paged = get_query_var('paged');
        $prev = $paged - 1;
        $next = $paged + 1;

        if ($prev > 0) {
            echo '<link rel="prev" href="' . esc_url(get_pagenum_link($prev)) . '" />';
        }
        if ($next <= $GLOBALS['wp_query']->max_num_pages) {
            echo '<link rel="next" href="' . esc_url(get_pagenum_link($next)) . '" />';
        }
    }
}
add_action('wp_head', 'wppagenavi_add_rel_prev_next');

Итог

Создание пагинации в Page Builder WordPress — задача, требующая понимания работы с WP_Query, AJAX и особенностей выбранного конструктора. В статье приведены практические решения, которые вы сможете адаптировать под свои проекты. Использование плагинов с возможностью кастомизации позволит сэкономить время и избежать ошибок.