HTML — How to make a "Read More" button
On my website, I have my blog and I want each card to have a read more button. I specifically want it to only show x words (NOT characters) when collapsed, and then show the whole text when expanded. I do not want to have a button that takes to another page that has the full content, as I am using my own built CMS which automatically adds posts from a form.
I have tried readmore.js but that doesnt seem to work at all. It does nothing. I have also tried jQuery.dotdotdot, which also seems to not work
This is a very strange thing that I have not been able to figure out. None other SO Q & A’s have helped that I have seen.
Tailwind CSS: Creating a Read More/Read Less Button
In this tutorial, we’ll go over a full example of creating a Read More/Read Less button by using Tailwind CSS in combination with a few lines of vanilla Javascript.
Preview
The demo webpage we’re going to make some text. In the beginning, only a few first words show up. After this is three dots. The long text afterward can be seen (thanks to the hidden utility class). When the Read More button is clicked, all content is visible while the three dots go away. Moreover, the text of the button changes from Read more to Read less. Advertisements
When the Read less button is clicked, everything happens in reverse. Here’s how it works in action:
The Code
Here’s the code with explanations in the comments:
Epilogue
We’ve examined a complete example of implementing a Read More/Read Less button with Tailwind CSS and pure Javascript. This is nice but can still be improved. You can do so on your own and make changes to the code as necessary.
Advertisements If you’d like to explore more new and fascinating stuff about modern web technologies by taking a look at the following articles:
You can also check out our CSS category page for the latest tutorials and examples.
How TO — Read More Read Less Button
Learn how to create a «read more — read less» button with JavaScript.
Example Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel . erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Read More Read Less Button
Step 1) Add HTML:
Example
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
Ссылка читать далее в 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 далее</span> ‘ . the_title(», », false)); ?>
Если мы вовсе хотим убрать читать далее, то нужно оставить поле параметров функции пустым:
Функция the_excerpt не содержит вообще никаких настроек и просто выводит анонс заметки (без форматирования). Чтобы сделать ссылку читать далее после текста можно добавить следующий код под ней:
Здесь, как видите, никакой «связи» с 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:
С его помощью вы, кстати, заодно избавитесь и от прокрутки (с якорем #more), т.к. ссылка создается через get_permalink.
Кнопка читать далее в WordPress
Чтобы сделать кнопку читать далее нужно использовать соответствующие CSS стили. По умолчанию функция the_content добавляет в тег А специальный класс Поэтому вам требуется лишь прописать в style.css нужный код. В данном блоге, к примеру, используется такой:
Первое правило задает размеры, отступы кнопки, тогда как во втором содержится ссылка на картинку-фон 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:
Плагины для more в WordPress
Для кнопки читать далее в WordPress репозитории можно найти парочку полезных модулей под определенные задачи. Я сталкивался с двумя из них:
Плагин Page Links To — позволяет сделать перенаправление поста блога по адресу, отличному от значения текущей записи. По умолчанию система WP отображает анонсы публикации в хронологическом порядке, а при клике по их заголовкам или ссылке читать далее переходит на страницу с полным текстом конкретной заметки. Однако после активации модуля в админке появится новое поле, где вы сможете указать свой линк для перехода. При этом устанавливается 301 редирект (допускается выбор 302 Moved Temporarily). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.
Rich Text Excerpts — полноценный визуальный редактор для анонсов постов и записей WordPress сайта. Сможете легко оформить текст отрывка без знания HTML-тегов.
Advanced Excerpt — еще один wordpress плагин для читать далее. Он позволяет настроить некоторые параметры отображения анонсов постов в блоге без необходимости править файлы шаблона. Например, вы можете указать количество слов / символов в превью, переопределить базовый вывод анонса, добавить отображение тега more, если его нет, и т.п.
Если у вас еще остались какие-то вопросы по read more в WordPress, пишите в комментариях, — будем их разбирать.
Понравился пост? Подпишись на обновления блога по 
RSS, 
Email или 
twitter!
Оцените статью: