Как сделать читать далее wordpress. Изменяем «more» или «читать далее» в WordPress. Вставка read more link в 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 уже есть созданные переводы, но как правило, они или не полные, или сделаны из рук вон плохо. Чтобы найти «концы» этого перевода необходимо в папке:
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
и наслаждаться русским языком.
Главная страница 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, на котором записи выдаются в виде цитат, то, скорее всего, вместе с текстом контента у вас выводится и ссылка с текстом 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 "
Первые 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, вы можете сделать ваш контент более привлекательным, причем сделать это за короткое время.
Как изменить «more» или “Читать далее?”
Некоторые блогеры совсем отказались от классического “под катом” и выкладывают статьи на веб-страницы своего блога полностью, как если бы вы были не блогером, а занимались созданием сайта. Такая система замечена и во многих американских блогах. Которые, как принято считать, всегда являются первопроходцами (Pioneer) в области блоггинга.
Пример для блога на CMS WordPress
Открываете интерфейс администратора WordPress. Далее, по пунктам меню:
- Внешний вид.
- Редактор.
- Основной шаблон/index.php.
- Найдите тег.
- Выделяете анкор и вставляете, какой хочется.
- Найти и нажать кнопку “Обновить файл”.
- Внешний вид.
- Редактор.
- Архивы/archive.php.
- Меняете текст.
- Нажимаете “Обновить файл”.
Если в ваши профессиональные обязанности входит продвижение сайта , задача смены текста “под катом” различается, в зависимости от конкретно используемой системы управления контентом или конструктора сайтов. В профессиональном конструкторе вам не придется производить никаких манипуляций с кодом, все предусмотрено в интерфейсе программы. Вашей задачей является отыскать нужный пункт меню и элементарно вписать желаемый новый текст.
Как уже упоминалось выше, вариант с десятком анонсов на веб-странице далеко не всегда является лучшим выбором. Часто бывает гораздо юзабильнее для читателей создать удобную структуру и меню навигации, которые бы обеспечивали легкий доступ к искомой информации.
Многие топовые сео-блогеры Рунета не пользуются тегом . Новая статья публикуется на первой странице в полном виде. Читателям не приходится пробираться через дебри ссылок. Чтобы найти релевантные материалы, после статьи размещается пять-шесть ссылок на похожие страницы. Под-кат — это уже не современно. Так, что изменение тега «more» в WordPress уже не очень актуально.