В WordPress часто возникает необходимость разбить длинный пост на несколько страниц для улучшения читаемости и удобства пользователя. Это особенно актуально для больших статей, инструкций или обзоров. В этой статье мы подробно рассмотрим, как реализовать разбиение контента на страницы без использования дополнительных плагинов, используя встроенные возможности WordPress и минимальный код.
Что такое разбиение поста на страницы и зачем оно нужно
Разбиение поста на страницы (pagination внутри одной записи) позволяет разбить один длинный материал на несколько частей с навигацией между ними. Это помогает:
- Уменьшить нагрузку на браузер при загрузке очень длинных страниц.
- Сделать контент более удобным для восприятия, особенно на мобильных устройствах.
- Повысить вовлечённость читателей, побуждая их переходить к следующей части.
- Оптимизировать SEO, увеличивая количество просмотров страниц.
WordPress из коробки поддерживает эту функцию, и её можно активировать с помощью специального тега в тексте записи.
Использование тега <!--nextpage--> для разбиения поста
Самый простой способ разделить запись на страницы — вставить в текст поста тег <!--nextpage--> в тех местах, где необходимо сделать разрыв. WordPress автоматически воспримет этот тег и создаст пост с несколькими страницами.
Как добавить тег <!--nextpage--> в классическом редакторе
В классическом редакторе переключитесь в режим текста (HTML) и вставьте <!--nextpage--> в нужных местах:
Первый абзац текста...
<!--nextpage-->
Второй абзац текста...
<!--nextpage-->
Третий абзац текста...После сохранения поста WordPress автоматически разделит его на страницы.
Как добавить разметку в блоковом редакторе Gutenberg
В Gutenberg для вставки разрыва страницы используйте блок «Разрыв страницы» (Page Break). Он добавит тег <!--nextpage--> за вас без необходимости ручного ввода.
Как вывести навигацию по страницам в шаблонах темы
Чтобы пользователи могли переходить между страницами записи, в шаблонах темы нужно добавить вызов функции wp_link_pages(). Обычно это делают в файлах single.php или content-single.php.
Базовый пример использования wp_link_pages
wp_link_pages( array(
'before' => '<div class="page-links"><span>Страницы:</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );Этот код выведет навигационные ссылки между страницами поста с обёрткой и классами для стилизации.
Кастомизация навигации и добавление стрелок
Можно сделать навигацию более удобной, добавив стрелки и стилизовав ссылки. Вот пример расширенного вызова:
wp_link_pages( array(
'before' => '<nav class="post-pagination" aria-label="Пагинация поста"><ul>',
'after' => '</ul></nav>',
'link_before' => '<li>',
'link_after' => '</li>',
'nextpagelink' => 'Следующая →',
'previouspagelink' => '← Предыдущая',
) );Здесь каждая ссылка обёрнута в тег <li>, что удобно для стилизации через CSS.
Пример функции wpin_wp_link_pages_custom для улучшенной пагинации
Для удобства и повторного использования можно создать свою функцию с префиксом wpin_, которая выводит пагинацию с кастомным оформлением:
function wpin_wp_link_pages_custom() {
$args = array(
'before' => '<nav class="wpin-pagination" aria-label="Навигация по страницам поста"><ul>',
'after' => '</ul></nav>',
'link_before' => '<li>',
'link_after' => '</li>',
'nextpagelink' => 'Следующая →',
'previouspagelink' => '← Предыдущая',
'echo' => 1
);
wp_link_pages( $args );
}Добавьте вызов wpin_wp_link_pages_custom(); в шаблон вывода поста после the_content(), чтобы аккуратно вывести навигацию.
Улучшение UX: AJAX-навигация для постов с разбиением
Для более плавного опыта пользователей можно реализовать AJAX-подгрузку страниц внутри поста. Это позволит обновлять содержимое без перезагрузки всей страницы.
Общий подход
1. Отслеживать клики по ссылкам пагинации. 2. Отправлять AJAX-запрос на сервер, запрашивая нужную страницу поста. 3. Получать и обновлять контент внутри блока поста. 4. Обновлять URL в адресной строке без перезагрузки (history.pushState).
Пример JavaScript для перехвата кликов
document.addEventListener('DOMContentLoaded', function() {
const pagination = document.querySelector('.wpin-pagination');
if (!pagination) return;
pagination.addEventListener('click', function(e) {
if (e.target.tagName !== 'A') return;
e.preventDefault();
const url = e.target.href;
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const content = doc.querySelector('.entry-content'); // класс с контентом поста
if (content) {
document.querySelector('.entry-content').innerHTML = content.innerHTML;
history.pushState(null, '', url);
}
})
.catch(console.error);
});
});Для работы этого скрипта в теме должен быть класс entry-content у блока с содержимым поста. При этом сервер должен отдавать корректный HTML для AJAX-запросов.
Рекомендации и лучшие практики
- Используйте разбиение поста только для действительно больших материалов, чтобы не усложнять навигацию.
- Добавляйте понятные заголовки для каждой страницы внутри записи, чтобы пользователи не терялись.
- Стилизуйте пагинацию так, чтобы она была заметной, но не раздражала.
- Проверяйте, что пагинация корректно работает на мобильных устройствах.
- Если сайт использует кэширование, убедитесь, что пагинация не приводит к конфликтам.
Полезные плагины для расширенной пагинации постов
Хотя мы рассматриваем разбиение постов без плагинов, иногда полезно использовать специализированные инструменты. Несколько плагинов, которые помогут улучшить пагинацию:
- Multipage Toolbox — расширение для управления разбиением постов и навигацией.
- WP-PageNavi — популярный плагин для кастомизации пагинации, подходит и для записей.
Для интеграции с плагином WPGPT Expert Review можно добавить отзывы по разделам статьи, улучшая взаимодействие с пользователем.