Май
14
166

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

читать далее wordpressРаньше в этом и других блогах я использовал полное отображение текстов постов на главной и в архивах. Однако с точки зрения 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 статье.

wordpress more

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

wordpress тег 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). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 16, средний балл: 5,25 из 7)
Loading ... Loading ...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , , .
Заработай на сайте
заработок в GoGetLinks

Комментариев - 166 к статье “Ссылка читать далее в WordPress (тег read 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? Нужен аналог описания категории, как, например в джумле. В вордпрессе этого нет, поэтому приходится использовать для этого отдельный пост. Но кнопка Далее там совсем не нужна. Как избавиться? заранее спасибо.

  • Tod   21.05.2016

    lusie, на самом деле в WP есть возможность добавлять описание категории — вот здесь можете почитать об этом.

  • lusie   21.05.2016

    Спасибо, почитаю.

  • Дмитрий   21.07.2016

    Вставляю тег , а на сайте нет ссылки»читать далее», просто разрыв текста

  • Александр   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 (который, собственно, открывается при переходе). Можно попробовать сначала отключить все плагины, но думаю, проблема не в них. Ну, или подобрать другой шаблон, где все будет работать.

  • Сергей   20.10.2016

    Подскажите, а можно по клику на «читать далее» переходить на другую страницу с полной версией этой же статьи?

  • 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)); ?>

  • Tod   14.11.2016

    Nikolay, спасибо большое за подсказку! Действительно не заметил)

Оставить комментарий


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

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

Последние посты
Облако тегов
Лучшее в категории
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Loading ... Loading ...
Друзья проекта
Последние новости