Ссылка читать далее в 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, пишите в комментариях, — будем их разбирать.
комментариев 169 к статье “Ссылка читать далее в WordPress (тег read more)”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,93 из 7, голосов - 44)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Sparkling Тема от Colorlib. при вставтке тега пост в ленте просто обрывается на тексте и никаких кнопок «далее» не появляется. а хотелось бы. seregatakoi.ru/page/3/ первая запись на этой странице к примеру. тупо обрывается на тексте, и читатель понятия не имеет, что есть продолжение. понятно, что если нажать на заголовок, то откроется статья полностью, но как об этом узнает читатель?
Seregatakoi, если я правильн понял, то отображение этой страницы задается в файле шаблона index.php. Вывод анонса там задается через the_content, попробуйте добавить в функцию текст как показано в примере в статье. Можно добавить свою ссылку «читать далее» — расположите последний пример кода из поста после the_content. Только внимательно с открывающимися закрывающимися скобками для php кода. Если с кодом не можете разобраться, то гляньте модуль Advanced Excerpt.
Добрый день,
Подскажите, пож-та, как выводить первый пост категории без кнопки read more? Нужен аналог описания категории, как, например в джумле. В вордпрессе этого нет, поэтому приходится использовать для этого отдельный пост. Но кнопка Далее там совсем не нужна. Как избавиться? заранее спасибо.
lusie, на самом деле в WP есть возможность добавлять описание категории — вот здесь можете почитать об этом.
Спасибо, почитаю.
Вставляю тег , а на сайте нет ссылки»читать далее», просто разрыв текста
Круто, но не нашёл ответа на свой запрос, может не так задал… В общем, есть «Читать далее», я бы хотел рядом установить такую же кнопку, но с ссылкой на страницу «купить», как добавить?
Александр, немного непонятна суть задачи. Данная ссылка ведет на полное отображение записи блога. Если делать товары в качестве этих записей, то можно менять «читать далее» на «купить», зачем тогда 2 кнопки. Если же речь идет о создании магазина, то тут нужно использовать woocommerce или другие похожие решения.
Дмитрий, нужно посмотреть в шаблоне какая функция используется для вывода. Если the_content, то добавить внутрь нее какой-то текст как показано в статье. Если же the_excerpt, то можно придется добавлять кнопку опять же по примеру из поста. Внимательно посмотрите раздел заметки «Вставка read more link в WordPress шаблоне».
Доброго времени суток, подскажите пожалуйста, при переходе читать далее появляется пустая страница с названием блога, а текст отсутствует, что делать?
Елена, к сожалению, вопрос достаточно общий и вариантов почему ссылка не работает может быть несколько. Я бы глянул файлы index.php, archive.php (где выводится эта ссылка) + single.php (который, собственно, открывается при переходе). Можно попробовать сначала отключить все плагины, но думаю, проблема не в них. Ну, или подобрать другой шаблон, где все будет работать.
Подскажите, а можно по клику на «читать далее» переходить на другую страницу с полной версией этой же статьи?
Сергей, кнопка читать далее служит только для перехода на полную версию новости, в которой она не должна отображаться. Вам, по идее, нужно разбиение на сраницы и функция wp_link_pages. С ее помощью, думаю, можно реализовать, что вы задумали.
Хочу выразить огромную благодарность админу за код для удаления прокрутки more link (типа #more-555). Пару дней голову ломал как исправить этот ужас) вообщем спасибо, у меня все отлично теперь!
Спасибо за статью. исправте кавычки (двойные/одинарные).
иначе записи не выводятся: <?php the_content('Continue reading: ‘ . the_title(», », false)); ?>
Nikolay, спасибо большое за подсказку! Действительно не заметил)
Добрый день! Помогите пожалуйста!? хочу перевести read more на трех языках (русский,казахский,английский) чтоб когда добавляю новость на казахском чтоб выходила на казахском, новость на русском чтоб на русском показывало и на английском также. А то я хочу добавить новость на казахском или на русском у меня все время выходит read more!
Dakka, если у вас на сайте реализована многоязычность с переключением языков, то данные переводы должны подхватываться автоамтически. Тут нужно копать в сторону локализации, посмотреть плагин плагин WPML и похожие.
Если вы хотите просто менять отображение «читать далее» в зависимости от языка текста, то это немного странно. Хотя теоретически можно добавить в замтеку пользовательские поля (Custom Field) вручную или через плагины, а потом в шаблоне добавить условие IF указан язык_новости1 = выводить такой вариант текста, ElseIf второй — другой текст и т.п. Но опять же это выглядит как-то странно без общей локализации сайта.
Благодарочка вам за полезную статью. Недавно создала свой блог, и уже вовсю наполняю статьями. В кодах совершенно не шарю. Но с первого раза всё получилось Убрала прокрутку и якорь. Чудненько)