Май

Ссылка читать далее в 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.07.2012
Когда используешь поиск по сайту, то выдает все равно это убогое [далее] , посоветуйте где можно поправить. В index.php, archive.php исправил, результата нет
Tod 09.07.2012
Виктор, для поиска используется файл search.php, полезно будет почитать статью улучшаем страницу с результатами поиска в wordpress по этой же теме.
Ольга 21.08.2012
не ставится тег читать далее, когда пишу статью в редакторе ставится, и в html — тоже прописывает
а когда заходу на страницу на сайте — все статьи отображаются полностью.
не пойму что нужно изменить?
сайт на вордпрессе 3.4.1
Tod 21.08.2012
Ольга, как я понял тег ставится, но просто не работает — это значит, что так настроено в шаблоне с помощью функции the_content или других. Это нужно разбираться в файлах index.php или archive.php (хотя если шаблон новый, то в других). В общем, конкретнее подсказать не смогу — надо искать проблему в шаблоне.
Владимир 17.09.2012
Здравствуйте. Помогите пожалуйста советом: Мне на сайте нужно, что бы рублики отображались каждая на собственной странице. Но с этим я вроде как разобрался :) (по-создавал в теме что-то типо news.php и копировал всё из index.php с некоторыми дополнениями). Однако появилась проблема: В статьях, опубликованных на этих странницах Отсутствует «Читать далее»! То есть на главной странице в этих же статьях «Читать далее» есть, а на тех страницах где нужно нет. :(

Вот такая вот печалька, буду рад принять любую помощь)

P.S.: Плюс ко всему, там же (на этих же, мноюсозданных страница) не отображается под статьями кнопки плагина Share Buttons :(
Tod 18.09.2012
Владимир, с копированием index.php сделали все правильно, но тогда теоретически эта кнопка должна быть. я бы еще посмотрел коды файлов home.php и archive.php — может там найдете ответ для решения этой задачи. Но вообще выводит ссылку читать далее функция the_content — в разных шаблона по разному все реализовано, поэтому я бы искал именно ее в файлах и потом уже экспериментировал.
Владимир 18.09.2012
Благодарю вас за ответ!) Решил проблему другим путём!) Понял, что зря всё это делал и выполнил задачу обычным созданием меню! :) Недостаток информации порой заставляет бегать по кругу :)
Алексей 16.10.2012
Блин! Спасибо Автору, выручил офигенно……
Denis Creative 30.11.2012
А подскажите, как вывести не просто первую фразу, а чтобы отображалась нужная конкретная фраза из поста в анонсе в категории?..
Tod 01.12.2012
Denis, для вывода нужной фразы я бы гуглил решение через «произвольные поля» custom fields — это может помочь.
Portal 11.01.2013
Отличный материал. Спасибо большое!
GadZZillA 20.01.2013
А в каком файле нужно помещать данный тег?
Tod 20.01.2013
GadZZillA, данный тег размещается не в файле, а в текстовом редакторе при написании поста.
SkyWay 10.02.2013
Здравствуйте. Разместил данный тег в своих статьях, всё хорошо работает. Но есть одно неприятное «но», при переходе по «Далее», открывается не начало поста, а с того места где этот тег вставлен, то есть чтобы увидеть начала поста надо пролистать вверх, код страницу получается: ?p=522#more-522 , хотя чтобы было нормально должен быть вида ?p=522. Подскажите как это поправить?
Tod 11.02.2013
SkyWay, для этого в функции the_content нужно оставить «пустые кавычки», а потом после нее добавить код, указанный в конце статьи. В таком случае ссылка будет без #more и следовательно вести на начало поста.
Елена 12.03.2013
Владимир 17.09.2012 задавал вопрос «В статьях, опубликованных на этих странницах Отсутствует «Читать далее»! То есть на главной странице в этих же статьях «Читать далее» есть, а на тех страницах где нужно нет. :( » . Так как решение вопроса для Владимира уже не актуально, то может быть кому-нибудь понадобится. Я решила это так: в файл archive.php после функции до закрывающего тега написала следующее
Проблема решена! Кстати, спасибо автору за статью!
Tod 12.03.2013
Елена, код, к сожалению не добавился) Нужно использовать:
<pre lang="html">…</pre>
Александр 31.03.2013
Подскажите пожалуйста
поставил тему (Sliding Doorа) в ней уже эта функция, а мне она не нужна, как сделать наоборот что бы при открытии рубрики открывалась вся рубрика без continue reading
Tod 31.03.2013
Александр, нужно оставить параметр пустым.
the_content('');
the_content('');
Александр 31.03.2013
Шаблон вложений attachment.php я уже здесь так сделал и не чего не изменилось
?>

