Ссылка читать далее в WordPress (тег read more). Изменяем «more» или «читать далее» в WordPress Читать далее вордпресс

Если у вас есть свой сайт WordPress, на котором записи выдаются в виде цитат, то, скорее всего, вместе с текстом контента у вас выводится и ссылка с текстом Read More.

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

Сегодня я расскажу вам про тег «Read More» в WordPress, а также обучу вас тому, как его изменить в соответствии с вашими пожеланиями.

Основы

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

Тег цитаты в WordPress – это короткая строка PHP-кода, которая имеет следующий вид:

Она может быть заменена на тег шаблона the_content(), где это будет целесообразно. Как правило, у вас будет индексная страница блога, на которой выводятся ваши свежие записи. Эти записи можно сделать цитатами, просто применив несколько параметров или заменив тег шаблона the_content() на the_excerpt().

Текст – это небольшая цитата с закрывающим многоточием, следом за которым идет кнопка с названием View Full Post.

Изменение тега Read More

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

Войдите в консоль, перейдите к разделу Параметры – Чтение.

Вы увидите список настроек, однако нас интересует только параметр: «For each article in a feed, show». Вы также можете задать количество записей, выводимых в ленте блога.

Давайте выберем Summary вместо full text. После этого щелкаем по кнопке Save Changes.

По умолчанию, некоторые темы уже оптимизированы для вывода цитат вместо полного текста, как это отмечено в панели настроек. Наша тема Divi 2.0 – прекрасный пример такого подхода.

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

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

Чтобы сделать это, нам нужно углубиться в код нашего сайта. Открываем активную тему в редакторе кода. Я использую sublime text 2 в теме Divi , как показано ниже:

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

Если вы никогда не работали с кодом Divi, то в таком случае вы можете воспользоваться нумерацией строк – этот код будет стоять в строках 50-57 (это верно только для темы Divi!)

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

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

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

/* Modify the read more link on the_excerpt() */ function et_excerpt_length($length) { return 220; } add_filter("excerpt_length", "et_excerpt_length"); /* Add a link to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/ function et_excerpt_more($more) { global $post; return "

;"; } add_filter("excerpt_more", "et_excerpt_more");

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

Вторая функция изменяет ссылку Read More, переписывая стандартные значения WordPress. В данном примере я добавил ссылку, обернутую в div, чтобы я мог впоследствии стилизовать ее. Стилизацию я рассмотрю чуть позднее; сейчас вы можете перейти на сайт, где вы увидите следующее:

Стандартная CSS стилизация ссылок и записей используется автоматически в теме Divi 2.0; нам осталось лишь провести некоторую работу, связанную с тем, чтобы сделать ссылку кнопкой.

Мы присвоили анкору ссылки в файле functions.php класс view-full-post-btn. С его помощью я добавлю к ссылке некоторый CSS-код. Поместите CSS-код, представленный ниже, в свой файл style.css, чтобы настроить нашу ссылку. Не важно, где именно вы добавите код – важно, чтобы вы запомнили область его расположения, пригодится на будущее.

View-full-post-btn{ display:inline-block; /*border-radius*/ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:8px 16px; margin-top:10px; color:#454545; border:1px solid #d8dcdc; font-family:Georgia,serif; font-style:italic; font-size:16px; } .view-full-post-btn:hover{ background:#454545; /*transition*/ -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; border:1px solid #000000; color:#FFFFFF; }

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

Вместо того, чтобы выравнивать нашу кнопку по левому краю, давайте сделаем еще одно действие: присвоим float: right, чтобы ссылка была выровнена по правому краю контейнера, в котором она в данный момент находится. Также нам нужно настроить края для каждой нашей записи. Добавим следующий код в файл style.css:

