Как сделать кнопку read more

Трюки с ссылкой “читать далее”

В сегодняшней статье хочу описать все нюансы, касающиеся ссылки “читать далее” и тега more.

Началось все с фриланс биржи, на которой один англичанин создал проект с текстом “объясните мне как изменить ссылку читать далее”. Понятно, что писал он на английском (типа, link read more и т.д.). Я ему написал как это сделать. А потом сам думаю, сапожник-то – без сапог! На своем блоге ссылка “читать далее” в первородном состоянии: никакой уникальности, никакого способствования продвижению и, естественно, с тегом #more в конце урл.

Вообщем, рекомендую почитать статью очень внимательно. Уверен, что каждый найдет в ней что-то новое, чего еще не знал. И в этом месте я ставлю

Начнем с самого начала на тот случай, если кто-то вообще ничего не знает о more.

– Ладно, не заливай, ни разу не был на море!

– Не довелось, не был…

– Уже постучались на небеса, накачались текиллой, буквально проводили себя в последний путь, а ты на море-то не побывал?!

– Не знал, что на небесах никуда без этого?

к/ф “Достучаться до небес”

Как добавить more

Наверняка, вы видели ни один блог, где на главной странице выводятся анонсы статей. Сначала идет текст начала статьи, а за ним ссылка “читать далее” (текст ссылки может быть другой).

Так вот, какой фрагмент текста отображать в анонсе задается с помощью тега more. Этот тег разделяет статью на две части: вступительную (анонс) и продолжение.

В редакторе WordPress тег more можно вставить с помощью кнопки в панели инструментов.

1. Визуальный режим редактора:

2. Текстовый режим редактора:

В текстовом режиме, так же можно вручную разделить запись: просто напишите

А теперь важная информация, которую знают далеко не все!

Так вот, есть элементарный способ задавать каждой ссылке после анонса свой уникальный текст!

Например, после вступления к одной статье вместо “Читать далее” у меня идет ссылка “ Узнать больше о WordPress помощи…”, у другой статьи в продолжение стоит “Узнать как посмотреть исходный код страницы” и т.д.

Сделать это можно, просто написав, нужный текст внутри конструкции с more. Вот так:

Спросите а зачем так делать? Еще прописывать каждый раз текст.

Дело в том, что у вас в таком случае получается еще одна ссылка на статью, содержащая, ключевые слова. А то все пишут о важности перелинковки, о плагине YARPP и подобных, а посмотришь на главной “читать далее”, “читать дальше”, “читать слишком далеко”…

Честно говоря, сам такой =) Уже 84 статьи опубликовал, и только “расчехлился” по этому поводу.

Для особо ленивых можно автоматом к стандартному тексту присоединять текст заголовка статьи. Все же лучше, чем просто “читать далее”. Как это сделать опишу немного ниже.

Как изменить текст ссылки “читать далее”

Допустим, вы не хотите заниматься прописыванием уникального текста для каждого more, а просто желаете заменить текст ссылки для всех анонсов на что-то другое, типа “читать еще”, “продолжение” и т.п. Тоже нужное дело, все-таки, какая-никакая, а уникализация – выход из массы шаблонов с текстом “читать далее”.

Как изменить текст?

1. Первый – самый простой способ – это добавить ваш текст (обычно в index.php) в функцию the_content

Можно даже вставить свой блок с классом, для создания собственного стиля ссылки “читать далее”.

2. Второй способ с использованием хука the_content_more_link. Просто добавьте следующий код в functions.php и задайте желаемый текст ссылки.

Этот способ удобен тем, что вам не нужно искать по файлам шаблона, где именно у вас используется the_content (это не обязательно в index.php, может быть и content.php и что угодно.) Здесь вы работаете только в файле functions.php.

3. В третьем пункте просто сохраню для истории способ с использованием произвольного поля WordPress.

Добавление заголовка статьи в ссылку “читать далее”

Здесь просто откорректируйте вызов функции the_content одним из двух способов.

Как убрать #more из ссылки

По-умолчанию, к url адресу ссылки “читать далее” добавляется конструкция #more-123, где 123 – номер поста. Это указание на якорь к которому прокручивается страница после перехода по такой ссылке.

В коде этот якорь устанавливается таким вот способом:

Многие изначально просто избавляются от этого функционала.

Чтобы убрать #more из ссылки добавьте в functions.php следующий код:

Стилизация ссылки “читать далее”

На этом все. Полагаю, что вы успешно разобрались с тем, как в WordPress преобразовать ссылку “читать далее”.

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Рекомендую почитать:

25 комментариев к записи “Трюки с ссылкой “читать далее””

Здравствуйте Алексей
Спасибо за статью…. Узнал много нового про данный тег
Я обычно в своем блоге использую

Ждем новых статей про часто используемые теги….
Если у Вас будет время и возможность – прошу оставить комментарий
на моем блоге…

Приветствую, тёзка!
По поводу таргет бланк не понял, что вы имели в виду. У вас на блоге смотрю используется иконка с плюсиком вместо ссылки “читать далее”.
Смотрю, что на ответ вы не подписались, но все-равно сообщу (на случай, если вернетесь), что вы стали победителем в конкурсе первого комментария. Для получения приза (15 WMR) необходимо сделать репост статьи и прислать мне ваш R-кошелек.

Код вот так должен выглядеть.

Проблема именно с двумя последними записями? А в других записях все хорошо?

Я сначала писала статью и потом ставила эту ссылку в нужном мне месте. В на последних двух записях ссылка не идет в отмеченном мной месте и устанавливается в конце записи.Я профан и самоучка. Живу в США и спросить об этом некого.

Неважно в какой момент вы вставляли ссылку. Если пишите в редакторе Вордпресс, то в режиме “текст” нужно вставить вот тот фрагмент кода, который я привел выше. Пока затрудняюсь сказать в чем проблема. Если что можете написать мне личным сообщением или в скайп (см. страницу О сайте) доступ в админку – я посмотрю.

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

Хорошо, что разобрались. В визуальном режиме не всегда происходит все так как хочешь. Там и с отступами, и с абзацами, и с таблицами бывают проблемы. В текстовом же режиме всегда можно увидеть исходный код всей записи и понять что к чему.
Успехов вам!

Огромное спасибо автору! Очень помогло! Воспользовалась вторым способом. Тема Twenty Fourteen. Проблема была с этим текстом more. Если добавить в тег свой текст:
, а потом удалить или заменить на другой, то все равно оставался этот текст “Мой текст”. Что я только не перепробовала: и переводы, и 1 способ… Вы прям выручили!

Рад, что статья оказалась полезной. Спасибо за комментарий!

По ссылке: https://yadi.sk/i/Oluh63n7pygZh можно глянуть скрин того, как должно все быть. Моя тема уже на стадии завершения, и вот эта кнопка затормозила верстку. Может подскажите мне функцию? Или без вставления тега “More” при создании поста не обойтись??

У меня вообще отсутствует кнопка Читать далее. При вставке в редакторе записей, пишет OF. Подскажите, как её добавить или включить?

Спасибо. Сделал по Вашему образцу. Все отлично. И, согласен с Вами, так лучше для СЕО

Всё гениальное очень просто. Сложностей не вызвало. Спасибо. Не все понимают, что подобные статьи не нужны профи. Это рассчитано на “чайников”, а пишут их как для профи. А у Вас есть статья по изменению формы, цвета и.т.д. кнопки “читать далее”

Здравствуйте, Алексей.В записи, в текстовом редакторе вставляю тег more, на главной анонс обрезается как надо, а “читать далее” не видно.В чем дело подскажите?

