студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: В теме: Без плагинов
студия занимательная МИХАЛИКА

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

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

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

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


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

 

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

 

<!--nextpage-->

 

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

 

 

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

 

 

 

 

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

 

 

 

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

 

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

 

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

 

 

— простой.

 

Нам потребуется файл 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 (или в организованное место документа — разницы нет, главное чтобы было вам удобно ориентироваться) — и готово дело.
Обновляйте вашу экспериментальную страничку и оценивайте выполненную работу.

 

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

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *