Пост опубликован:

2016-10-28

вSEO-продвижение

Ссылка читать далее в WordPress (тег read more)

Блог про
wordpress и все, что с ним связано — возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Раньше в этом и других блогах я использовал полное отображение текстов постов на главной и в архивах. Однако с точки зрения SEO и юзабилити — это не лучший выбор. Дабы избавиться от дублирующего контента и сэкономить немного места на странице было принято решение сделать ссылки читать далее или (как их еще называют) тег more. В данной статье расскажу все, что знаю об этой функции.

Сейчас отображение записей с тегом more можно найти в большинстве современных WordPress шаблонов, хотя это зависит от дизайна вашего сайта. Чаще всего данная реализация встречается в журнальных (magazine) темах, где используется множество информационных блоков с краткими анонсами новостей. Также похожая стилистика характера для блоггинга. Плюсы очевидны — вы можете разместить больше постов на странице, а пользователю не придется прокручивать много лишнего текста.

Вторая деталь, в принципе, не обязательна, т.к. все равно пользователь может перейти на полный текст поста, кликнув по его заголовку. В некоторых шаблонах (тех же magazine) дабы сэкономить место на странице, авторы макетов специально могут убрать more ссылки.

Если рассказывать вкратце, то в WordPress функция the_content выполняет отображение всего текста поста с сохранением форматирования. Именно ее вы можете найти в файле шаблона single.php (на страницах записей). Если же в текстовом редакторе для конкретного поста добавить ссылку читать далее (quicktag), то система спрячет часть текста, отобразив лишь анонс. С функцией the_excerpt все куда проще — она сразу показывает анонс заметки без форматирования.

Чтобы вывести в блоге только часть поста вы должны при его создании в текстовом редакторе нажать соответствующую кнопку. Она добавит ссылку читать далее в WordPress статье.

Если вы работаете в режиме HTML, то там также есть подобная кнопка либо можно просто написать тег <!—more—> в нужном вам месте. Кстати, хотел заметить, что ссылку разрыва «читать далее» в тексте вам не обязательно ставить в конце абзаца, можно добавить после любого слова. При этом учтите, что тег нужно писать именно слитно.

Теперь немного про использование тега more в шаблоне и, собственно, каким образом его можно выводить на вашем сайте. Для этой задачи вы можете применять функции the_content или the_excerpt. Искать их нужно в тех файлах макета, где задается отображение списка постов блога: главная (index.php), архивы (archive.php), разделы категорий (category.php) и т.п.

Функция the_content осуществляет отображение полного текста поста. Вывод анонса происходит, если в текстовом редакторе поставили read more. Ее синтаксис следующий.

  • $more_link_text – текст для ссылки читать далее, по умолчанию она выглядит как «(more…)» или на русском «(далее…)».
  • $strip_teaser – должен ли отображаться текст до WordPress тега more либо скрываться, функция принимает значение TRUE (прячется) или FALSE (отображается). По умолчанию он показывается.
  • $more_file – на какой файл указывает тег more (сейчас написано, что не используется).

Дальше несколько практических примеров, а то не все может быть понятно. Фраза «далее» по умолчанию смотрится немного убого, давайте рассмотрим как поменять read more на текст «Читать далее»:

Более того, вы можете изменить read more добавив в текст фразы заголовок поста (+ допускается HTML форматирование). Возможно, такая ссылка понравится поисковикам чуть больше:

<?php the_content('<span class="moretext">Читать далее</span> ' . the_title('', '', false)); ?>

<?php the_content(‘<span class=»moretext»>Читать далее</span> ‘ . the_title(», », false)); ?>

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

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

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

Здесь, как видите, никакой «связи» с WordPress тегом more нет, — просто выводится линк на текущий пост с нужным вам текстом. Этот же прием можно использовать с функцией the_content (без параметров), когда вы хотите расположить ссылку читать далее не сразу после текста, а в отдельном блоке, например, для реализации нестандартного дизайна кнопки.

По умолчанию при переходе на страницу с полным тектом заметки осуществляется прокрутка экрана до позиции после ссылки читать далее. При этом сам линк содержит дополнительный якорь по типу #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' );

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>';
}

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>’; }