Et_pb_post { margin-bottom: 100px; border-top: 1px solid #e1e1e1; } .et_pb_post:first-of-type { border-top: none; } .view-full-post { float: right; }

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

Примечание: учтите, что стили не являются адаптивными.

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function remove_more_link_scroll( $link ) { $link = preg_replace ( "|#more-+|" , "" , $link ) ; return $link ; } add_filter( "the_content_more_link" , "remove_more_link_scroll" ) ;

function remove_more_link_scroll($link) { $link = preg_replace("|#more-+|", "", $link); return $link; } add_filter("the_content_more_link", "remove_more_link_scroll");

add_filter("the_content_more_link", "modify_read_more_link"); function modify_read_more_link() { return "Your Read More Link Text"; }

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

a.more-link { display:block; width:151px; height:24px; padding-left:10px; clear:both; border:none; line-height:22px; margin-top:10px; font-size:12px; } a.more-link { color:#FFF; background:url(images/readmore.jpg) 0 0 no-repeat; }

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

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

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

function wpdocs_excerpt_more($more) { return "... >>"; } add_filter("excerpt_more", "wpdocs_excerpt_more");

Чуть выше, при описании функции the_excerpt, я привел пример кода, который позволяет разместить ссылку на пост после анонса. Эту же фишку можно реализовать и через хак в functions.php:

function new_excerpt_more($more) { global $post; return "ID) . ""> Читать статью полностью..."; } add_filter("excerpt_more", "new_excerpt_more");

Плагины для more в WordPress

Если у вас еще остались какие-то вопросы по read more в WordPress, пишите в комментариях, — будем их разбирать.

Многие пользователи WordPress знают или хотя бы слышали о теге More . Это ссылка позволяет не только оформить внешний вид публикации, но и создать анонс самых разнообразных видов. Исправить или модернизировать данный тег можно и нужно, а вот каким образом — не всегда понятно.

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

WordPress Read More имеет не только роль отображения и восприятия его пользователем, но и выполняет достаточно важную функцию, как вывод превью статьи, которое учитывается таким видом микроразметки, как OpenGraph. Поэтому важно понимать и грамотно использовать его в своих проектах, чтобы избежать возможных неприятностей.

Как установить тег Read More

Установка тега More не составляет труда, но не всегда можно его вовремя найти и использовать. Он находится в интерфейсе редактора нашей записи:

Необходимо установить курсор в нужное место и нажать на иконку, указанную на скриншоте. После этого появится разделитель с подписью «MORE», что означает применение тега More и разделение контента на превью и саму статью.

Но вот что же будет с этим кусочком над разделителем: будет он отображаться в превью и в самой статье, или же он будет вырезан с контента (при открытии статьи) или что вообще будет с ним? Это, пожалуй, самый частый и волнующий вопрос любого начинающего веб-мастера в CMS WordPress.

В целом, я могу выделить 3 основных варианта, которые используются в 90% случаев:

1. стандартный вариант;
2. полный вариант;
3. раздельный вариант.

Стандартный вариант использования тега More

В стандартном варианте заключается «традиционное» использование стоковой функции вордпресса относительно тега More. Это означает, что наше превью будет отображаться в ещё не открытой статье (на стене):

А при открытии поста будет доступна уже прокрученная статья до момента окончания превью. То есть по логике этого вариант мы уже прочитали превью и смысла читать его в общем тексте нет. Именно поэтому открывается статья, которая уже промотана нам до момента окончания превью и выглядит это примерно вот так:

Как видите, перед нами страница, начинающаяся сразу после превью. Для меня этот вариант никак не подходил, так как чаще всего возникает ситуация по поиску информация примерно такая:

1. вводишь запрос в поисковую систему;
2. открываешь все более-менее подходящие по title сайты;
3. после этого просматриваешь поочередно и сортируешь.

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

Полный вариант использования тега More

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

Для того чтобы реализовать данный вариант потребуется внести изменения в наш шаблон functions.php и вставить строку в конце документа, предварительно сделав отступ в несколько строчек (по традиции):

function remove_more_jump_link($link) { $offset = strpos($link, "#more-"); if ($offset) { $end = strpos($link, """,$offset); } if ($end) { $link = substr_replace($link, "", $offset, $end-$offset); } return $link; } add_filter("the_content_more_link", "remove_more_jump_link"); add_theme_support("post-thumbnails");

function remove_more_jump_link ($ link ) { $ offset = strpos ($ link , "#more-" ) ; if ($ offset ) { $ end = strpos ($ link , """ , $ offset ) ; if ($ end ) { $ link = substr_replace ($ link , "" , $ offset , $ end - $ offset ) ; return $ link ; add_filter ("the_content_more_link" , "remove_more_jump_link" ) ; add_theme_support ("post-thumbnails" ) ;

Если затрудняетесь в поиске данного файла шаблона, то это не беда. В меню WordPress переходим:

Внешний Вид > Редактор. Выбираем Функции темы (functions.php) и вносим изменения, после чего клацаем «Обновить файл»:

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

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

• Последние записи
• Любая, выбранная вами страница

Настраивается это в разделе «Параметры » -> «Чтение »:

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

Тег more WordPress

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

.more-link { background : none repeat scroll 0 0 #00B37C ; /*цвет фона */ border : 1px solid #62901E ; /*толщина и цвет границ */ border-radius : 5px ; /*закругленные края */ color : #FFFFFF ; /*цвет шрифта */ display : block ; font-family : verdana; font-size : 12px ; line-height : 12px ; padding : 8px 14px ; text-decoration : none ; text-transform : uppercase ; /*текст в верхнем регистре */ }

More-link { background: none repeat scroll 0 0 #00B37C; /*цвет фона */ border: 1px solid #62901E; /*толщина и цвет границ */ border-radius: 5px; /*закругленные края */ color: #FFFFFF; /*цвет шрифта */ display: block; font-family: verdana; font-size: 12px; line-height: 12px; padding: 8px 14px; text-decoration: none; text-transform: uppercase; /*текст в верхнем регистре */ }

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

1 2 3 4 5 6 7 8 9 10 11

.more-link { background : none repeat scroll 0 0 #E81D1D ; color : #FFFFFF ; display : block ; font-family : verdana; font-size : 12px ; /*размер шрифта */ font-weight : bold ; /*жирный шрифт */ line-height : 12px ; padding : 8px 14px ; /*внутренние отступы */ text-decoration : none ; }

More-link { background: none repeat scroll 0 0 #E81D1D; color: #FFFFFF; display: block; font-family: verdana; font-size: 12px; /*размер шрифта */ font-weight: bold; /*жирный шрифт */ line-height: 12px; padding: 8px 14px; /*внутренние отступы */ text-decoration: none; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.more-link { background : linear-gradient(#DD1D1D , #A61518 ) repeat scroll 0 0 rgba (0 , 0 , 0 , 0 ) ; /*градиент */ border-radius : 4px ; box-shadow : 0 1px 2px 0 rgba (0 , 0 , 0 , 0.7 ) ; /*тень */ color : #FFFFFF ; font-size : 16px ; font-weight : bold ; height : 40px ; line-height : 40px ; text-align : center ; /*выравнивание по центру */ width : 155px ; /*ширина кнопки */ /* кроссбраузерность: */ background : -ms-linear-gradient(#DD1D1D , #A61518 ) ; /* IE10 */ background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #DD1D1D ) , color-stop(100% , #A61518 ) ) ; /* Safari 4+, Chrome 2+ */ background : -webkit-linear-gradient(#DD1D1D , #A61518 ) ; /* Safari 5.1+, Chrome 10+ */ background : -o-linear-gradient(#DD1D1D , #A61518 ) ; /* Opera 11.10 */ filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#DD1D1D" , endColorstr= "#A61518" ) ; /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518")" ; /* IE8+ */ -moz-border-radius: 4px ; /* Firefox */ -webkit-border-radius: 4px ; /* Safari, Chrome */ -khtml-border-radius: 4px ; /* KHTML */ }

More-link { background: linear-gradient(#DD1D1D, #A61518) repeat scroll 0 0 rgba(0, 0, 0, 0); /*градиент */ border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7); /*тень */ color: #FFFFFF; font-size: 16px; font-weight: bold; height: 40px; line-height: 40px; text-align: center; /*выравнивание по центру */ width: 155px; /*ширина кнопки */ /* кроссбраузерность: */ background: -ms-linear-gradient(#DD1D1D, #A61518); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #DD1D1D), color-stop(100%, #A61518)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#DD1D1D, #A61518); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#DD1D1D, #A61518); /* Opera 11.10 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518"); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518")"; /* IE8+ */ -moz-border-radius: 4px; /* Firefox */ -webkit-border-radius: 4px; /* Safari, Chrome */ -khtml-border-radius: 4px; /* KHTML */ }

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

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

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

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

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

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

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

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