» . __( ‘Pages:’, ‘slidingdoor’ ), ‘after’ => » ) ); ?>
но я так понял что надо изменить еще и здесь Функции темы (functions.php) а вот как не знаю
подскажите пожалуйста вот этот кусок
/**
* Returns a «Continue Reading» link for excerpts
*
* @since Sliding Door 1.0
* @return string «Continue Reading» link
*/
function slidingdoor_continue_reading_link() {
return ‘ ‘ . __( ‘Continue reading →’, ‘slidingdoor’ ) . ‘‘;
}

/**
* Replaces «[…]» (appended to automatically generated excerpts) with an ellipsis and slidingdoor_continue_reading_link().
*
* To override this in a child theme, remove the filter and add your own
* function tied to the excerpt_more filter hook.
*
* @since Sliding Door 1.0
* @return string An ellipsis
*/
function slidingdoor_auto_excerpt_more( $more ) {
return ‘ …’ . slidingdoor_continue_reading_link();
}
add_filter( ‘excerpt_more’, ‘slidingdoor_auto_excerpt_more’ );

/**
* Adds a pretty «Continue Reading» link to custom post excerpts.
*
* To override this link in a child theme, remove the filter and add your own
* function tied to the get_the_excerpt filter hook.
*
* @since Sliding Door 1.0
* @return string Excerpt with a pretty «Continue Reading» link
*/
function slidingdoor_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= slidingdoor_continue_reading_link();
}
return $output;
}
add_filter( ‘get_the_excerpt’, ‘slidingdoor_custom_excerpt_more’ );

/**
* Remove inline styles printed when the gallery shortcode is used.
*
* Galleries are styled by the theme in Sliding Door’s style.css.
*
* @since Sliding Door 1.0
* @return string The gallery style filter, with the styles themselves removed.
*/
function slidingdoor_remove_gallery_css( $css ) {
return preg_replace( «#(.*?)#s», », $css );
}
add_filter( ‘gallery_style’, ‘slidingdoor_remove_gallery_css’ );

if ( ! function_exists( ‘slidingdoor_comment’ ) ) :
василий 01.04.2013
А скажите не чего страшного нет в том что я только страницы заполняю .А записи и рубрики мне не нужны.Все только одни стр
Tod 02.04.2013
Василий, ничего страшного в этом нет, если у вас используются только статические страницы.
василий 02.04.2013
А вы не подскажите как сделать чтоб, я страницы делаю( у меня их уже много)И стр в верхем меню появляются ,и с права меню тоже поювляются Вот как сделать чтоб в верхнем меню не появлялись больше,а только в боковом меню.но чтоб в верхем меня осталось только 4-6стр ,а остальные стр их гдето 30 в боковом меню размещались.
Tod 03.04.2013
Василий, для решение вашей задачи нужно глянуть статью про меню в wordpress 3.0 — после этого создаете 3 разных меню для сайта и в каждое из них добавляете те пункты, которые вам нужны. Нужно будет найти и заменить базовые функции отображения меню в шаблоне или виджетах.
Сергей 10.04.2013
У меня в index.php нет <?php the_content
Везде где можно менял read more бесполезно.
В шаблоне 6 видов шаблонов для разных страниц.

Testimonials
News
Products
Slides
Portfolio
Gallery

Где искать подскажите, шаблон русифицирован.
Tod 11.04.2013
Сергей, ссылка читать далее может выводиться и просто в коде, не обязательно через the_content. Нужно просматривать файлы шаблона и искать ее, все это индивидуально поэтому общего совета кроме как «искать во всех файлах отображение ссылки» я дать не могу.
Сергей 11.04.2013
Спасибо за беспокойство. Нашел, при редактировании, или создании новой статьи, есть отдельно пункт где можно писать свою надпись. Я ее просто не заметил. Это особенность админки шаблона.
Елена 23.08.2013
У меня вдруг тег More стал устанавливаться сразу после первого слова в записи. Я его в редактировании переставляю после первого абзаца, но он упорно возвращается на место (после первого слова).
Не могу понять, что я сделала, почему он с сегодняшнего дня стал неправильно работать?
Заранее благодарна за помощь.
Tod 23.08.2013
Елена, сложно сказать в чем тут проблема. Очень похоже на какие-то «непонятки» с шаблоном — возможно, вы правили файл шаблона и допустили ошибку. Второй вариант — плагины, какой-то из них может вызывать глюк. Это надо разбираться.
Алексей 30.08.2013
Автору + давно искал кнопку как сделать с функцией читать далее, а то на некоторых шаблонах ее попросту нету