Как сделать кнопку читать дальше
Трюки с ссылкой “читать далее”
В сегодняшней статье хочу описать все нюансы, касающиеся ссылки “читать далее” и тега 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 размещен в описании категории “деревянные украшения”.
Там нет режима редактора, и код не вставляется.
Как быть, подскажите пожалуйста!
Спасибо очень помогла ваша статья…наконец-то разобрался куда что нужно втыкать
Здравствуйте, прочитал вашу статью вроде все просто. Но у меня не так давно обновился Ворд Пресс и я столкнулся с проблемой этого злосчастного тега.
Я вроде не глупый но понять не могу как этот тег вставить пока мучаюсь пытаюсь но все попытки тщетны к сожалению. С обновлением вордпресса пришла обновленная проблема хех может все таки сам смогу решить ее.
Кнопка «Читать далее» для Blogger (Blogspot)
Здравствуйте, дорогие посетители сайта Я блоггер. В статье «Как написать и настроить сообщение в блоге» подробно описала все настройки редактора сообщений. Сегодня поговорим о том как в сообщениях на главной странице добавить кнопку «Читать далее».
На многих блогах/сайтах, примерно 70% сайтов в рунете на главной странице видно только анонс статьи, по моему мнению очень удобная функция для навигации по блогу.
Как разделить статью на главной странице и установить кнопку «Дальше»
Как спрятать текст под кат в блоге и как установить кнопку «Дальше» я постараюсь вам сейчас рассказать. В Blogger в редакторе сообщения настроена функция убирать текст под кат и соответствующая кнопочка 
, которая позволяет разделить статью на главной странице.
Когда создаете сообщение после слова на котором вы решите разбить текст, нажимаем на иконку кнопки и текст автоматически разделится, в сообщении вы увидите только пунктирную линию
Результат будет видно когда опубликуете сообщение, если текст разделили не так как хотели, можно вернуться в сообщение и отредактировать. Сообщение можно редактировать миллион раз.
Установка кнопки Читать далее в Blogger
Важно запомнить! Прежде чем опубликовать сообщение надо правильно создать постоянную ссылку (ЧПУ). После публикации статьи ее отредактировать уже нельзя.
По умолчанию текст будет как на скриншоте. Можно текст изменить на свой текст. При клике на ссылку откроется вся публикация и попадете на страницу сообщения.
Как же изменить текст ссылки «Дальше» на свой текст
Заходим в Административную панель Blogger > Дизайн. Открываем блок, который отвечает за сообщения > Сообщения блога, гаджет «Сообщения блога»
Изменяем текст ссылки «Дальше»
Как сделать кнопку «Читать далее» в Blogger (blogspot)
И так, мы научились разделять текст для главной страницы, можем изменить текст ссылки. Но если у вас есть желание изменить самостоятельно и немножко украсить свою главную страницу то можно установить красивую, стильную кнопочку ссылку на страницу сообщения.
Для начала нам нужна сама кнопочка.
Вот несколько хороших ресурсов где можно создать красивые стильные кнопочки на свой вкус и под дизайн своего блога:
Описывать и делать скриншоты по каждому сервису не буду, разобраться в них легко. Практически в каждом браузере уже стоят переводчики, а яндекс для удобства пользователей сам и переводит, функция переводчик встроена в браузер, всем советую этот браузер!
Я хочу рассказать о способе, который я называю «простой для ленивых». Почему для ленивых, потому что я считаю что не стоит долго останавливаться на этой теме, конечно если вы планируете верстать сайты и стать профессиональным вебмастером то тема дизайн сайта очень важна.
Для одного блога в интернете можно без труда найти кнопочку уже готовую на свой вкус. Конечно доверять всем сайтам не стоит, но можно для безопасности установить кнопку в демо блог и проверить его на вирусы. Возможно для меня это намного проще, чем делать кнопочку самой на данный момент.
В общем я не очень люблю, да и не идут мне графические редакторы. Потому я и нахожу всегда альтернативу для своих целей.
PS. Прошел ровно год как я впервые создала блог и я научилась работать не только с фотошопом, я выучила языки программирования html и css ( не досконально конечно) и теперь создать кнопку для меня не составляет большого труда. Что я для этого делала спросите вы? Когда я редактирую сообщения работаю в html редакторе.
Находим мы значит кнопочку в интернете, копируем адрес ссылки, если вы не знаете как это делать можно почитать статью «Кнопка вверх». Там я подробно описала весь процесс.
С кнопочкой мы разобрались, теперь добавим ее в свой блог. Заходим в Админку блога > Тема > Изменить HTML. Ставим курсор в окно шаблона, вызываем окно поиска (Ctrl+F), вставляем и находим код:
Затем нажимаем Enter, код выделится в другой цвет (подсветка кода). Удаляете его и вставляете другой код:
http://www.liveinternet.ru/tags/%F2%E5%ED%E5%F0%E8%F4%E5/page2.html » alt=»Читать далее» title=»Подробнее»/>
Код надо заранее подготовить в блокноте и заменить адрес ссылки кнопки, то что выделено красным.
Настройки:
Нажимаем Предварительный просмотр темы. Если видите кнопочку на странице, нажимаем Сохранить тему.
По умолчанию платформы Blogger кнопочка появится в левом углу статьи анонса. Если вам надо кнопочку справа то нужно сделать следующие изменения:
Заходим снова в шаблон, находим код
Смотрим на предварительный просмотр, все нормально, сохраняем.
Как в нестандартном шаблоне Blogger (Blogspot) изменить текст кнопки «Read more»
В новой скачанной теме не нужно в редакторе сообщений нажимать на ссылку «Читать далее» виджет установлен по умолчанию автором шаблона, скрипт сам порежет ваше сообщение в нужном месте.
В том случае если вы выбрали шаблон без кнопки, то можно воспользоваться способом выше, как для стандартных шаблонов. Главное, не нужно бояться экспериментировать.
Когда я скачала и установила новую тему, все перевела быстро, а с кнопочкой ну ни как. С месяц приблизительно кнопка была без перевода, с периодичностью к ней возвращалась, но в шаблоне находила только стили Css, а разобраться с тегом который отвечает за текст виджета не получалось.
Заходим в Административную панель Blogger > Тема > Резервное копирование и восстановление (обязательная процедура ) > Тема > Изменить HTML.
В открывшемся окне шаблона открываем окно поиска для поиска тегов и стилей Сss, в окно шаблона ставим курсор, нажимаем на клавиатуре сочетание клавиш Ctrl+F (раскладка клавиатуры любая), в окно поиска вставляем код
Код выделится в другой цвет и ниже кода ищем текст « Read more», удаляем его и пишем свой вариант названия ссылки: Читать далее, читать дальше, подробнее, читать полностью.
В моем блоге тег для редактирования выглядит так:
Варианты оформления кнопки «Читать далее» (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 начинает становиться на порядок полезным.
На мой взгляд простая заливка фоном смотрится более стильно.
Всякие значки и стрелочки перегружают кнопку, которая на самом деле является самым простейшим элементом сайта и не должна отвлекать на себя внимание.
Большое спасибо за классный материал, все четко и ясно, а главное — красиво.