Как разбить текст статьи на части или странички wordpress

Сегодня моя коротенькая статейка посвящена тем, которые пишут ёмкие и интересные посты или статьи, да и ко всему этому заботятся о посетителях своего блога.

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

Вот мы сегодня и реализуем симпатичнейшую мечту перелистывания страниц на вашем сайте!

Как многие, наверное, подозревали, касаясь этой темы, что, мол, сама установка выльется в сложнейшую правку кода или даже наигрузнейший плагин придётся загвАздырить к себе в блог, – а от этого и тянули с этим штрихом юзабилити. Но я вас разочарую: всё достаточно просто и доступно!

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

<!--nextpage-->

…но его кнопки нет в редакторе wordpress (подписывайтесь, я скоро буду рассказывать, как сделать для него кнопочку), и не только для него…  А пока, думаю, будет интересно, взгляните: Добавляем свои кнопки в визуальный редактор WordPress TinyMCE

Пока же вам предстоит вручную прописывать его в нужном месте вашего текста.

Но не забывайте: тег вносится только в редакторе HTML

Значит, работаем!

Открывайте ваш файловый менеджер… и немного подредактируем код шаблона.

Я вам покажу два варианта:

1й – простой.

Нам потребуется файл post-single.php (в основном этот файл используется в шаблонах) или post.php – у кого-то может быть и ной, а значит вы уже знаете что именно следует открыть. Главное ищите тот, который выводит отдельную информативную страничку. В нашем случае single как раз и говорит о том, что именно этот документ и отвечает за вывод отдельно взятой статьи со всеми её примочками.

Когда откроете документ, ближе к его финалу отыщите строку функции или кода (работающего на вывод контента):

the_content('');

И сразу же после этой строчки пропишите другую: (это для тех, у которых совсем простенький шаблон)

<?php wp_link_pages('before=Страница: '); ?>

Затем, добавленный вами код можно обернуть в div-класс css, чтобы  эти кнопочки подогнать под нужную вам цветовую стилистику сайта. Как это делается, смотрите ниже.

Способ 2: сложнее чуть)

У кого-то в шаблоне может быть и так:

Неплохое начало!

<?php
                the_content('');
                wp_link_pages( array( 'before' => '<p><strong>' . __( 'Pages:', 'themater' ) . '</strong>', 'after' => '</p>' ) );
            
            ?>

Среди прочего рассмотрите наш упомянутый выше кусочек wp_link_pages.

Ну и теперь подредактируем немного этот php код.

У нас получится так:

<?php
                the_content('');
                wp_link_pages( array( 'before' => '<div class="lists"><p>' . __( 'Следующая страничка:', 'themater' ) . '', 'after' => '</p></div>' ) );
           ?>

Можно просто перекопировать и добавить этот код к себе на сайт. Но пред этим присмотритесь повнимательнее…

<?php – старт php. Чуть ниже

…наш упомянутый выше кусочек кода wp_link_pages – далее в строке функциональная обработка… и задачи стилистики…

…тег  ?> финал php.

обратите внимание: здесь я уже наши будущие кнопочки обернул в div class. Т.е у вас уже будет готовый настроенный примерный селектор – вам только останется эту мою вариацию подстроить под эстетику собственного блога.

Но коли что-то не получится, конечно же, смело спрашивайте в комментариях. С удовольствием помогу.

Ну ладно, вот стиль CSS для вашей листалки страничек. А как это получится ?? примера ради взгляните у меня на сайте

.lists{
font-weight:bold; /*выделение – жирный шрифт*/
color:#267A80; /*цвет шрифта*/
margin:20px 0px 0px 90px; /*расположение кнопок перелистывания на листе страницы сайта*/
font-size:22px; /*размер текста*/
font-family:Monotype Corsiva;/*имя шрифта*/
font-style:italic;/*наклонный текст*/
}

Прописывайте его в финал своего файла стилей style.css (или в организованное место документа – разницы нет, главное чтобы было вам удобно ориентироваться) – и готово дело.
Обновляйте вашу экспериментальную страничку и оценивайте выполненную работу.

Естественно, все свойства меняйте на нужное лично вам оформление стилистики.

Online консультация по настройкам и созданию сайтов на WordPress