Чтобы сделать кнопку читать далее нужно использовать соответствующие 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)   no-repeat;
}

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, то следующие хаки могут вам пригодиться. Во-первых, можете поменять количество отображаемых символов (по умолчанию = 55).

function wpdocs_custom_excerpt_length( $length ) {
    return 70;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

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' );

function wpdocs_excerpt_more( $more ) { return ‘… >>’; } add_filter( ‘excerpt_more’, ‘wpdocs_excerpt_more’ );

Чуть выше, при описании функции 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');

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

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

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


  • Seregatakoi
      05.05.2016

    Sparkling Тема от Colorlib. при вставтке тега пост в ленте просто обрывается на тексте и никаких кнопок «далее» не появляется. а хотелось бы. seregatakoi.ru/page/3/ первая запись на этой странице к примеру. тупо обрывается на тексте, и читатель понятия не имеет, что есть продолжение. понятно, что если нажать на заголовок, то откроется статья полностью, но как об этом узнает читатель?


  • Tod
      05.05.2016

    Seregatakoi, если я правильн понял, то отображение этой страницы задается в файле шаблона index.php. Вывод анонса там задается через the_content, попробуйте добавить в функцию текст как показано в примере в статье. Можно добавить свою ссылку «читать далее» — расположите последний пример кода из поста после the_content. Только внимательно с открывающимися закрывающимися скобками для php кода. Если с кодом не можете разобраться, то гляньте модуль Advanced Excerpt.


  • lusie
      21.05.2016

    Добрый день,
    Подскажите, пож-та, как выводить первый пост категории без кнопки read more? Нужен аналог описания категории, как, например в джумле. В вордпрессе этого нет, поэтому приходится использовать для этого отдельный пост. Но кнопка Далее там совсем не нужна. Как избавиться? заранее спасибо.


  • Александр
      21.07.2016

    Круто, но не нашёл ответа на свой запрос, может не так задал… В общем, есть «Читать далее», я бы хотел рядом установить такую же кнопку, но с ссылкой на страницу «купить», как добавить?


  • Tod
      22.07.2016

    Александр, немного непонятна суть задачи. Данная ссылка ведет на полное отображение записи блога. Если делать товары в качестве этих записей, то можно менять «читать далее» на «купить», зачем тогда 2 кнопки. Если же речь идет о создании магазина, то тут нужно использовать woocommerce или другие похожие решения.


  • Tod
      22.07.2016

    Дмитрий, нужно посмотреть в шаблоне какая функция используется для вывода. Если the_content, то добавить внутрь нее какой-то текст как показано в статье. Если же the_excerpt, то можно придется добавлять кнопку опять же по примеру из поста. Внимательно посмотрите раздел заметки «Вставка read more link в WordPress шаблоне».


  • Елена
      24.09.2016

    Доброго времени суток, подскажите пожалуйста, при переходе читать далее появляется пустая страница с названием блога, а текст отсутствует, что делать?


  • Tod
      25.09.2016

    Елена, к сожалению, вопрос достаточно общий и вариантов почему ссылка не работает может быть несколько. Я бы глянул файлы index.php, archive.php (где выводится эта ссылка) + single.php (который, собственно, открывается при переходе). Можно попробовать сначала отключить все плагины, но думаю, проблема не в них. Ну, или подобрать другой шаблон, где все будет работать.


  • Tod
      21.10.2016

    Сергей, кнопка читать далее служит только для перехода на полную версию новости, в которой она не должна отображаться. Вам, по идее, нужно разбиение на сраницы и функция wp_link_pages. С ее помощью, думаю, можно реализовать, что вы задумали.


  • Arkanzas
      28.10.2016

    Хочу выразить огромную благодарность админу за код для удаления прокрутки more link (типа #more-555). Пару дней голову ломал как исправить этот ужас) вообщем спасибо, у меня все отлично теперь!


  • Nikolay
      13.11.2016

    Спасибо за статью. исправте кавычки (двойные/одинарные).
    иначе записи не выводятся: <?php the_content(‘Continue reading: ‘ . the_title(», », false)); ?>

  • Блог WordPress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

    Автор: