/

Как заменить continue reading на читать далее. Изменяем «more» или «читать далее» в WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы только начинаете разбираться с WordPress, то не забудьте посетить нашу рубрику , где мы публикуем материалы специально для новых пользователей 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) и вносим изменения, после чего клацаем «Обновить файл»:

Сейчас отображение записей с тегом 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 (статическая или анонсы)

Для начала хочу заметить, что содержание главной страницы в 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

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

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

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

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

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

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

wp-content/themes/<имя темы>/languages/

Если это касается перевода на русский язык, то находим 2 файла:

ru-Ru.mo
ru-Ru.po

Соответственно, файлы *.po содержат переведённые строки в текстовом формате. С этими файлами работает переводчик темы. Файлы *.mo это те же строки, но в скомпилированном варианте. С этими файлами работает ядро WordPress для отображения перевода.
Так как простое внесение изменений в файл с расширением *.po не принесет желаемых глазам эффекта, то нужно понимать, что необходимо как-то скомпилировать данный файл в понятный для WordPress язык, для этого мы воспользуемся замечательной программой PoEdit , она пока свободно распостраняется, и может быть скачана с официального сайта: http://poedit.net/ После установки достаточно открыть соответствующий файл *.po

Работать с программой Poedit достаточно легко - исходный текст слева, перевод справа. Для редактирования перевода щёлкните на соответствующую строку и введите новый перевод. При сохранении, Poedit автоматически скомпилирует ваш перевод и создаст соответствующий файл *.mo После этого необходимо заменить эти два файла в папке languages .
Если WordPress установлен на русском языке, то вы сразу же увидите изменения. Если же WordPress настроен на английский язык, то следует изменить локаль в файле wp-config.php . Найдите в этом файле строку определяющая константу WPLANG и измените её:

define ( "WPLANG" , "ru_RU" ) ;

Воспользовавшись поиском находим, что в шаблоне suffusion необходимый файл content.php находится по пути /suffusion/post-formats
Открываем его и находим содержание:

$continue = __("Reading Post... »" , "suffusion" ) ;
the_content($continue ) ;

Нас должно интересовать то, что в одинарных кавычках, т.е. Reading Post… »
Да, нам понадобится еще как минимум строка, в которой эта запись существует, это необходимо для того, чтобы при компиляции CMS знала, что на что подменять (в данном случае это будет 29 строка).

Идем, и открываем файл ru-Ru.po , создаем новый код:

Далее открываем тот-же файл ru-Ru.po в программе, которую скачивали и устанавливали ранее Poedit , и через контекстное меню сохраняем изменения (которые мы внесли ранее, но при сохранении происходит компиляция файла с расширением *.mo ).
Теперь осталось самое главное, это сохранить 2 файла в директории /languages и наслаждаться русским языком.

Поделиться