Домой / Дом / Изменяем «more» или «читать далее» в WordPress. Трюки с ссылкой “читать далее” Read more где найти в теме вордпресс

Изменяем «more» или «читать далее» в WordPress. Трюки с ссылкой “читать далее” Read more где найти в теме вордпресс

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

Ну как говорится, начнем. Первое с чего стоит начать, так это то, что по умолчанию в большинстве тем, которые существуют в 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 и наслаждаться русским языком.

Как изменить «more» или “Читать далее?”

Некоторые блогеры совсем отказались от классического “под катом” и выкладывают статьи на веб-страницы своего блога полностью, как если бы вы были не блогером, а занимались созданием сайта. Такая система замечена и во многих американских блогах. Которые, как принято считать, всегда являются первопроходцами (Pioneer) в области блоггинга.

Пример для блога на CMS WordPress

Открываете интерфейс администратора WordPress. Далее, по пунктам меню:

  1. Внешний вид.
  2. Редактор.
  3. Основной шаблон/index.php.
  4. Найдите тег.
  5. Выделяете анкор и вставляете, какой хочется.
  6. Найти и нажать кнопку “Обновить файл”.
  7. Внешний вид.
  8. Редактор.
  9. Архивы/archive.php.
  10. Меняете текст.
  11. Нажимаете “Обновить файл”.

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

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

Многие топовые сео-блогеры Рунета не пользуются тегом . Новая статья публикуется на первой странице в полном виде. Читателям не приходится пробираться через дебри ссылок. Чтобы найти релевантные материалы, после статьи размещается пять-шесть ссылок на похожие страницы. Под-кат — это уже не современно. Так, что изменение тега «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) и вносим изменения, после чего клацаем «Обновить файл»:

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

Очень рад Вас видеть снова! Этой статьёй я продолжу тему .

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

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

Я не люблю плагины, потому как они излишне , а также некоторые из них не часто обновляются.

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

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

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

Function remove_more_link() { return ""; } add_filter("the_content_more_link", "remove_more_link");

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

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

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

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

/* CONTENT */

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

.read_more { float: right; /* Отвечает за выравнивание кнопки право или лево */ width: 130px; /* Ширина кнопки */ height: 25px; /* Высота кнопки */ border: 2px solid #fff; /* Толщина обводки */ border-radius: 7px; /* Радиус */ box-shadow: 0px 0px 15px #007dab; /* Отвечает за тень кнопки */ background: #FFFFFF; /* Цвет Фона кнопки */ font: normal 16px/25px Arial, sans-serif; /* Настойки шрифта, размер, стиль */ text-align: center; /* Выравнивание текста */ color: #ffffff; margin-right: 10px; /* Смещение вправо */ margin-bottom: 25px; /* Смещение вниз */ margin-top: -15px; /* Смещение вверх */ }

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

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

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

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

" title="">
Читать статью

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

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

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

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

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

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