Как сделать ссылку читать дальше
Варианты создания ссылок «Читать далее…» и «Продолжить чтение…»
Большинство блоггеров и веб-дизайнеров хорошо понимают, насколько сложно привлечь посетителей на свой сайт. Но существуют некоторые подходы к привлечению потенциальных читателей. Некоторые факторы очень способствуют тому, чтобы веб-сайт привлекал своих читателей. Например, такие факторы, как: грамотно выбранные и написанные заголовки и рубрики, интересное наполнение страниц, и качественный дизайн. Не смотря на то, что все эти аспекты очень важны, сегодня мы сконцентрируемся на очень специфическом элементе, который часто упускают из виду, а именно – ссылки «Читать далее…» или «Продолжить чтение…». Их размещают после заголовка и краткого содержания статьи, как возможность прочитать статью полностью, но при этом не загромождать страницу надоедливым сплошным текстом.
Каждый веб-сайт использует свой собственный способ предложения пользователям перехода по ссылкам на полные статьи. Некоторые делают данные ссылки максимально заметными и яркими, другие же используют более утонченный подход. С другой стороны, веб-дизайнеры и разработчики интерфейса придумали очень креативный и инновационный подход в предложении пользователям прочесть тот или иной текст. Освещая именно данный подход, мы подготовили для вас список из 46 веб-сайтов, на примере которых можно наглядно показать то, насколько продуктивно можно использовать ссылки «Читать далее…» и «Продолжить чтение…» в вашем дизайне. Надеемся, что данные сайты послужат вам вдохновением для будущих проектов, ну или вы, как минимум, не будете упускать из виду данный аспект при разработке дизайна.
Перед тем, как мы предоставим вам список, давайте попробуем разобраться в том, почему же ссылки типа «Читать далее…» так важны. Они важны по нескольким причинам. Прежде всего потому, что они дают возможность веб-дизайнерам сокращать содержимое страницы. При использовании компактных вариантов статей на главной странице, вы сможете уместить намного больше информации, использовав меньшее пространство. Это означает, что читатели смогут быстрее охватить большое количество заголовков и примерно оценить то, что им было бы интересно прочесть.
Кроме того, использование данных ссылок и сокращение статей позволяют веб-администраторам легко отслеживать самые популярные тексты. Дизайнеры, публикующие цельные статьи на главную страницу сайта, доставляют трудности администраторам в отслеживании самых популярных текстов. Это мешает им понять то, что посетители больше всего хотят видеть на данном веб-сайте.
Кроме того, одной из самых важных причин того, чтобы размещать такого рода ссылки на сайте – деньги. Веб-сайты, которые превращают трафик в деньги, понимают, что таким образом больше посетителей будут кликать по ссылкам на их сайте. А в лучшем случае, они будут просматривать страницы и кликать на рекламные объявления. Ссылки «Читать далее…» вполне могут удвоить или даже утроить количество просмотров веб-страницы, что делает её более привлекательной для рекламодателей.
Теперь, когда мы понимаем важность использования ссылок «Читать далее…», давайте рассмотрим некоторые лучшие варианты реализации.
1.Выделяйте текстовые ссылки
Ссылка читать далее в 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, пишите в комментариях, — будем их разбирать.
Как добавить ссылку Читать Дальше в Блог на Blogger. Влияет ли на SEO
Сегодня речь пойдет о ссылке Читать дальше, которая была придумана для удобства читателей блога. По сей день мои читатели (это касается новичков, которые используют стандартные шаблоны блоггера) спрашивают меня, как сделать так, чтобы текст в постах на главной странице отображался частично, а не полностью. Вот как раз таки в этом случае нам и поможет ссылка Читать Дальше.
Обычно в стандартном режиме после того, как вы опубликовали пост на главной странице он отображается целиком то есть видно картинку, текст, видео, аудио, в общем все, что вы туда накидали, все отображается на главной странице и дальше по постраничной навигации. Во-первых это выглядит не очень красиво и ваши посетители могут запутаться в таком разнообразии, ну и Во-вторых, что самое главное все такие сообщения в сумме будут подгружать страницу, то есть она будет дольше загружаться, а это уже не хорошо, как для пользователей так и для поисковиков. Ваш сайт должен загружаться быстро. И вот на помощь нам приходит ссылка Дальше, при добавлении которой мы можем сами выбирать, что показывать в сообщении на главной в том или ином посте.
Особенности проставления ссылки.
Обычно по умолчанию в каждом блоге на главной странице отображается минимум семь публикаций и это не всегда хорошо.
Конечно в этом нет ничего страшного, но если вы продвигаете главную страницу в поисковых системах, тогда лучше закрепить один единственный пост, который наиболее релевантный по запросу вашей главной страницы. Естественно данная публикация должна отображаться полностью, без Читать Дальше, а все остальные статьи вашего блога можно обрезать с ее помощью. Например просмотрите мою главную страницу, а потом перейдите в раздел Бесплатные темы без перевода. Если же у вас много тематический проект и продвижение главной страницы не столь важно, тогда можете оставить на главной более одного сообщения.
Еще стоит добавить, что в некоторых шаблонах ссылка Читать Дальше может отсутствовать, но при этом публикации отображаются в сокращенном виде, этому способствует специальный код, который задает конкретное количество символов для каждой статьи и конечно же по желанию можно добавить выше упомянутую надпись Дальше.
Разные скрипты по разному взаимодействуют с контентом. Как это может повлиять на SEO.
Есть скрипты (зависит от шаблона), которые убирают часть текста таким образом, что его не видят ни пользователи, ни поисковые боты. А есть скрипты, которые скрывают текст для читателей, тогда как поисковые боты могут и дальше его обрабатывать. Одним из главных правил продвижения в поисковых системах особенно в Гугл является то, что и ботам и читателям контент должен преподноситься в одинаковом виде, не рекомендуется скрывать, что-то от читателя и оставить это доступным для бота и наоборот. Такая тенденция может негативно повлиять на позиции сайта в поисковой выдаче.
Как добавить автоматическую ссылку читать дальше
Чтобы вы не мучились с ручным добавлением ссылки я предлагаю вам установить специальный скрипт, который будет автоматически проставлять ссылку читать дальше в каждой публикации. Для этого вам нужно:
1) В панели управления откройте раздел Тема здесь открываем редактор Изменить HTML перед закрывающим тегом добавьте код:
2) Дальше найдите в шаблоне строку замените ее следующим кодом:
Трюки с ссылкой “читать далее”
В сегодняшней статье хочу описать все нюансы, касающиеся ссылки “читать далее” и тега 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 размещен в описании категории “деревянные украшения”.
Там нет режима редактора, и код не вставляется.
Как быть, подскажите пожалуйста!
Спасибо очень помогла ваша статья…наконец-то разобрался куда что нужно втыкать
Здравствуйте, прочитал вашу статью вроде все просто. Но у меня не так давно обновился Ворд Пресс и я столкнулся с проблемой этого злосчастного тега.
Я вроде не глупый но понять не могу как этот тег вставить пока мучаюсь пытаюсь но все попытки тщетны к сожалению. С обновлением вордпресса пришла обновленная проблема хех может все таки сам смогу решить ее.