Май
14
169

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

Rich Text Excerpts — полноценный визуальный редактор для анонсов постов и записей WordPress сайта. Сможете легко оформить текст отрывка без знания HTML-тегов.

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

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

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

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

комментариев 169 к статье “Ссылка читать далее в 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, спасибо большое за подсказку! Действительно не заметил)

  • Dakka   22.06.2017

    Добрый день! Помогите пожалуйста!? хочу перевести read more на трех языках (русский,казахский,английский) чтоб когда добавляю новость на казахском чтоб выходила на казахском, новость на русском чтоб на русском показывало и на английском также. А то я хочу добавить новость на казахском или на русском у меня все время выходит read more!

  • Tod   22.06.2017

    Dakka, если у вас на сайте реализована многоязычность с переключением языков, то данные переводы должны подхватываться автоамтически. Тут нужно копать в сторону локализации, посмотреть плагин плагин WPML и похожие.

    Если вы хотите просто менять отображение «читать далее» в зависимости от языка текста, то это немного странно. Хотя теоретически можно добавить в замтеку пользовательские поля (Custom Field) вручную или через плагины, а потом в шаблоне добавить условие IF указан язык_новости1 = выводить такой вариант текста, ElseIf второй — другой текст и т.п. Но опять же это выглядит как-то странно без общей локализации сайта.

  • Елена   22.11.2019

    Благодарочка вам за полезную статью. Недавно создала свой блог, и уже вовсю наполняю статьями. В кодах совершенно не шарю. Но с первого раза всё получилось Убрала прокрутку и якорь. Чудненько)

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


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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