WordPress: разбиваем текст записи на страницы

25 Мар 2023г. в 10:25

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



Тег для вашей записи
Просто создавайте свою запись как обычно, а когда нужно разбить ее на страницы - используйте тег <!–nextpage–>.

Ниже приводится снимок экрана с записью, разбитой на три страницы с помощью тега <!–nextpage–>.

Использование тега nextpage

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



Отредактируйте свой шаблон
В каталоге темы WordPress находится файл single.php. Это шаблон, который отвечает за вывод отдельной страницы или записи. В нем надо указать WordPress, что требуется выводить ссылки для нашего тега <!–nextpage–>.

В файле single.php (возможно еще название loop-single.php, которое также часто используется разработчиками тем) нужно найти цикл, который выводит запись или страницу. Вот сокращенный вариант такого цикла:

if (have_posts())

while (have_posts()) : the_post();

the_title();

the_content();

wp_link_pages();

endwhile;
endif;

Данный цикл выводит заголовок и содержание записи или страницы. Обратите внимание на функцию wp_link_pages. Данная функция выводит набор ссылок на страницы, которые формируются на основании тегов <!–nextpage–> в записи.

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

Вывод страниц записи

Определяем стили для ссылок на страницы
По умолчанию функция wp_link_pages формирует довольно скучные ссылки на страницы. Но она позволяет добавлять текст до и после своего вывода, так что мы сможем использовать CSS для формирования внешнего вида. Вот пример формирования внешнего вида ссылок на страницы:

if (have_posts())

while (have_posts()) : the_post();

the_title();

the_content();

wp_link_pages(array(
'before' => '<div class="page-link">' . 'Pages:',
'after' => '</div>'
));

endwhile;

endif;
А вот так буду выглядеть ссылки с некоторым определением класса page-link: