Май

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

Зоя Кузнецова 06.02.2010
Александр! Спасибо большое за информацию для чайников.

Я совершенно ничего не знаю об этих тегах.

И с удовольствием читаю такую конкретную информацию, то есть
о тегах на Word Press.

Расскажите, пожалуйста, обо всех.

Спасибо большое заранее.

С уважением
Зоя Кузнецова
Зоя Кузнецова 06.02.2010
Еще хочу спросить Вас.

Почему рядом с моим комментарием нет фото.

И как сделать это фото в комментариях.

Если есть возможность — ответьте!
Заранее благодарю

С уважением
Зоя Кузнецова
Andrew S. 06.02.2010
Интересная заметка :)
Позволю себе ответить Зои за автора: что бы вместо буквы G отображался ваш аватар, вам нужно зарегестрировать ваш e-mail на сайте gravatar.com, тогда при комментировании блогов связанных с этим сервисом, будет отображаться ваш аватар, а не тот, что идёт по умолчанию.
Sergeev 07.02.2010
Зоя Кузнецова, это называется Gravatar. Как-то давно писал об этом у себя в блоге: http://egorsergeev.ru/internet/gravatar-ili-kak-postavit-avatar-v-kommentarii/
Hind 07.02.2010
Конечно лучше смотрится с тегом «подробнее» — гораздо гораздо удобнее и привычнее
Юля 08.02.2010
Автру спасибо)))Очень полезная для меня информация)))вынесла мнего хороших советов))
Богдан Киев 08.02.2010
Для тех, кто уже давно делает сайты на wordpress, это информация не интересна, но для новичков самое то…:O)
Помню, когда делал свой первый сайт на wordpress очень долго не мог понять для чего нужна эта кнопка :O)
Сейчас активно изучаю Drupal — очень мощный инструмент для разработки сайтов.
Андрей 08.02.2010
А как же борьба яндекса с дублированным контентом. Все уже лихорадочно правят посты удаляют моры, или Вы считаете, что это беспочвенная паника?
delphix 09.02.2010
Тег More на самом деле очень и очень полезная штука. Во первых он делает страницы (2,3,4,5…) и архивы более «уникальными» для поисковиков, то есть препятствует дублированию контента, а во вторых некоторые в полной записи умудряются вывести на месте тега — адсенс, кстати Тод нет кода у тебя такого?
Богдан Киев 09.02.2010
Для борьбы с не уникальным контентом нужно писать больше своего контента, а если не баловаться продажей ссылок, то санкций со стороны поисковиков не будет.
Валерий 09.02.2010
Просто полный расклад….спасибо
Вильдан 12.02.2010
Полезно, да еще и скриншотами, что еще лучше. Кста рекомендую всем кто не делает с more делать с more! Это важно для поисков, выше будут стоять ваши странички при ранжировании!
Leon 14.02.2010
Когда то тоже не мог с этим разобраться. Спасибо, для начинающих это очень полезная статья.
wicked_kiD 21.02.2010
2 Андрей: лично мое мнение — это вобще полный бред, не знаю ни одного человека, которы правит посы и убирает теги, да и бороться с дублированием надо при помощи robots.txt а не уборкой или добавлением тегов…
CPU 26.02.2010
Знаю ещё одну хитрость с этим тегом, она позволяет легко заменять текст установленный по умолчанию «Читать далее». …Если в каких-то отдельных постах захотелось поменять дефолтный текст разрыва, то, просто перед закрытием тега пишите свой текст. Например, так В результате слова «а все подробности конкурса смотрите под катом» заменят «Читать далее» …или что там у вас по умолчанию. :)
CPU 26.02.2010
А-аа ёксель-поксель… :) WordPress обрезал пример в прошлом моём комменте. В общем, свой текст вставляется в тег сразу после слова «more».
Саня Б. 15.03.2010
Хороший пост! Как вы все разжевываете! Что самым юным вебмастерам понятно, как мне!
Сергей 23.03.2010
2Александр, я вот с вами не согласен — на всех своих сайтах я убираю тег more — во-1, это убирает дублирование контенкта как тут правильно заметили, а во-2, делает более красивыми ссылки — без дурацкого добавления в конце #more#
Предлагаю Вам добавить про эту возможность в данную статью, чтобы люди знали. Взять можете отсюда http://forum.maxsite.org/viewtopic.php?id=1115
insoco 01.04.2010
а можно сделать так, чтобы часть текста скрывалась, а потом шло продолжение?
Tod 01.04.2010
insoco, не совсем понимаю цель и суть данного метода, какая часть текста скрывалась, что за продолжение?
insoco 02.04.2010
ну, например, пишу в блог, вставляю цитату, цитата очень длинная, надо оставить первый абзац цитаты, остальное скрыть «под more» и продолжить писать
insoco 02.04.2010
нашёл, такое реализует плагин wpSpoiler, но для WP 2.9 не подходит
insoco 02.04.2010
и ещё вопрос offtop число и количество комментариев у вас в верхнем левом углу — это шаблон реализует или плагин такой есть?
Egor 13.05.2010
Добрый вечер!
Подскажите пожалуйста, как можно вставить в оформление more кнопку (через класс)?
Код в индексе вот такой:

<?php if (is_search()) the_excerpt(); else the_content(__('Дальше ⇒‘, ‘kubrick’)); ?>

Код класса кнопки:

<input class="button" type="submit" name="more" value="» />
boocho 04.06.2010
Спасибо автору за последнюю мысль. весь инет перерыл как переместить кнопку more. Продолжайте в том же духе. Желаю удачи!
Avalon 03.07.2010
Спасибо, а то чета не мог понять как ета фишка работает
Konstantin 09.07.2010
Я не как не могу понять , как сделать в облаке тегов, что бы шриф был не одинаковый а как у некоторых что то крупнее что то мельче и тд , вроде настроек при добавлении тегов нету никаких :(
Nagano 22.08.2010
Спс за разъяснение функции the_excerpt()
Gle13 02.09.2010
Здравствуйте, хотел бы задать вопрос про тег more.

В шаблоне у меня для тега more прописано слово «Подробнее». В некоторых статьях мне нужно чтобы выходило тег more со словом «Видео». Я делаю это так: . Теперь сам вопрос, как мне сделать чтоб слово «Видео» было красным? В стилях у меня для класса more-link прописан цвет зеленый.
Tod 02.09.2010
Gle13, код, видимо, не вставился. Если выводить ссылку в текстовом редакторе, то там должна быть возможность поменять цвет текста. Если через CSS, то добавить для ссылки новый класс и задать ему цвет красный. Хотя, все зависит от твоего решения, которое не отобразилось) Поэтому маякни лучше в аську или на почту — решим вопрос.