Добрый день.
Ни один из вариантов редактирования не подошёл. И совершенно не важно для “чайников” написан пост или для “профи” как здесь отмечалось. Проблема остаётся.
Вообще во многом WordPress непонятен. Вроде создан для среднего пользователя незнакомого с CSS или HTML, а порой элементарные вещи в чужих вёрстках не поддаются редактированию. Вот и в этом случае, не удаётся ни убрать ссылку “…читать далее” ни отредактировать текст ссылки.

Доброго времени суток, подскажите пожалуйста, я создала блог с тегом читать далее, но когда на странице сайта нажимаю читать далее, переходишь на пустую страницу блога,заголовок есть кроме статьи,одна статья только работает(вышивка), что делать. вот сайт чтоб посмотреть vseorukodelie.ru

Огромное вам спасибо!

У меня была проблема даже хуже, выводилась не ссылка, а просто текст “(далее…)” в конце каждого анонса на страницах категорий.
Сколько я всего перепробовал и перечитал…
Помог только ваш “Второй способ с использованием хука the_content_more_link.”

Ничего не получается, не могу найти подобные теги. Хочу убрать Читать далее, и так исходящих ссылок много… Тема Tuto…

Здравствуйте, Алексей!
У меня несколько другой вопрос. Когда стояла старая стандартная тема Вордпресс, я с успехом пользовался вашими советами, вручную меняя при написании очередного поста надпись “Читать далее” на свой вариант. Но та тема мне не нравилась, так как в ней были слишком большие заголовки, да и вообще хотелось тему с “островками” как Вконтакте например. И вот нашел такую тему, но в ней также эти островки на мой взгляд великоваты. Искал как их уменьшить, но поступил по другому. В этой новой теме оказывается надпись “Читать далее” можно глобально заменить на свою прямо в настройках темы. В общем я просто оставил это поле пустым и “Читать далее” пропало вообще, сделав островок анонса статьи меньше размером, что мне понравилось.
У меня 2 вопроса.
1. Зачем вообще эта надпись “Читать далее”, если в сам пост для прочтения его полностью можно войти просто, достаточно кликнуть по названию поста в анонсе?
2. Можно ли делать, как сделал я. Или возможно есть какие-то подводные камни?
Меня все устраивает, при написании поста ставлю тег more. На главную выводится лишь то, что написано до этого тега. Но самого названия-ссылки “Читать далее”не видно. В сам пост попадать можно нажав на его заглавие.

У меня такой вопрос.

Текст “Читать дальше” нужно разместить в описании категорий.
Например, категория Деревянные украшения, есть товар, непосредственно бусы, серьги браслеты и т.д.

Но вот сам рассказ про деревянные украшения, в WP размещен в описании категории “деревянные украшения”.

Там нет режима редактора, и код не вставляется.

Как быть, подскажите пожалуйста!

Спасибо очень помогла ваша статья…наконец-то разобрался куда что нужно втыкать

Здравствуйте, прочитал вашу статью вроде все просто. Но у меня не так давно обновился Ворд Пресс и я столкнулся с проблемой этого злосчастного тега.

Я вроде не глупый но понять не могу как этот тег вставить пока мучаюсь пытаюсь но все попытки тщетны к сожалению. С обновлением вордпресса пришла обновленная проблема хех может все таки сам смогу решить ее.

4 способа, как изменить Read More на «Читать далее» в wordpress

Изменение в WordPress
Read More на «Читать далее»

Предлагаю 4 способа, как изменить Read M ore на «Читать далее» в wordpress. Перевести надпись на русский или переименовать кнопку сможет даже новичок, делающий первый сайт сам. Суть состоит в том, чтобы вместо английских слов подставить свой текст. Главное — найти файл, в котором прописана ссылка. Выбирайте подходящий вариант:

Перевод Read More с помощью плагина

Примечание: В Loco есть выбор директории для сохранения перевода. Можно сделать так, что запись (кнопка) Read more автоматически будет переименована на «Читать далее» в любой Теме.

Как изменить Read More вручную

Если не хотите устанавливать плагин, измените Read more вручную. Для этого необходимо найти эту фразу в одном из файлов Темы. Указать точно, в каком именно, невозможно, так как, кодировка — это индивидуальный шедевр разработчика. Каждый шаблон по-своему уникален, поэтому придется искать методом перебора разных документов.

Правка ссылки Read More

Если ничего не нашли в этих файлах, проверяйте поочередно другие, пока не убедитесь, что the_permalink со словами Read More отсутствует. Как искать текст кода в редакторе вордпресса, читайте ниже.

Как найти запись Read More в открытом файле

Поиск скрипта в консоли wordpress

Если хотите, «…» можно заключить в квадратные скобки. Чтобы изменения сохранились, нажмите на кнопку «Обновить файл». Все! Проверьте перевод. Слова остались на английском? Не спешите разочаровываться — это нормально.

Перевод Read More на « Читать далее» виден не сразу

Причина, почему перевод Read more виден не сразу, банальна и проста. Браузер, для ускорения процесса отображения страницы, обращается к файлам кеша. А в них — старые настройки. Поэтому, чтобы увидеть изменения, сделайте следующее:

Как найти файл с записью функции Read M ore

Просмотреть код на стр. разработчика

В разных браузерах вид этой страницы отличается, но функциональность одна и та же ( окна раздвигаются направляющей стрелочкой ). Чтобы просмотреть, где прописан скрипт, перейдите на вкладку Sources (см. скриншот).

Вид кнопки Read More в файле HTML

Придется перебирать их пока не обнаружите нужную запись, что занимает много времени. Для этого используют файловый менеджер ( ftp ) на хостинге или локально, на ПК.

Изменение внешнего вида кнопки Read More

Заодно подкорректируйте стиль кнопки, пока находитесь на этой странице (Инструменты разработчика). Можно изменить цвета, параметры, шрифт и пр. Это только наглядная демонстрация. На сайте ничего не меняется. Например, было так:

Как изменить внешний вид кнопки «Читать далее»

Как изменить стиль кнопки

Как перевести Read More на русский, используя скрипт

Позаботившись о безопасности, откройте файл Функции Темы ( functions.php ). В самом конце вставьте код:

Вместо фразы «Читать далее» можно прописать другое значение, но не меняя окружающие знаки и теги: запятые, кавычки, апострофы, скобки. Сохраните изменения. Проверьте перевод, не забывая обновлять страницу. Если скрипт не помог, удалите его.

Как найти Read More в файлах через ftp- клиент

Если в консоли WP найти ссылку RM не удалось, придется подключаться к серверу, (сайт в интернете). Можно пользоваться ftp на хостинге или ПК. В них есть опция поиска заданных слов сразу в нескольких документах. А их в ( index) много.

Примечание: Чтобы правки кода сохранились, убедитесь, что у вас достаточно для этого прав: папки — 775; файлы — 640. Иначе действия игнорируются, изменений на сайте не будет

Как найти Read More в файлах

При изменении Read More возникла ошибка

Заключение

Если ничего не получается, лучше установить плагин Loco Translate и не мучиться. Как им правильно пользоваться описано подробно. П ереведете Read more (любое слово, фразу, кнопку) на русский без проблем.

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

Как установить тэг Read more — Ссылка читать далее в WordPress: подробная инструкция

Полное отображение статьи на страницах сайта – не лучший вариант. Как минимум по двум причинам – это плохо отражается на SEO-продвижении и понижает общий уровень юзабилити. Если вы хотите сделать сайт/блог более привлекательным, сэкономить место, следует использовать тэг — Ссылка читать далее в WordPress. О том, как его установить и настроить, читайте ниже!

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

