Май

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

narek 31.12.2013
когда нажимаю читать далее то открывается страница и в конце url ест это например для конкретного стата url.html#more-302 и страница открывается то место где написан тег море это не удобна скажите пожалуйста как можно исправит
Tod 02.01.2014
narek, можно использовать код, приведенный в самом конце статьи.
veloman 15.01.2014
Отлично написано, много где искал, но у вас все ясно и просто, Спасибо
DENWER-BR 13.03.2014
Спасибо!
Сергей 31.12.2014
У меня много гиперссылок на первой странице сайта, и никак не могу их спрятать под тегом далее?
Tod 31.12.2014
Сергей, у вас несколько иной формат сайта, там тег more не поможет.
marki3 03.01.2015
Как сделать, чтобы при нажатии на ссылку Читать далее.. полный текст открывался в новом окне
Tod 03.01.2015
marki3, использовать последний пример кода, где добавить параметр target="_blank"
Евгений 08.01.2015
Спасибо тебе автор. мучался часа два и решил оставит также, но твоя статья мне очень помогла.
Antonio 13.04.2015
Спасибо, искал правда немного другое, однако пригодится для общего развития :-)
Ильдар 30.06.2015
Как добавить тег Далее на другие страницы, кроме главной ?
Tod 30.06.2015
Ильдар, нужно добавить код вывода тега в файлы шаблона archive.php для страниц категорий, тегов и архива. Может быть что отображение страниц архива задано в index.php, тогда нужно добавить код для тега Далее добавить в этот шаблон.
Михаил 03.08.2015
Можно ли в тег more вставить ссылку на другую страницу сайта и повлияет ли это на индексацию статьи с таким тегом ? Для чего это нужно — долго объяснять :)
Tod 03.08.2015
Михаил, если нужно поставить ссылку на тег more, то для этих целей можно использовать плагин Page Links To. В этой статье подробно все рассказано.
Михаил 03.08.2015
А текст статьи после тега more с такой ссылкой проиндексируется ?
Tod 03.08.2015
Михаил, в данном случае плагин создает редирект (перенаправление) на другую страницу, поэтому поисковые системы будут индексировать именно ту новую страницу. Вообще сложно понять какая именно функциональность вам нужна, возможно, следует поискать другие варианты решения задачи.
Михаил 03.08.2015
В том и фишка , что пользователь не должен видеть текст статьи , но она должна быть проиндексирована.
Нет , я не клоакинг подразумеваю Это другое. Но связано с дорами.Вот и думаю как лучше сделать.
Tod 03.08.2015
Михаил, тогда возможно нужно искать плагины скрытия текста от пользователя по типу Sociallocker и тому подобные. Кроме социального замка других не смотрел, но должны быть.
Михаил 03.08.2015
Спасибо , Tod , возможно , это то , что нужно. Буду искать в этом направлении :)
Денис 19.09.2015
Большое спасибо, именно эта статья мне помогла. Я замучался биться и искать где эта кнопка More… прописана, оказывается надо пустые кавычки поставить. Другие мануалы меня в functions.php отправляли.
Владлена 07.01.2016
Здравствуйте. На сайте для каждой страницы используется свой шаблон (добавляли вручную).
Т.е. почти все страницы из меню (слева) — это самостоятельные страницы записей, на которых выводятся записи какой-то определённой рубрики.

Вопрос вот в чем.
На примере Главной страницы: about-smart.ru

В принципе выглядит всё так, как и ожидалось. Тег далее устанавливается и отображается правильно. НО
Вот ссылка этого тега далее ведёт неизвестно куда.

Если нажать на любой записи «Читать далее» — полный текст либо не раскрывается, либо вообще ошибка выскакивает. Как сделать так, чтобы ссылка тега вела ну или на полную запись….или полный текст после нажатия отображался тут же на этой же странице?

Спасибо!!!
Tod 07.01.2016
Владлена, ну тут ошибка в коде шаблона — если кто-то вам делал сайт, то скажите пусть исправляют. Если вы сами редактировали, то как вариант можно перезаписать файл шаблона single.php с оригинальной темы и снова попытаться его подправить. По умолчанию ссылка «Читать далее» ведет на полную запись.
Хотя вообще шаблон какой-то странный у вас, не могу понять какие элементы являются записями блога, какие категориями. Можете установить базовый шаблон вордпресс и проверить что все переходы на полный текст статьи работают. Проблема/ошибка в вашем макете.
serg 17.01.2016
Подскажите в каком файле это лежит?
Tod 18.01.2016
Serg, напишите свой вопрос более подробно. Не совсем понятно о чем речь.
Марина 04.02.2016
Отличная статья! Как раз искала про «читать далее». Скажите, вот у меня на сайте статьи оформлены в виде анонса, но записать «читать далее» некрасиво смотрится, то есть в одной статье она стоит слева под текстом, а в другой посередине. Получается некрасиво.
Tod 05.02.2016
Марина, вам пригодится последний пример кода в статье. С его помощью сможете выводить ссылку на пост отдельно и задавать ей оформление какое заходите. Только при этом нужно будет использовать пустую функцию the_content() или the_excerpt().
Марина 05.02.2016
Подскажите пожалуйста куда мне нужно вставить последнюю ссылку в редакторе?
и как мне задать функцию the_content() или the_excerpt()
Tod 06.02.2016
Марина, функции the_content() или the_excerpt() скорее всего уже имеются в вашем шаблоне. Макеты бывают разные, обычно главная находится в файле index.php или home.php, а архивы в archive.php. Код вывода ссылки добавляется после анонса, выводимого the_excerpt. К сожалению, все макеты разные и советовать абстрактно в комментариях куда конкретно вставлять код я не могу.
Можете попробовать разные варианты вставки и посмотреть что будет, но обязательно сохраните исходный код файлов на компьютер чтобы смогли восстановить, если что-то пойдет не так.
Алексей 13.04.2016
У меня такая ситуация, когда на своём блоге ставлю тег далее, нажимаю на далее, а у меня переходит на страницу опять с тегом далее, что делать?
Tod 14.04.2016
Алексей, нужно проверить файл шаблона single.php для вывода текста статьи там должна использоваться функция the_content вместо the_excerpt. Совет не универсальный, к сожалению, в вашем шаблоне может быть другая проблема.