Май

Ссылка читать далее в 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 class="moretext">Читать далее</span> ' . the_title('', '', false)); ?>

Если мы вовсе хотим убрать читать далее, то нужно оставить поле параметров функции пустым:

<?php the_content(' '); ?>

Функция the_excerpt не содержит вообще никаких настроек и просто выводит анонс заметки (без форматирования). Чтобы сделать ссылку читать далее после текста можно добавить следующий код под ней:

<div class="morelink">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" >Читать далее...</a>
</div>

Здесь, как видите, никакой «связи» с 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:

add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>';
}

С его помощью вы, кстати, заодно избавитесь и от прокрутки (с якорем #more), т.к. ссылка создается через get_permalink.

Кнопка читать далее в WordPress

Чтобы сделать кнопку читать далее нужно использовать соответствующие CSS стили. По умолчанию функция the_content добавляет в тег А специальный класс class=»more-link». Поэтому вам требуется лишь прописать в style.css нужный код. В данном блоге, к примеру, используется такой:

a.more-link {
	display:block;
	width:151px;
	height:24px;
	padding-left:10px;
	clear:both;
	border:none;
	line-height:22px;
	margin-top:10px;
	font-size:12px;
}
a.more-link {
	color:#FFF;
	background:url(images/readmore.jpg) 0 0 no-repeat;
}

Первое правило задает размеры, отступы кнопки, тогда как во втором содержится ссылка на картинку-фон 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:

function new_excerpt_more($more) {
       global $post;
	return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Читать статью полностью...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Плагины для more в WordPress

Для кнопки читать далее в WordPress репозитории можно найти парочку полезных модулей под определенные задачи. Я сталкивался с двумя из них:

Плагин Page Links To — позволяет сделать перенаправление поста блога по адресу, отличному от значения текущей записи. По умолчанию система WP отображает анонсы публикации в хронологическом порядке, а при клике по их заголовкам или ссылке читать далее переходит на страницу с полным текстом конкретной заметки. Однако после активации модуля в админке появится новое поле, где вы сможете указать свой линк для перехода. При этом устанавливается 301 редирект (допускается выбор 302 Moved Temporarily). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.

Rich Text Excerpts — полноценный визуальный редактор для анонсов постов и записей WordPress сайта. Сможете легко оформить текст отрывка без знания HTML-тегов.

Advanced Excerpt — еще один wordpress плагин для читать далее. Он позволяет настроить некоторые параметры отображения анонсов постов в блоге без необходимости править файлы шаблона. Например, вы можете указать количество слов / символов в превью, переопределить базовый вывод анонса, добавить отображение тега more, если его нет, и т.п.

Если у вас еще остались какие-то вопросы по read more в WordPress, пишите в комментариях, — будем их разбирать.

Оцените статью:

(голосов - 19, средний балл: 5,16 из 7)

Загрузка...

Категории: Возможности; Начинающим;

Теги: вывод постов, правка шаблона, сниппеты, улучшаем блог, юзабилити.

комментариев 169 к статье “Ссылка читать далее в WordPress (тег read more)”

← Ранее 1 2 3 4 … 6 Далее →

NnpctO 20.10.2010
В моем блоге в админ панели в редакторе есть тэк more, но когда я его устанавливаю и текст просто сокращается но кнопка читать далее не появляется а без этого тэга текст после каждых 500 символов помечается так […] Может это дело в шаблоне? Я прочитал ваш пост но коды php которые вы описали в моем редакторе я не нашел что делать? Мне так не хочется менять шаблон.
Tod 20.10.2010
NnpctO, открывать шаблон и править файл index.php, где находится функция the_content. Кстати, судя по всему. там может быть указана функция the_excerpt, которую нужно занимать на the_content как показано в примере в статье выше.
strikestar 26.10.2010
Скажите, а почему у меня ссылка читать далее приписывает в конце: #more-221

Тоесть она ведет не на прямую статью, а через #more-221?
Tod 27.10.2010
strikestar, такой принцип работы функции, потому и отображает с #more-221. Чтобы от этого избавиться используем пустой the_content(») в шаблоне а «читать далее» выводим с помощью последнего примера кода, приведенного в статье.
strikestar 27.10.2010
А понятно, спасибо
upmodo 21.11.2010
Я думаю вообще отказаться от ссылки Читать далее, поскольку она дублирует название статьи. По-моему в короткой новости вполне достаточно ссылки названия статьи, а также изображения, при нажатии на которое читатель попадает на полную статью.
Tod 21.11.2010
upmodo, вполне резонно, иногда я тоже удаляю «читать далее», если ссылка обычная никак не оформлена, в некоторых шаблонах она просто красиво сделана, грех удалять.
MIU 22.11.2010
Дборый день!
В моем шаблоне вордпресс строка для «читать далее» следующая:
Пока делаю сайт на локальном хосте. При попытке перейти по ссылке «читать далее» я попадаю не на всю запись, а на служебную страницу хоста, где говорится, что у меня нет разрешения для доступа к записи.
В чем может быть причина проблемы?
MIU 22.11.2010
Решение проблемы найдено: убран / , который закрывал category в пункте админки вордпресс «постоянные ссылки».
310 07.12.2010
Подскажите пожалуйста, тег more работает только на главной странице на остальных он не убирает материал под кат отабражает его полностью, в чем причина?
Tod 07.12.2010
310, что это за «остальные страницы»? Если архив, то нужно глянуть чтобы в index.php и archives.php одинаково выводились посты, может там задано чтобы весь он отображался независимо от more.
Ильнар 18.12.2010
когда вставляю этот тэг в редакторе он появляется. а когда обновляю и захожу на нужную страницу, то текст выходит полностью. в чем проблема?
Сергей 04.01.2011
Читать далее — применим только к разделу Записи, а как установить к примеру на ново созданной странице? Пробовал, не проходит стандартный вариант,то есть при нажатии на more ,ничего не происходит.Заранее благодарен за любой ответ.
Tod 04.01.2011
Сергей, нужно разбираться в шаблоне почему не работает, но вообще я по-моему и для страниц more успешно использовал, хотя оно больше полезное для записей все же.
MG 11.03.2011
Спасибо за статью! В моём шаблоне страница поиска выводит куски постов без форматирования, в которых не предусмотрено никаких ссылок типа «читать далее», поэтому ряд посетителей вообще не догадывается нажать на заголовок поста… Можно ли вставить хоть какое-то предложение перейти к полному варианту текста? Заранее благодарен за ответ!
Tod 12.03.2011
MG, смотрите последний код в статье — его можно использовать для отображения ссылки читать далее сразу после текста статьи.
MG 14.03.2011
Спасибо! Попробую!
WebNetc 29.04.2011
Одного не понял.
Конечно последний случай понятен, но ведь он действует только в том случае, если ты хочешь вывести новость полностью. Разве не так? Тэг more обрезает статью. В этом её плюс. Если бы можно было как-то закрыть его, чтобы не было повторяющихся записей, о которых говорилось в нач. комментах, то было бы супер.
Tod 29.04.2011
WebNetc, что-то много чего «намешано» в вопросе. Если выводить через the_content(), то more работает и обрезает статью, что и нужно было. Последние пример для случаев когда ссылка на статью должна находится в другом DIV по дизайну или еще что-то типа этого, по умолчанию выводится сразу после «анонса статьи».
seo-woman 07.05.2011
Спасибо за статью! Очень помогла.
Елена 10.05.2011
Большое спасибо за статью. Очень здорово она мне помогла. Я пока еще «чайник» в оформлении блога, но только благодаря Вашему объяснению, я исправила «больше>» на «Далее…» Оказывается в шаблоне было прописано the_content(__(‘more»’,’templatelite’)); Спасибо большое!
Алексей 01.06.2011
Спасибо, интересная статья.
SEOактив 24.06.2011
Благодарю. В самых ранних версиях еще помню надо было expert использовать в настройках для этого.
Владимир 74 21.08.2011
За статью огромное спасибо! Уже месяц не могу научиться пользоваться редактором и перелинковкой. Сегодня часть знаний пополнил! А то блог открыл и заморозил: очень многое ещё не понимаю. Кстати-Ваша статья в топе,поздравляю. Тод, и ещё спасибо,что ссылки на стороннии ресурсы не удаляете. Я для себя нашёл форум по вордпрессу и сайт по PHP из коментов.
Василий 26.08.2011
Вопрос следующий: при использовании тега «more» визуально или в HTML-коде все записи имеются, однако при переходе на действующую страницу — никаких изменений нет, т.е. текс статьи не изменяется. Подскажите — в чём может быть загвоздка?
Заранее благодарен.
Tod 27.08.2011
Василий, я бы смотрел в сторону редактора, если используются сторонние плагины. У себя ставил плагин TinyMCE Advanced проблем не было. А так в общем, если честно, сложно что-то посоветовать.
Pavel Drum 05.09.2011
Привет. Подскажи плз, как полностью убрать показ ссылки — more? У меня отображается долбанная ссылка в виде — (далее)
Tod 05.09.2011
Pavel Drum, чтобы читать далее не было нужно в шаблоне index.php использовать функцию вывода поста без параметров — the_content(‘ ‘);
Pavel Drum 05.09.2011
the_content(‘ ‘); у меня и используется. но вот чет нифига (
Pavel Drum 05.09.2011
Опа. Спасибо. Оказывается одинарных скобок не было :-D