Если же такой функции в вашем шаблоне нет, подробная инструкция, как установить тэг, приведена ниже. А также вы можете ознакомиться со статьей — 5 wordpress плагинов для кнопок социальных сетей.

Как сделать тэг «Читать далее» в WordPress

Реализация подобной функции на нашей платформе подразумевает лишь два шага:

Обратите внимание! Примечательно, что второй шаг, в принципе, не такой уж и важный. Поскольку для перехода к полному тексту статьи можно кликнуть по заголовку.

Чтобы отображать краткий анонс или вступление, следует воспользоваться одним из двух способов:

Кратко поясним, что ф-ция the_content позволяет отображать текст с примененным к нему форматированием. Такая функция предусмотрена в файле single.php, который находится на странице постов/статей. Когда в редакторе текста при добавлении статьи на сайт вы установите соответствующую ссылку (она называется quicktag), то автоматически будет скрыта часть текста статьи, а посетители будут видеть лишь краткий анонс записи.

В свою очередь, функция the_excerpt – она позволяет видеть сразу анонс, но без форматирования.

Как добавить тэг more в WordPress в текстовом редакторе

Чтобы на страницах сайта отображалась только часть статьи, при ее вставке и редактировании необходимо нажать на специальную кнопку. Именно она добавит такую ссылку – «Читать далее».

Если вы проводите редактирование материала в формате HTML, там также предусмотрена соответствующая кнопка. Однако достаточно просто вставить тэг в конкретном месте вашего материала.

Обратите внимание! Устанавливать такую ссылку вовсе необязательно строго в конце абзаца. Она может ставиться фактически после любого слова. Помните, что тэг прописывается строго слитно, без пробелов.

Как добавить Read more link в WordPress в шаблоне

Далее рассмотрим, как использовать рассматриваемый тэг в шаблоне, а также, как его можно вывести на сайте. Для этих целей предусмотрено сразу две функции:

Находятся они в макете там, где и предусмотрено отображение всего списка статей вашего сайта:

Ф-ция the_content необходима для того, чтобы текст статьи отображался полностью. Для того, чтобы на главной появился только анонс, в редакторе при форматировании и подготовке поста к публикации следует установить тэг Read more:

Теперь перейдем к практике, что позволит вам лучше понять, всю суть данного метода. Начнем с того, что само по себе слово «Далее» выглядит не особо привлекательно. Поэтому сначала рассмотрим, как его можно изменить на более емкую и красивую фразу «Читать далее».

Как видите, все довольно просто! В код нужно внести лишь небольшие изменения. Кроме того, у вас есть возможность полностью изменить Read more, установив в текст вашего предложения даже полноценное заглавие статьи/поста. И при этом допускается выполнение HTML форматирование. Ведь, вполне вероятно, подобная ссылка будет более позитивно оценена поисковыми роботами.

В том случае, если вы вообще хотите отказаться от фразы «Читать далее», вам необходимо оставить пустым поле, как указано в примере:

Если же говорить о ф-ции the_excerpt, то в ней вообще не предусмотрено каких-либо настроек. Она лишь демонстрирует краткий анонс статьи, не применяя ее форматирование.

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

То есть, по сути, тут нет какой-либо конкретной связи с привычным тэгом More. В данной ситуации демонстрируется лишь ссылка на статью.

Кстати, также вы можете поступать с ф-ей the_content, если у вас есть желание установить ссылку не в конкретном месте текста, а в отдельном блоке. К примеру, когда речь заходит о такой «фишке», как создание необычного дизайна.

Некоторый хаки для тэга «Читать далее» на платформе WordPress

И еще несколько интересных и полезных дополнений, которые помогут вам в работе с описываемым тэгом. Представлены они на официальном сайте нашей любимой платформы.

Как убрать прокрутку для More link

В CMS по умолчанию предусмотрено следующее – после клика по тэгу «Читать далее» вы автоматически перенаправляетесь на то место, где установлена в тексте ссылка.

Кроме того, в самой ссылке предусмотрен еще один якорь в виде #more-555. Чтобы избавиться от этого, следует в functions.php вставить следующий код:

add_filter( ‘the_content_more_link’, ‘remove_more_link_scroll’ );

Как изменить ссылку «Читать далее»

add_filter( ‘the_content_more_link’, ‘modify_read_more_link’ );

Кстати, этот код также избавляет от описанной выше прокрутки страницы.

Как сделать кнопку «Читать далее» на WordPress

Для формирования такой кнопки вам понадобится применение стилей CSS. Так, по умолчанию предусмотрено, что ф-ция the_content вставляется непосредственно в тэг А >

Так что вам достаточно просто установить в разделе style.css следующий код:

background:url(images/readmore.jpg) 0 0 no-repeat;

Так, в начале задаются параметры кнопки, а далее, во втором правиле, предусмотрена ссылка на фоновую картинку readmore.jpg. Естественно, чтобы выполнить все это, необходимо иметь хотя бы начальные знания CSS.

Ссылка читать далее в WordPress: параметры анонса для функции the_excerpt

Данные решения будут интересны тем, кто на сайте для демонстрации анонсов использует функцию the_excerpt.

Для начала отметим, что с помощью данного метода вы сможете изменить количество демонстрируемых символов. По умолчанию предусмотрена демонстрация 55 символов.

add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 );

Кроме того, предусмотрена смена стандартного варианта окончания текста. Когда вместо троеточия […] может быть установлен фактически любой подходящий вам вариант. Хотя, конечно же, он не будет являться ссылкой.

add_filter( ‘excerpt_more’, ‘wpdocs_excerpt_more’ );

Добавляем ссылку «Читать далее» для функции the_excerpt

Выше мы рассматривали эту функцию. А теперь расскажем, как можно реализовать данное решение, используя functions.php:

Плагины для тэга More в WordPress

Также вы можете ограничиться использованием специальных плагинов и расширений, которые доступны для платформы WordPress 4.8. Отметим два подобных решения.

Page Links To

Это расширение дает возможность сделать перенаправление статьи по адресу, который полностью отличается от значения вашего поста.

Так, по умолчанию предусмотрено, что платформа WordPress демонстрирует лишь анонсы статей строго в хронологической последовательности. И лишь при нажатии на заглавие или тэг «Читать далее» осуществляется перенаправление на всю статью.

После установки этого расширения в административной панели будет создано поле, в котором вы будете указывать свою ссылку для дальнейшего перехода. Одновременно с этим появляется 301 редирект. Также предусмотрена возможность установки 302 Moved Temporarily.

Все это будет необходимо в том случае, если вы желаете демонстрировать в общем списке краткий анонс с дальнейшим переходом на любую страницу своего блога.

Ссылка читать далее в WordPress: Advanced Excerpt

Данное расширение дает возможность демонстрировать краткие анонсы статей без необходимости вносить какие-либо исправление в баллон вашей темы.

Посредством данного плагина вы можете выбирать, сколько именно слов или символов будет содержать анонс, как именно будет выводиться анонс и многое другое.

Остались какие-либо вопросы о применении тэга Read more в WordPress? Задавайте вопросы и мы обязательно ответим на них!

Хотите создать свой сайт, но не знаете, как? Записывайтесь на мой бесплатный курс по созданию сайтов с нуля и уже через 4 дня у вас будет свой сайт!

продвижение блога и заработок в интернете

Заметки вебмастера

