Функция "читать далее" после определённого количества слов
Здравствуйте. Как сделать так, чтобы там, где я пометил красным, появлялась ссылка «читать далее»? Т.е как установить лимит слов?
Как правильно заметил @AndreyFedorov , обрезку традиционно логично делают на стороне сервера.
Но если очень хочется, то можно обрезать по словам и на клиенте с помощью javascript:
Но обрезать по количеству слов не всегда уместно, ведь в зависимости от жанра текста в нём могут попадаться слова разной длины, потому результат не всегда предсказуем. Потому на практике чаще обрезают по количеству символов, т.к. символы имеют приблизительно одинаковую ширину и, соответственно, разные тексты тоже будут иметь приблизительно одинаковую ширину:
Ну а если задача стоит вроде «текст должен занимать заданный контейнер, не больше и не меньше», тогда можно скрыть часть текста с помощью css:
Ссылка читать далее в WordPress (тег read more)
Раньше в этом и других блогах я использовал полное отображение текстов постов на главной и в архивах. Однако с точки зрения SEO и юзабилити — это не лучший выбор. Дабы избавиться от дублирующего контента и сэкономить немного места на странице было принято решение сделать ссылки читать далее или (как их еще называют) тег more. В данной статье расскажу все, что знаю об этой функции.
Сейчас отображение записей с тегом more можно найти в большинстве современных WordPress шаблонов, хотя это зависит от дизайна вашего сайта. Чаще всего данная реализация встречается в журнальных (magazine) темах, где используется множество информационных блоков с краткими анонсами новостей. Также похожая стилистика характера для блоггинга. Плюсы очевидны — вы можете разместить больше постов на странице, а пользователю не придется прокручивать много лишнего текста.
Как сделать читать далее в WordPress
Реализация механизма read more в WordPress, по сути, состоит из двух частей:
- 1) отображения краткого анонса заметки;
- 2) ссылки читать далее.
Вторая деталь, в принципе, не обязательна, т.к. все равно пользователь может перейти на полный текст поста, кликнув по его заголовку. В некоторых шаблонах (тех же magazine) дабы сэкономить место на странице, авторы макетов специально могут убрать more ссылки.
Отображение анонса заметки реализуется 2-мя методами:
- с помощью функции the_content() + добавления ссылки читать далее.
- с использованием функции the_excerpt() вместо the_content().
Если рассказывать вкратце, то в WordPress функция the_content выполняет отображение всего текста поста с сохранением форматирования. Именно ее вы можете найти в файле шаблона single.php (на страницах записей). Если же в текстовом редакторе для конкретного поста добавить ссылку читать далее (quicktag), то система спрячет часть текста, отобразив лишь анонс. С функцией the_excerpt все куда проще — она сразу показывает анонс заметки без форматирования.
1. Добавление тега more в WordPress редакторе
Чтобы вывести в блоге только часть поста вы должны при его создании в текстовом редакторе нажать соответствующую кнопку. Она добавит ссылку читать далее в WordPress статье.
Если вы работаете в режиме HTML, то там также есть подобная кнопка либо можно просто написать тег <!—more—> в нужном вам месте. Кстати, хотел заметить, что ссылку разрыва «читать далее» в тексте вам не обязательно ставить в конце абзаца, можно добавить после любого слова. При этом учтите, что тег нужно писать именно слитно.
2. Вставка read more link в WordPress шаблоне
Теперь немного про использование тега more в шаблоне и, собственно, каким образом его можно выводить на вашем сайте. Для этой задачи вы можете применять функции the_content или the_excerpt. Искать их нужно в тех файлах макета, где задается отображение списка постов блога: главная (index.php), архивы (archive.php), разделы категорий (category.php) и т.п.
Функция the_content осуществляет отображение полного текста поста. Вывод анонса происходит, если в текстовом редакторе поставили read more. Ее синтаксис следующий.
<?php the_content( $more_link_text, $strip_teaser, $more_file ); ?>
- $more_link_text – текст для ссылки читать далее, по умолчанию она выглядит как «(more…)» или на русском «(далее…)».
- $strip_teaser – должен ли отображаться текст до WordPress тега more либо скрываться, функция принимает значение TRUE (прячется) или FALSE (отображается). По умолчанию он показывается.
- $more_file – на какой файл указывает тег more (сейчас написано, что не используется).
Дальше несколько практических примеров, а то не все может быть понятно. Фраза «далее» по умолчанию смотрится немного убого, давайте рассмотрим как поменять read more на текст «Читать далее»:
<?php the_content(‘Читать далее. ‘); ?>
Более того, вы можете изменить read more добавив в текст фразы заголовок поста (+ допускается HTML форматирование). Возможно, такая ссылка понравится поисковикам чуть больше:
<?php the_content(‘<span далее</span> ‘ . the_title(», », false)); ?>
Если мы вовсе хотим убрать читать далее, то нужно оставить поле параметров функции пустым:
Функция the_excerpt не содержит вообще никаких настроек и просто выводит анонс заметки (без форматирования). Чтобы сделать ссылку читать далее после текста можно добавить следующий код под ней:
Здесь, как видите, никакой «связи» с WordPress тегом more нет, — просто выводится линк на текущий пост с нужным вам текстом. Этот же прием можно использовать с функцией the_content (без параметров), когда вы хотите расположить ссылку читать далее не сразу после текста, а в отдельном блоке, например, для реализации нестандартного дизайна кнопки.
Хаки для ссылки читать далее в вордпресс
На официальном сайте wordpress.org можно найти парочку интересных хаков по функциям the_content и the_excerpt, которые пригодятся в работе.
Убираем прокрутку для more link
По умолчанию при переходе на страницу с полным тектом заметки осуществляется прокрутка экрана до позиции после ссылки читать далее. При этом сам линк содержит дополнительный якорь по типу #more-555. Всего этого можно избежать, если добавить в файл functions.php такой код:
function remove_more_link_scroll( $link ) < $link = preg_replace( '|#more-[0-9]+|', '', $link ); return $link; >add_filter( ‘the_content_more_link’, ‘remove_more_link_scroll’ );
Изменение ссылки читать далее
Самый простой метод изменить читать далее в WordPress — это использовать базовый параметр $more_link_text в функции the_content. Тем не менее, вы можете полностью переопределить формат данной ссылки. Нужный для этого код в functions.php:
С его помощью вы, кстати, заодно избавитесь и от прокрутки (с якорем #more), т.к. ссылка создается через get_permalink.
Кнопка читать далее в WordPress
Чтобы сделать кнопку читать далее нужно использовать соответствующие CSS стили. По умолчанию функция the_content добавляет в тег А специальный класс Поэтому вам требуется лишь прописать в style.css нужный код. В данном блоге, к примеру, используется такой:
Первое правило задает размеры, отступы кнопки, тогда как во втором содержится ссылка на картинку-фон readmore.jpg. Для понимания кода нужно, конечно, хотя бы немного разбираться в CSS.
Параметры анонса для функции the_excerpt
Если вы на своем сайте используете функцию отображения анонсов постов the_excerpt, то следующие хаки могут вам пригодиться. Во-первых, можете поменять количество отображаемых символов (по умолчанию = 55).
function wpdocs_custom_excerpt_length( $length ) < return 70; >add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 );
Во-вторых, допускается замена базового «окончания» текста анонса символами […] на свой вариант (это не ссылка):
function wpdocs_excerpt_more( $more ) < return '. >>'; >add_filter( ‘excerpt_more’, ‘wpdocs_excerpt_more’ );
Добавляем ссылку читать далее для the_excerpt
Чуть выше, при описании функции the_excerpt, я привел пример кода, который позволяет разместить ссылку на пост после анонса. Эту же фишку можно реализовать и через хак в functions.php:
Плагины для more в WordPress
Для кнопки читать далее в WordPress репозитории можно найти парочку полезных модулей под определенные задачи. Я сталкивался с двумя из них:
Плагин Page Links To — позволяет сделать перенаправление поста блога по адресу, отличному от значения текущей записи. По умолчанию система WP отображает анонсы публикации в хронологическом порядке, а при клике по их заголовкам или ссылке читать далее переходит на страницу с полным текстом конкретной заметки. Однако после активации модуля в админке появится новое поле, где вы сможете указать свой линк для перехода. При этом устанавливается 301 редирект (допускается выбор 302 Moved Temporarily). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.
Rich Text Excerpts — полноценный визуальный редактор для анонсов постов и записей WordPress сайта. Сможете легко оформить текст отрывка без знания HTML-тегов.
Advanced Excerpt — еще один wordpress плагин для читать далее. Он позволяет настроить некоторые параметры отображения анонсов постов в блоге без необходимости править файлы шаблона. Например, вы можете указать количество слов / символов в превью, переопределить базовый вывод анонса, добавить отображение тега more, если его нет, и т.п.
Если у вас еще остались какие-то вопросы по read more в WordPress, пишите в комментариях, — будем их разбирать.
Понравился пост? Подпишись на обновления блога по 
RSS, 
Email или 
twitter!
Оцените статью:
Кнопка Читать далее для Blogspot
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок 
Как создать кнопку read more
- Напомню, что отображаемый текст ссылки вы можете заменить во вкладке “Дизайн” (если захотите, чтобы ваша ссылка Далее превратилась в “вся статья целиком”, “читать полностью”…), измените элемент страницы “Сообщение блога” и пропишите желаемый текст ссылки в графе “Текст ссылки на Страницу сообщения”:
Теперь рассмотрим, как заменить ссылку “далее” (“читать далее”, “more”, read more” и т.п.) на кнопку Далее. - Админка Blogger > Дизайн > Изменить HTML .
- Теперь активируйте “Расширить шаблон виджета” .
- Теперь найдите код ]]></b:skin> , нажав Ctrl + F
- Сейчас как раз перед этим кодом, вставьте следующий код.
Просмотрите блог после изменений, если у вас получилась кнопка Далее такого вида 
, то все сделано правильно, и вы можете сохранять шаблон.
Эта кнопка может не подходить под дизайн вашего блога. В этом случае, вы можете найти другую кнопку в интернете или нарисовать простую кнопку в любом редакторе. Далее берем ссылку на изображение и заменяем код, выделенный желтым. Еще одно изменение, которое вы должны будете обязательно провести, чтобы кнопка отображалась корректно – это проставить значение ширины кнопки в пикселях (выделено оранжевым). Цвет ссылки на кнопке выделен зеленым, его вы тоже можете изменить, выравнивание кнопки – float (right – справа, left – слева), font-size – размер текста ссылки, padding-left – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.
Readmore.js — плагин скрывающий длинный текст
Readmore.js — плагин с помощью которого скрывается часть текста при условии превышения заданной длины. После отображаемого текста размещается ссылка Читать далее , при нажатии на которую разворачивается весь текст. После полностью развернутого текста появляется ссылка Скрыть , при нажатии на которую текст снова сворачивается.
Подключение скрипта к сайту
В материале или HTML-модуле необходимо перейти в режим просмотра исходного кода и в самом конце вставить код подключения и вызова скрипта:
HTML код
Рассмотрим пример на основе ниже предложенного кода.
Итоговый результат
Цените каждый миг и каждый час
за тайный смысл угаснувших мгновений,
быть может, в них горят еще поленья
страданий той души, что молится о вас,
души, что вам готова всё простить,
всё то, что было сделано и будет,
и в океане одиноких судеб
до дна за ваше счастье будет пить!
В данном примере для вывода используется тег section , при желании и необходимости его можно заменить, например, на тег article .