Май

Ссылка читать далее в 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 5 6 Далее →

Катя 09.09.2011
Спасибо, а то блондинко полдня убила, но так и не додумалась)
Олег 10.09.2011
Скажите пожалуйста! Не происходит ли у меня дублирования контента? В моих шаблонах the_content есть в index.php, single.php, page.php. А the_excerpt в archive.php. Скажите быть может нужно the_excerpt добавить и в index.php. А также у меня на станицах анонсов нет тега more, анонсы постов сокращены и в конце стоит лишь символ […] к тому же не являющийся ссылкой. Это нормально?
Tod 10.09.2011
Олег, дублирование контента для архивов понятие относительное, имхо, да часть текста повторяется но страница ведь по другому выглядит для категории т.к. там много разных заметок. the_content или the_excerpt особой разницы нет для дублирования, это скорее для внешнего вида блога сделано и случаев нужно вам more или нет. У меня например в блоге нет ни […], ни ссылок читать далее, просто заголовки постов — кто как хочет, так и делает, в принципе.
Олег 10.09.2011
Так скажите, как узнать есть ли на сайте дублированное или нет? И как все же избежать эту проблему?
Tod 12.09.2011
Олег, бытует мнение, что дублированный контент возникает, если не закрывать от индексации страницы тегов, категорий, архивов по месяцам. Закрыть их от индексации можно с помощью плагинов All in One SEO Pack или Platinum Seo Pack в настройках.
Олег 12.09.2011
Слышал о таком и еще необходимо внести коррективы в файл robots.txt, на запрет индексации роботами!
Tod 13.09.2011
Олег, с помощью настроек в плагинах на страницах указывается МЕТА тег запрещающий индексацию, это то же самое, что если ее сделать в robots.txt. То есть можно там, можно с помощью плагинов.
Олег 13.09.2011
Еще один вопрос. А если мы скроем полностью категории от индексации роботом, то он сможет найти посты, которые находятся в этих категориях? Если учесть, что у нас будет еще файл sitemap.xml , в котором будут ссылки именно на посты?
Tod 15.09.2011
Олег, через плагины установится значение МЕТА тега noindex follow, то есть индексировать не будет, проходить по ссылкам будет + sitemap тоже позволит найти посты.
Юрий 28.09.2011
Вопрос. Делаю все как положено, сокращаю текст, в HTML выводится . Но при просмотре сайта текст не сокращается. Подскажите, в чем дело? Я не могу сократить статьи, обидно.
Tod 29.09.2011
Юрий, нужно посмотреть в файлах шаблона index, archives как выводятся сообщения блога — там должна использоваться конструкция the_content дабы оно реагировало на тег more. Хотя, может быть, и проблема в чем-то еще, сложно однозначно сказать.
Рам 09.11.2011
Подскажите как запретить вывод анонса на главной для конкретной записи
Денис 27.11.2011
Здравствуйте! У меня такая проблема — установлена тема redbel и под каждой статьей появляется кнопка с надписью Read Page. Искал в инете, применял некоторые советы, но ничего не помогло. Вернул все как было. В настройках блога указано, чтобы статьи выводились полностью. При написании тегом more не пользуюсь. В чем тогда проблема и как это можно исправить?
Tod 27.11.2011
Денис, данная «штуковина» прописана в коде шаблона, советую в файле index.php поискать блок <div class="article-read-more"> и удалить его вместе с содержимым — там, по идее, и выводится читать далее.
Денис 28.11.2011
Помогло, благодарю! Только с виджетом «архив» что-то стало, как то коряво выглядит, а в админке вообще его нет в sidebar. Слетает, видимо недостаток темы. Как с этим бороться подскажете?
Tod 29.11.2011
Денис, тут нужно с самого начала все посмотреть в теме и аккуратно последовательно удалить. Возможно, и недостаток темы, а возможно ошибка из-за незакрытого div или лишнего и т.п. — вариантов может быть уйма, один вариант — самому разбираться.
Антон 24.01.2012
Здраствуйте! у меня проблема наоборот :)
Вот страница http://prostoberi.ru/?page_id=131
мне надо чтобы на ней весь тект статьи был целиком показан. Но у меня сейчас кнопка читать далее сама по себе вылезла и к тому же нажимая на нее статья не открываеться..
я еще новичек, подскажите пожалуйста что делать ))
Tod 25.01.2012
Антон, посмотрел на сайте, не совсем понял что и как там за проблема. Хотите убрать читать далее? в шаблоне для функции the_content просто укажите пустой параметр ‘ ‘ и все.
Антон 26.01.2012
Спасибо что уделили время)) Но проблему я решил, просто переставил тему на другую. Поэтому вы ничего и не заметили ))
cijman 27.01.2012
подскажите, а как сделать, что бы после нажатия на читать далее открывалась статья с самого начала, а не продолжение после morу
спасибо.
Tod 29.01.2012
cijman, чтобы сделать это наверняка используйте последний пример кода, указанный в статьей. Для the_content указываете пустой текстовый параметр, а ссылку выводите вручную.
Роман 04.04.2012
Как к анонсу поста, возле ссылки «Читать далее…» добавить еще одну ссылку, только уже на другой сайт? Чтобы кнопка вела на пост, а другая на другой сайт.
Внешний вид нужен тот же.
Tod 04.04.2012
Роман, нетривиальная какая-то задача, единственный простой и доступны вариант, как по мне, это использовать произвольные поля custom fields.
Мария 05.05.2012
Благодарю! Помогло!
Ангелина 23.05.2012
Здравствуйте!
У меня такая проблема на сайте
когда переходишь по ссылке читать далее, то открывается статья , а адрес у нее такой к примеру http://tanya.fundux.ru/travel/otpusknoe_vremya/#more-3788
причем постоянные ссылки у меня указаны и у всех страничек адрес на латинеце. Подскажите что делать?
Tod 23.05.2012
Ангелина, зашел на сайт, вроде бы все нормально, ссылки без more — вы уже исправили? в статье и комментариях уже говорилось о more.
Надежда 09.06.2012
Добрый день! Подскажите, когда я вставляю more у меня ничего не происходит. Не скрывается у меня часть текста, которую я хочу скрыть! Вы не подскажете ,с чем это может быть связано и как это исправить?
Tod 10.06.2012
Надежда, зайдите в файл index.php и посмотрите каким образом выводятся посты что там за функция используется, возможно, в ней указан параметр отображения всей записи.
DuraLex 28.06.2012
Я так понимаю, всё вышесказанное относится к блогам-сборкам, которые где-то хостятся у пользователей. ТАак что если у меня блог создан прямо на wordpress.com, все замечания про «внесите правки в *.php» не про меня?
Tod 29.06.2012
DuraLex, скорее всего, да, там по-моему можно править только css стили и файлы шаблона, до php не добраться.