продвижение блога и заработок в интернете

Кнопка в wordpress читать далее без плагина

Добрый день, уважаемые читатели моего блога

Не так давно немного пошаманил над своим Интернет-ресурсом.

Давно хотел установить себе кнопку в wordpress Читать далее вместо обычной ссылки на главной странице.

Функция кнопки в вордпресс Читать далее

Для тех, кто не знает, что это за кнопка в Вордпресс читать далее и зачем она нужна, перейдите на главную страницу моего блога и нажмите на нее. Правда, я назвал ее по-другому: «Читать статью».

Кликните на неё, и вы сразу поймете её главную функцию. Неправда ли, такая красивая кнопка смотрится гораздо лучше, чем стандартная ссылка шаблона

Для того чтобы осуществить задуманное, я начал искать в поисковике информацию о том, как создать кнопку в WordPress Читать далее. Посмотрел несколько блогов.

На одном из блогов мне понравилась статья на тему создания кнопки. Однако, применив информацию на практике, я был неприятно удивлен тем, что эта кнопка просто напросто не отображается.

Прочитав ее, Вы сможете быстро создать на своем Интернет-ресурсе такую же.

Кнопка читать далее в WordPress. Как её создать?

Итак, начнем. Кнопка читать далее в wordpress. Как же её создать? Сначала необходимо отключить функцию read.more в файле functions.php, которая выводит стандартную ссылку «читать далее».

Для этого зайдите в административную панель своего ресурса и перейдите по вкладкам Внешний вид—>Редактор. Из предложенных с правой стороны файлов шаблона для редактирования выберите functions.php. Теперь скопируйте вот этот код:

Вставьте этот код в самый конец файла functions.php перед закрывающим тегом ?>

Затем нажимаем внизу кнопку «Обновить” для сохранения кода в файле.

После этого нужно добавить специальный код, который будет отображать внешний вид самой кнопки. Для этого в том же редакторе файлов шаблона нажимаем на другой файл — style.css.

После его открытия добавляем код, который я пропишу ниже в то место, где выводятся стили для контента. То есть после вот такой надписи в файле :

У Вас он может называться несколько иначе, но суть одна и та же. А вот и сам код:

Предоставленный мною код Вы можете отредактировать, для того чтобы Ваша кнопка в wordpress Читать далее подходила по внешнему виду к дизайну Вашего блога.

После всех изменений файла не забудьте нажать кнопку «Обновить» для сохранения изменений.

Потом переходим к следующему этапу. Теперь нам нужно ввести специальный код, который будет отображать Вашу кнопку на главной странице блога.

Для этого там же в Редакторе своей темы нажимаем на файл index.php, чтобы его открыть. В нем нужно найти подобную строчку:

Сразу после этой строчки кода необходимо добавить код для вывода самой кнопки:

Не забываем обновить файл для вступления изменений в силу.

Теперь можно обновить главную страницу своего блога и посмотреть на улучшения.

Как я уже говорил, Вам придется немного поработать с файлом style.css, для того, чтобы подогнать внешний вид кнопки Читать далее к дизайну своего блога.

Ну, вот и всё. Результат, как видите, налицо.

Если у Вас возникли трудности, тогда задавайте мне вопросы в комментариях. И не забудьте подписаться на обновления моего блога, чтобы получать свежие статьи на свою почту.

До новых встреч, друзья! Надеюсь, был Вам полезен. Пока.

Успехов Вам и Удачи С Уважением,

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

Раньше в этом и других блогах я использовал полное отображение текстов постов на главной и в архивах. Однако с точки зрения SEO и юзабилити — это не лучший выбор. Дабы избавиться от дублирующего контента и сэкономить немного места на странице было принято решение сделать ссылки читать далее или (как их еще называют) тег more. В данной статье расскажу все, что знаю об этой функции.

Сейчас отображение записей с тегом more можно найти в большинстве современных WordPress шаблонов, хотя это зависит от дизайна вашего сайта. Чаще всего данная реализация встречается в журнальных (magazine) темах, где используется множество информационных блоков с краткими анонсами новостей. Также похожая стилистика характера для блоггинга. Плюсы очевидны — вы можете разместить больше постов на странице, а пользователю не придется прокручивать много лишнего текста.

Как сделать читать далее в WordPress

Реализация механизма read more в WordPress, по сути, состоит из двух частей:

Вторая деталь, в принципе, не обязательна, т.к. все равно пользователь может перейти на полный текст поста, кликнув по его заголовку. В некоторых шаблонах (тех же magazine) дабы сэкономить место на странице, авторы макетов специально могут убрать more ссылки.

Отображение анонса заметки реализуется 2-мя методами:

Если рассказывать вкратце, то в WordPress функция the_content выполняет отображение всего текста поста с сохранением форматирования. Именно ее вы можете найти в файле шаблона single.php (на страницах записей). Если же в текстовом редакторе для конкретного поста добавить ссылку читать далее (quicktag), то система спрячет часть текста, отобразив лишь анонс. С функцией the_excerpt все куда проще — она сразу показывает анонс заметки без форматирования.

1. Добавление тега more в WordPress редакторе

Чтобы вывести в блоге только часть поста вы должны при его создании в текстовом редакторе нажать соответствующую кнопку. Она добавит ссылку читать далее в WordPress статье.

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

2. Вставка read more link в WordPress шаблоне

Теперь немного про использование тега more в шаблоне и, собственно, каким образом его можно выводить на вашем сайте. Для этой задачи вы можете применять функции the_content или the_excerpt. Искать их нужно в тех файлах макета, где задается отображение списка постов блога: главная (index.php), архивы (archive.php), разделы категорий (category.php) и т.п.

Функция the_content осуществляет отображение полного текста поста. Вывод анонса происходит, если в текстовом редакторе поставили read more. Ее синтаксис следующий.

Дальше несколько практических примеров, а то не все может быть понятно. Фраза «далее» по умолчанию смотрится немного убого, давайте рассмотрим как поменять read more на текст «Читать далее»:

Более того, вы можете изменить read more добавив в текст фразы заголовок поста (+ допускается HTML форматирование). Возможно, такая ссылка понравится поисковикам чуть больше:

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

Функция the_excerpt не содержит вообще никаких настроек и просто выводит анонс заметки (без форматирования). Чтобы сделать ссылку читать далее после текста можно добавить следующий код под ней:

Здесь, как видите, никакой «связи» с WordPress тегом more нет, — просто выводится линк на текущий пост с нужным вам текстом. Этот же прием можно использовать с функцией the_content (без параметров), когда вы хотите расположить ссылку читать далее не сразу после текста, а в отдельном блоке, например, для реализации нестандартного дизайна кнопки.

Хаки для ссылки читать далее в вордпресс

На официальном сайте wordpress.org можно найти парочку интересных хаков по функциям the_content и the_excerpt, которые пригодятся в работе.

Убираем прокрутку для more link

По умолчанию при переходе на страницу с полным тектом заметки осуществляется прокрутка экрана до позиции после ссылки читать далее. При этом сам линк содержит дополнительный якорь по типу #more-555. Всего этого можно избежать, если добавить в файл functions.php такой код:

Изменение ссылки читать далее

add_filter( ‘the_content_more_link’, ‘modify_read_more_link’ ); function modify_read_more_link() < return 'Your Read More Link Text'; >

