Сегодня моя коротенькая статейка посвящена тем, которые пишут ёмкие и интересные посты или статьи, да и ко всему этому заботятся о посетителях своего блога.
Конечно же, в этих случаях логично разбить длинные тексты на отдельные странички – и это будет с вашей авторской стороны правильным решением, ибо удобство читателя на страничках сайта наиважнейшая составляющая ведения блога.
Вот мы сегодня и реализуем симпатичнейшую мечту перелистывания страниц на вашем сайте!
Как многие, наверное, подозревали, касаясь этой темы, что, мол, сама установка выльется в сложнейшую правку кода или даже наигрузнейший плагин придётся загвАздырить к себе в блог, — а от этого и тянули с этим штрихом юзабилити. Но я вас разочарую: всё достаточно просто и доступно!
И после некоторых наших с вами манипуляций с документацией, у вас будет на сайте здоровская листалка страничек поста или длинной книги.
Итак: есть такой на свете тег
<!--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
mihalica.ru !
Доброго времени суток! А есть какое-то атоматизированное решение для разделения больших статей на страницы? Речь идет о книжном сайте. Например, как здесь
//knigindom.ru/read/?book=24499
Как сделать так же?
Здравствуйте!
Сделать, конечно же, можно. Код небольшой нужно написать, чтоб он (по настройкам) делил длинный текст на равные части.
За ответ спасибо. И какова цена такого кода?
да примерно около тысячи…
Около тысячи!!! То есть вы напишите код с помощью которого большие страницы будут разбиваться на определенное количество знаков (на каждой страничке). Без вставки дополнительного тэга !!! Ну и номерация страниц так же необходимо будет!!! А установка кода в шаблон сколько будет стоить? Или цена около тысячи за код и за настройку?
…Это потому что у меня где-то был такой код (давно подобной пагинацией не занимался), так что писать, возможно, не придётся. Поищу…
Однако поднастроить придётся… тот код разбивал текст автоматом, а это иногда получается невпопад…
У вас какая версия ВП?
Последняя. Стараюсь обновлять чаще, как выходит свежая. Посмотрите пожалуйста. Главное чтобы страницы разбивались на части и были номера страниц. Так как вручную это просто не реально делить на страницы!
Есть еще другой вариант: можно настроить по инструкции от ЛитРес.
Посмотрю с утра!..
и отпишусь…
Нашёл кое-что…
Пишите сюда или на почту, если будем делать…
Здравствуйте, подскажите, пожалуйста, как сделать такую навигацию в записи «Обзор Цены Характеристики Фото Видео» как на этом сайте … ?
Здравствуйте Дмитрий!
Сейчас посмотрю… отпишусь… (ссылку я убрал)
…выводится в зависимости от требований админа (и отображения на мобилах) — как обычное меню, обработанное тегами:
ul
…li
в div (id) классе.Ну и стилистикой css… конечно же.