С его помощью вы, кстати, заодно избавитесь и от прокрутки (с якорем #more), т.к. ссылка создается через get_permalink.

Кнопка читать далее в WordPress

Чтобы сделать кнопку читать далее нужно использовать соответствующие CSS стили. По умолчанию функция the_content добавляет в тег А специальный класс Поэтому вам требуется лишь прописать в style.css нужный код. В данном блоге, к примеру, используется такой:

Первое правило задает размеры, отступы кнопки, тогда как во втором содержится ссылка на картинку-фон readmore.jpg. Для понимания кода нужно, конечно, хотя бы немного разбираться в CSS.

Параметры анонса для функции the_excerpt

Если вы на своем сайте используете функцию отображения анонсов постов the_excerpt, то следующие хаки могут вам пригодиться. Во-первых, можете поменять количество отображаемых символов (по умолчанию = 55).

Во-вторых, допускается замена базового «окончания» текста анонса символами […] на свой вариант (это не ссылка):

Добавляем ссылку читать далее для 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, пишите в комментариях, — будем их разбирать.

Настройка анонсов записей, ссылки «читать далее» и тега more WordPress

Главная страница почти каждого в интернете блога представляет собой перечень анонсов статей. Как правило в качестве анонса используются первые пару абзацев статьи, в которых написано о чем будет статья и почему ее стоит прочитать. В конце анонса ставится ссылка «читать далее» или «подробнее», щелкнув на которую, вы попадаете на страницу с полным текстом статьи.

Сегодня мы научимся создавать такие анонсы и оформлять кнопку «читать далее». Удобнее всего создавать анонсы с помощью тега more, но мы рассмотрим так же и другие способы.

Главная страница WordPress (статическая или анонсы)

Для начала хочу заметить, что содержание главной страницы в WordPress можно настроить через админку. Возможны два варианта главной:

Здесь же можно указать максимальное число анонсов на главной странице: “На страницах блога отображать не более”.

Тег more WordPress

Для того, чтобы создать анонс статьи данным способом, нужно нажать кнопку «Вставить тег Далее» визуального редактора (если вы с ним еще не подружились, читайте о том, как настроить и использовать визуальный редактор в WordPress):

Уникальный тег more в Вордпресс

Будет здорово прописывать уникальный тег more для каждого поста. Ведь тогда после анонса будет отображаться ссылка с нужным вам анкором, например, с прямым вхождением ключевика. А это полезно для продвижения.

Сделать это легко. Переключитесь в режим «Текст» и припишите какую-нибудь фразу вплотную к слову «more» в теге: (без пробелов!). Теперь вместо стандартной ссылки «читать далее», под вашим анонсом отобразится этот тест.

Как убрать ссылку читать далее в wordpress или изменить ее текст

Сейчас мы найдем файл, который отвечает за вывод тега more (ссылки «читать далее»). Если вы хотите отредактировать текст кнопки «read more» (убрать вывод текста «читать далее», заменив его чем-то своим):

В зависимости от установленной темы, данный код может находиться и в других файлах, тогда поищите его во всех остальных php-файлах темы.

Изменить внешний вид кнопки «читать далее» WordPress (тега more)

Если вы хотите оформить ссылку «читать далее» в виде кнопки, необходимо отредактировать файл темы styles.css. Найдите в нем класс «.more-link», если такого нет, то просто допишите один из приведенных кодов в конце.

Как всегда приведу несколько примеров с комментариями к коду

1. Кнопка как у меня

2. Плоская кнопка

3. Кнопка с тенью и градиентом

Стандартные анонсы записей WordPress (самообрезающиеся)

WordPress может создавать анонсы автоматически, без использования тега more. В этом случае статья просто обрезается после определенного числа слов (55 по умолчанию). Такой вариант может показаться удобным тем, что все делается автоматически и не нужно задуматься о теге more. Однако, такие анонсы выглядят не красиво и я не советую их использовать. Гораздо удобнее самому решать после какой фразы обрубать анонс.

Отвечает за такие анонсы строчка в коде.

Как убрать стандартные анонсы записей WordPress

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

Уникальные анонсы – функция «Цитата WordPress»

Речь пойдет не о тех цитатах, которые используются в тексте для цитирования чужих мыслей — об этом тут.

Сразу скажу, что данной функцией я не пользуюсь и считаю, что это полная ерунда. Однако, некоторые сеошники считаю т, что анонсы на главной странице блога обязаны быть уникальными. Иначе контент на главной странице будет дублироваться с началом каждой статьи. Поэтому каждый анонс нужно писать отдельно, описывая в нем краткое содержание статьи.

Если и вы так считаете и вам не лень каждый раз писать уникальные анонсы, читайте как это реализовать.

На мой взгляд, статья про анонсы и ссылки «читать далее» получилась исчерпывающей. Мы рассмотрели всевозможные варианты настройки анонсов и тег а more. Надеюсь, это будет полезно!

Для меня полезная статья. Как новичок, еще многого не знаю, но стараюсь научиться. Думаю если настроить кнопку «читать далее» — это будет интересно для читателей.

Что то новенькое, надо будет попробовать изменить тег more

Привет, настроил вывод цитаты, все отлично выводится, но не могу изменить стандартную ссылку «читать далее», в файле loop заменил на выводится цитата, но все равно пишет «читать далее». Если ставлю и ставлю тег море, то все отлично ссылка будет «читать. у меня стандартная тема «twentyten» интересует именно вывод цитаты и чтоб изменить ссылку «Читать далее»

чтобы эту штуку заменить на текстовую ссылку, нужно добавить функцию в файл function.php:

В теме (Twenty Eleven) в файле (content.php) заменил строчку:

выводится анонс автоматически, либо можно использовать цитату и выводить нужный текст, но все равно выводится ссылка «читать далее» пробовал на другой теме результат такой же. В настройках поставил, чтоб выводился анонс. Код пробовал ставить в фаил (function.php) но безрезультатно. Вставлял в самом верху после ( ) никаких изменений.

Возможно я не правильно осуществил вывод анонса.

Андрей, тогда не знаю( Попробуй на вордпресс-форумах поспрашивать.

Спасибо, очень помогло, у меня выводилось на английском, заменил continue reading на русском читать далее и все пошло

Создал на форуме тему. Кстати написал коды в комментариях только они отображаются не корректно с пробелами, не знаю в чем дело, скорей всего комментарии их испортили. Возможно тот код, который ты мне написала, тоже отображается не корректно. поскольку я там есть пробелы. Если не сильно затруднит скинь код, который нужно поставить в function.php: на почту. (lethalblo@mail.ru)

У меня такая же проблема! Тег more там есть, все сделал как у вас описано, но ситуация не меняется(((

Пробуйте искать этот код в других файлах. Он может быть в любом другом файле вашей темы, пользуйтесь поиском по содержимому файлов.

Спасибо, Анна. Нашелся и правда в другом месте.

Добрый день! Я столкнулась с такой проблемой: при нажатие на кнопку «Читать далее» страница открывается не с самого верха (header), а с того места, где поставлена эта кнопка. Т.е. статья получается разорванная. Буду признательна, если подскажите, как это исправить 🙂

В этом нет ничего неправильного. Все абсолютно логично: пользователь прочитал анонс статьи, нажал кнопку «читать далее» и продолжил чтение там, где остановился. Все так и должно быть.

Спасибо. Мне кажется, у рекламодателей верхнего баннера могут быть претензии 🙂

Как сделать что бы статья открывалась с самого начала

Нашел как вывести список страниц как анонс в WordPress. Очень помогло. Я еще совсем новичок!)

Привет, и ОГРОМНОЕ СПАСИБО за прекрасную статью. я многому у Вас учусь. но мне здесь нужна Ваша помощь.

Моя цель: Настроить отправку анонсов моих статей подписчикам через Feedburner, чтобы отправлялся текст с некоторыми картинками в статье, которые стоят до тега «MORE», который будет оформлен в виде кнопки как у Вас в статье оформлен в виде: «3. Кнопка с тенью и градиентом»

Дело в том, что у меня проблема с постановкой тега, «Читать далее».

У меня подписчикам отправляется письмо, либо полностью, либо просто анонсом, но без ссылки «Читать далее». т.е. просто сплошной текст и всё (кстати без картинок, а все сплошняком). без ссылки читать далее,хотя я устанавливал в посте тег MORE в конкретном месте. но он никак не обозначается в рассылке подписчикам.

Мог бы скринами все показать, но попробую описать все свои действия.

Теперь все по порядку в соответствии с Вашей статьей:

Далее открываю файл «index.php» моей темы в редакторе и нахожу то что Вы рекомендовали и у меня есть вот что:

Это все что связано с выражением: «the_content («

При поиске выражения: „the_content“ в этих файлах в файлах:

— в search.php — тот же код что и в index.php

— в page.php и single.php вот такой код:

— в header.php, functions.php; footer.php; comments.php; attachment.php и уж тем более в 404.php (СПАСИБО Вам за которую, помогли настроить) нет ничего подобного про „the_content“

Далее „ныряю“ в файл темы styles.css и поиск класса «.more-link» ни к чему не приводит. Я с легкой душой вставил код согласно Вашей рекомендации: „3. Кнопка с тенью и градиентом“

Вставил Ваш код кнопки в конце файла. но может и не там где надо.

У меня код файла styles.css заканчивается следующим:

/* Fortitudo Et Honos

Здесь без Вашего кода (в чистом виде окончание файла styles.css.

Так вот я может не понял где именно вставлять код Вашей рекомендуемой кнопки.

Не знаю, смог ли я правильно и грамотно объяснить и довести до Вас свою проблему, но мне очень нужно настроить свои анонсы для подписчиков, чтобы они не отправлялись сырым и холодным текстом для них. :- (

ПОЖАЛУЙСТА, помогите мне во всем разобраться, т.к. я еще только начинающий блогер, и очень хочется настроить свой сайт и придать ему прекрасный вид, чтобы донести хоть какую-нибудь полезность людям.

Я очень надеюсь на Вашу помощь и поддержку в моем начинании.

Извините за длинное сообщение.

С уважением, Сергей Коржов.

Кстати, в конце анонса в рассылке Feedburner вставляет у меня выражение «iframe», которое не кликабельное вообще. и не отправляет на сайт, для дальнейшего прочтения свей статьи, на моем сайте. Но заканчивается именно там, гда я вставил тег

Я очень надеюсь с Вашей помощью разобраться во всем этом. 😉

Сергей, куда вставлять css-код, совершенно не важно, можно в конец, можно в начало файла.

А у вас есть страница со списком всех постов? Как на ней они отображаются: просто анонс без кнопки «читать далее»? Проблема в том, что вы не нашли и не изменили the_content, без этого не получится обрезать анонс по тегу More. Приведите полный код файла index.php.

Спасибо за быстрый ответ.

Да, у меня в настройке в админке Настройки/Чтение:

Главная страница стоит статическая страница

страница записей — ничего не установлено.

И для каждой статьи в ленте отображать — стоит Анонсы.

Как правильно использовать тег «Далее» в WordPress

Опубликовано: ADv Дата 09.12.2015 в рубрике WP для начинающих 1 комментарий

Вы хотите отобразить краткое содержание ваших статей на главной странице со ссылкой «Читать далее»? В WordPress есть два встроенных способа сделать это. Один из них известен как Тег «Далее». В сегодняшней статье мы покажем вам как правильно использовать Тег «Далее» в WordPress.

Добавляем Тег «Далее» в WordPress

Добавить Тег «Далее» в свои записи достаточно просто. Просто начните писать новую статью или редактировать существующую.

После того, как вы закончите статью, нужно поставить курсор в ту строку, где вы хотите разграничить краткое содержание и отобразить ссылку «Читать далее». После кликаем на кнопку Тег «Далее» на панели инструментов редактора.

Вы заметите, что появилась линия с ‘More’ по центру в теле записи. Вы можете вставить тег «Далее» в любом месте строки, как в середине предложения, так и в середине абзаца, или же сразу после первого.

Если вы используете текстовый редактор, то в нем также можно использовать кнопку «Далее» с панели инструментов или же вручную указать его следующим образом:

Преимущества использования Тега «Далее» против Цитат

Помните, ранее мы упоминали о том, что в WordPress есть два встроенных способа для отображения выдержки статьи со ссылкой «Читать далее». Этими способами являются Тег «Далее» и Цитаты.

Вы можете добавить цитату для любой записи, используя при этом соответствующую форму на странице редактор записей. Если же вам не видно этого блока, то кликните на «Настройки экрана» в правом верхнем углу и отметьте нужную галочку.

Появится мета блок цитаты под вашим редактором записей.

Возможно, цитаты кажутся более простыми в использовании, но есть пару недостатков при их использовании.

Первый заключается в том, что цитаты полностью зависят от темы. Если ваша тема не поддерживает тег the_excerpt, то вне зависимости от того, что вы напишите в блоке цитаты, ваша тема отобразит полный контент статьи на главной странице и страницы архива.

Второй недостаток использования цитат в том, что они не отображают изображения и любое другое форматирование. Они выводятся как простой текст.

В это же время, Тег «Далее» полностью независим от темы, что означает что он будет работать на всех грамотно написанных темах WordPressю. Также, он позволяет вам выводить изображения и все опции форматирования вроде ссылок, жирный текст, текст курсивом и т.д.

Недостатки использования тега «Далее»

Самым большим недостатком использования тега «Далее» в WordPress является то, что вам нужно вручную указывать его во всех ваших записях, в то время как цитаты автоматизированы в этом смысле.

WordPress позволяет и указывать собственные выдержки (цитаты) в соответствующем блоке, и умеет автоматически генерировать ее в зависимости от указанного количества символов.

Нужно смотреть на свои задачи, потому как это может являться минусом в использовании.

Еще одним недостатком использования тега «Далее» есть то, что если вы используете тему, которая использует цитаты, то она «перезапишет» тег «Далее» и выведет цитату длиной, которая определяется вашей темой.

Вне зависимости от того, используете ли вы тег «Далее» или же цитаты, важно, чтобы отображалась только выдержка статьи на главной странице и архивах, а не полный материал.

Возможные проблемы с тегом «Далее»

Самой большой проблемой, о которой мы слышали в разрезе использования тега «Далее» являлось то, что он не срабатывает для страниц.

По-умолчанию, вы не можете использовать тег «Далее» на страницах WordPress, однако, это легко исправить, просто добавив следующий код внутри цикла:

Другой проблемой использования тега является то, что он не срабатывает на главной странице. Если вы используете статическую страницу в качестве произвольной главной, то код выше должен помочь решить вашу проблему.

Другой причиной, почему тег «Далее» не срабатывает на главной, является то, ваша тема разработана так, чтобы отображать цитаты на главной, и в этом случае она «перекрывает» тег «Далее», и тут стоит воспользоваться цитатами.

Мы надеемся, что эта статья помогла вам научиться правильно использовать тег «Далее» в WordPress.

Если вы только начинаете разбираться с WordPress, то не забудьте посетить нашу рубрику WordPress для новичков, где мы публикуем материалы специально для новых пользователей WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Варианты оформления кнопки «Читать далее» (read more)

Практически на всех интернет-ресурсах, будь-то простенький сайт, тяжеловесный новостной портал или персональный блог, используется заветная кнопка «Читать далее» (read more), чаще всего это главная страница с кратким анонсами записей, страницы рубрик, архивы тегов или временные архивы, там где большая часть текста постов скрыта и заменена на ссылку «Читать далее».

Оформляют эту ссылку, кто во что горазд, кто-то обходится стандартной текстовой ссылкой, многие навешивают различные фоновые картинки, ну а мы, давайте рассмотрим несколько вариантов оформления кнопки «Читать далее» (read more), с помощью новых свойств из обоймы CSS3.

В наборе использованы 5 основных классов соответствующих той или иной цветовой схеме (pink, purple, blue, yelow, green), с помощью добавления определённых классов, изменяются базовые стили по умолчанию и при наведении курсора на ссылку «Читать далее».

Ниже вы можете посмотреть живой пример, а также код CSS, для формирования одного из стилей кнопки.

Набор правил выстроен так, что выбрав определённый класс, понравившегося вам варианта оформления, прописав его к ссылке кнопки, вы получите полностью видоизменённую кнопку «Читать далее».

В теле кнопки вы можете, непосредственно в CSS, прописать дополнительные символы или иконки, в примере используются шрифт-иконки в виде стрелок из пакета Font Awesome, который вам нужно будет предварительно подключить к вашему проекту, для этого в разделе между тегами разместите следующее:

С помощью псевдоэлементов :after и :before в css, определяете желаемую шриф-иконку, которая будет выводится на кнопке, перед текстом или после.

В статье я показал лишь два простых примера, всего же в пакете, 10 вариантов оформления ссылки «Читать далее» и это далеко не предел, скачав исходники, вы сможете поэкспериментировать с параметрами, и заделать другие, не менее, а может быть и более впечатляющие вариации.
Автор набора украинский хлопец mmetrodw, забабахал сей продукт на буржуинский лад(це ж европа, мать их). Пришлось адаптировать и выправлять ошибки выдаваемые Chrome. Надеюсь он не будет на меня в обиде)))).

Исходники залиты на Яндекс.Диск, забирайте смело, вирусов нет.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 4

Наконец-то параметр content начинает становиться на порядок полезным.

На мой взгляд простая заливка фоном смотрится более стильно.
Всякие значки и стрелочки перегружают кнопку, которая на самом деле является самым простейшим элементом сайта и не должна отвлекать на себя внимание.

Большое спасибо за классный материал, все четко и ясно, а главное — красиво.

Тег more — как редактировать ссылку читать далее на wordpress

Приветствую вас, друзья, на блоге — SdelaemBlog.ru. Сегодня поговорим о теге more (Читать Далее), который делит статью на анонс и основной текст. И как вы уже могли догадаться, он используется на бесплатном движке Wordpess. Сегодня попробуем разобраться, как использовать эту возможность у себя на сайте и как изменить внешний вид и описание ссылки.

По умолчанию, статью делит ссылка: Читать Далее (Read More). Но ведь наш проект должен быть уникальным и не похожим на другие, поэтому данное положение вещей, нам не подходит. Итак, давайте разберем, как все это работает?

Для чего нужен тег more на wordpress?

Если написать статью не используя more, то статья в полном объеме попадет на главную страницу wordpress. И, по-моему, выглядеть это будет, как минимум, не очень.

А вот так будет выглядеть пост разделенный на анонс и основную часть. То есть на главной странице, будет выводиться только анонс поста.

Выглядит гораздо аккуратней. Но сама ссылка «далее», выглядит довольно убого. Да и находится не там, где я хотел бы ее видеть. Что мы можем с этим сделать?

Как изменить текст тега more на сайте wordpress?

Чтобы отредактировать текст. Нужно открыть, используя текстовый редактор, файл index.php, и найти следующий код.

Он может выглядеть и вот так:

То есть выглядеть он может по разному, но результат его отображения в статье может быть один.

Итак, чтобы заменить слово «далее» на любую другу фразу, нужно немного поправить код. Например так:

После этого ссылка на полную запись будет выглядеть следующим образом:

Также в этот код можно добавить тайтл статьи:

После всех изменений, тег more wordpress, стал читаться так:

Итак, текст ссылки мы изменили — это основные и самые используемые способы. Но он все еще находится не там, где хотелось бы. Поэтому нужно заняться его внешним видом…

Как изменить внешний вид тега more?

Для изменения, нужно найти в файле style.css, следующий класс:

С помощью данного класса можно изменить расположение кнопки относительно анонса поста, изменить размер цвет ссылки, добавить фон, или вообще заменить текст картинкой. Например так:

В итоге, я получил такой внешний вид, который меня устраивает на данном этапе.

Уникальный тег more, для каждой статьи wordpress

Все способы описанные выше, являются способами для ленивых. Но тег можно редактировать и непосредственно при написании статьи. При этом, его можно сделать уникальным, для каждого отдельного поста. Проще всего, это можно сделать так:

Сам код разделяющий текст поста, в режиме html, выглядит так:

А для создания уникального текста, нужно при написании статьи на wordpress, включить html-режим. И в нужное место вставить следующий код:

Вместо «уникальная …» — впишите любой текст, который в итоге станет ссылкой на полную запись.

И выглядеть уже будет так:

Ну вот и все на сегодня. Теперь зная все это, Вы сможете сделать, что угодно с тегом more. При этом, от Вас не потребуется никаких особых усилий. До новых встреч!

Ответы на вопросы посетителей

Маркетинг в интернет: цели и методы

@ Александр:
Обратите внимание, что WordPress повырезал весь код и он стал не читаемым. Это происходит, потому что, при добавлении кода нужно использовать кнопку «Код», в верхней панельке. Обратите внимание, что при наведении на кнопку, появится подсказка, как правильно добавить код в комментарий.

Нет и такой строки вот полный код index.php куда нужно вставить ту строчку.

@ Александр:
Здравствуйте. Сложно сказать не видя кода. Но попробую предположить, что у Вас анонс выводится, используя, так называемую, цитату. Проверьте в файле index.php, строка:

А чтобы все стало работать так, как нужно Вам, и ссылка появилась под текстом. Эту строку, если она есть, необходимо заменить на следующий код:

Если же нет, то без кода не могу подсказать.

Здравствуйте у меня такая проблема, в записи вставляю тег море., публикую, на главной странице публикуется анонс, но в конце нет никаких ссылок. пробовал вставлять строку в файл index.php, ссылка появляется то перед заголовком то в другом посте, помогите в какое место вставить эту строчку, или может есть какие то другие советы для того что бы появлялась хоть какая нибудь ссылка хоть даже more

@ Iskra: Да, не за что. Как хотите. Если что, обращайтесь.

@ Михаил Веб:
Спасибо))) Пока так поковыряюсь, если будет слишком сложно опять буду искать секретные строчки))))

Elementor Read More Button The Simple Way

No extra plug-ins required! Elementor Free Compatible!

Here is how to transform the the toggle element into a ‘read more’ button, with a nice and smooth animation. It will work for every toggle element on the page that has the class name ‘readmoretoggle’ added.

Indeed, it works just fine! and the read more trigger disappears, acting like a true ‘read more’ button, rather than a toggle element.

Using CSS, you can also style it to look exactly like a button… CSS provided below to get the same look as the button you clicked.

This one is like the regular toggle element, but the toggle text stays above the button, acting closer to a proper ‘read more’ and ‘read less’ button.

Elementor Read More Button Template

This download gets you the following template :

To begin with, insert the toggle element where you want the ‘read more’ to show up

Then, style it properly, and give it the class name ‘readmoretoggle’ under ‘Advanced’

Keep only one toggle, and remove the icon (if you want). If you prefer the ‘button’ styling, remove the icon and use the CSS provided below. You will still need to remove the border and padding.

You can style it to look the way you want, but you will most probably want to remove the border and the padding, so that it looks consistent with the paragraph that was above.

Add the CSS class ‘readmoretoggle’

Finally, add this CSS on the same page as is the read more toggle element(s)

If you want the same behavior across your entire website, simply add the CSS in the theme customizer > Additional CSS (from WordPress > Appearance > Customize, then Additional CSS)

To center it, use this code instead

If you prefer the read more to look like a button, use the CSS below instead

You can adjust the styling of the Elementor Read More button by modifying the CSS code to fit your needs.

Also note that the ‘Read more’ text will still show up while in editor mode. This allows for easier editing of the styling.

Finallly, to get the ‘Read More’ button becoming ‘Read Less’, use the code below instead of any code above.

You can change the ‘Read Less’ text to anything you want by modifying the code.

You will also have to enter the styling for the ‘Read less’ text directly in the code, as what you set up under the ‘Styling’ tab won’t apply automatically.

In short, change the first part of the code to what you want the ‘Read Less’ to look like.

Et voila! Thanks for reading!
Let me know if you need help!

70 Responses

What difference does this extra css make? I set this up without it and it seemed like it worked pretty similar to with it. Also, is there any way to have a «Read Less» option that collapses the content back?

The CSS is there to make the toggle title disappear after being clicked. The other CSS snippet styles the toggle title to look like a button.

How can I center this button?

Maxime Desrosiers thanks!

how to close the read more after reading?

With this design, you can’t. but then, you chould just use the normal toggle element, without any added CSS for that!

Now you can use the new ‘read more’ and ‘read less’ option for this!

Can I use this css code for my archive «read more» button?

No, this won’t work there.

Brilliant. on e question. is it possible to smply invert the toggle? Therefore the toggle title ends up at the bottom of the screen for when they finish reading. The toggle title can read «see more/less».
Is this possible?
Thanks!

Good idea! I added the code for this in the article!

I finally found your solution and was very happy with the «Read Less» button. But for some reason it stopped working for me on the published page.

When i am on elementor editor, it works fine on the preview, but when a visualize the published page, the «Read Less» button doesn’t show. Tested on two different elementor instances.

Try refreshing your servers, regenerating CSS, and a full browser refresh (CTRL SHIFT R)

Maxime Desrosiers thank you for your answer. Actually I had sent a ticket to the elementor team and they answered me this:

«I’m afraid the read less button doesn’t appear in the live site because Elementor hides this when the toggle is active, please try to add the following custom CSS in the advanced tab of the toggle widget and let us know if this helps:»

Douglas Dinarte
where did you put that code? I mean after which line?
I am trying your solution but still getting the same thing.
That is, it is not working in published page but working fine in elementor editor.

Akshay Kedari Yup facing the same issue

Hi, thanks for the code, helped alot! My question is: can you add a hover effect to the ‘Read less’ text? Without a proper change of color on hover it may be unrecognized as a clickable text by the user. Thanks in advance!

Thank you so much for this!

Do you know if it’s possible to make the text stretch out and float over the section below it once «READ MORE» is clicked instead of behaving like an accordion within the section it is in?

Hmm.. well you could try setting position:absolute to it, under Advanced > Positionning

Can I do this only on mobile and not on desktop? And if so, how?

Great idea! You should still create that extra content following the instructions above, and then simply add this code. It will display as normal paragraph on desktop, and have the ‘read more’ on mobile.

how to add nested readmore button, like one after another?

No simple way. You could get there with this instead : https://element.how/elementor-show-hide-section/

Maxime Desrosiers Thank you for it.

For some reason I can’t get the «Read less» button to show up.

I put the css under the advanced tab of the toggle widget.

I got it to work as it should. I removed this bit of css, since it hide the whole title element and also the Read less link:

Hi! First off, thank you so much for making this. It is a great help! However, I’ve tried implementing both the «Read More» button and the «Read Less» button and I am expereinceing issues on both. The text of the «Read More» Button is just not showing up and the «Read Less» function works fine in the editor, but doesn’t work on the actual page. I’ve linked the page in question and a photo of the code so that you can help me see where I wen wrong. Thank you!

When we inspect the read more buttons on your page, we see that there is no text at all there. it looks like this

I don’t know why that is. but it’s not because of my code, as CSS doesn’t even have the ability to add or remove HTML on a page.

Does anybody know if you can have different margins and padding for the toggle title and toggle content when its open and closed?

Maxime Desrosiers Thank you for your quick reply! Yeah I figured it shouldn’t happen. I inserted the CSS code into WordPress > Appearance > Customize, then Additional CSS as you suggested to make this run on the entire site, maybe I should just put it under Additional CSS for the specific Toggle Widget?
The FAQ Toggle doesn’t have the readmoretoggle class in it’s Advanced properties, nor the parent section.

Can you please have a look in the code I inserted? and maybe you will find something I missed? I’m a newbie in CSS so I wouldn’t be surprised.

/** End Read more toggle **/

on the mobile version, the read more button disappears after clicking on it, so I can’t cloase the drop down anymore afterwards. (I haven’t put in the «read less»-css). Can you imagine, where the bug could be?

just figured it out, just changed display: none to display: flex 🙂

Julia Rüpschl Awesome, good work and thanks for sharing!

Hello Maxime! Do you know how i can add text on the button and make the text white? Thank you in advance!

Maxime Desrosiers Thank you Maxime! I fix it!

Is anyone having issues on the focus on Safari browsers? When I click on the «Read Less», it does not focus on «Read More» anymore.

please how can i make the words to open at the top instead of bottom when i click on the read more button

I already have the instructions for this.

Hey I’ve added the CSS for Read Less but it doesnt seem to be showing up for some reason.

Is there a way to decrease the margin between the text and the Read Less button?

Add a negative top margin, like this :

Hi there Maxime,
Thank you for this implementation!! I use this in a toggle and it works great.
I also made the Toggle title staying on top, by removing the appropriate section.
That way it doesn’t throw off in any way the readers.
I would like your input if you could pls on the following:
1. How can I have a ‘Read More’ appear under the title of the Toggle so that ppl know there’s more content, (i’ve removed the Toggle icon)?
2. Finally, how can I transfer the ‘Read Less’ appear UNDER the content, not on top of it??

Thank you for any suggestions, I really appreciate your time:-)

To get the kind of customization you want, you would be better to just code directly precisely what you need, using JavaScript.

Andonis Radistis Indeed that should work! I didn’t think of it. Good work!

Is there any way to make centered «Read more» / «Read less» button? Basically it is the combination of codes you mentioned in article, but somehow I can’t make it work.

Just adding this should work :

please how can i make the words to open at the top instead of bottom when i click on the read more button

The read more CSS below works fine for me, but what additional CSS I have to use for multilanguage? (I need only one more)?
In other words, how can I change content: ‘Read Less’ depending on lang(it) or lang(us)?

Hey Ezio! For this, you will need to right click > inspect your page, and see what class name is added to the tag element, that specifies the current language.

Then, write the CSS like this :

After trying some plugins that didn’t work well, I finally found your solutuin, which is simple and perfect for me. Thank you!