Read more

WordPress ссылка читать далее

Добрый день!

В сегодняшней статье хочу описать все нюансы, касающиеся ссылки “читать далее” и тега more.

Началось все с фриланс биржи, на которой один англичанин создал проект с текстом “объясните мне как изменить ссылку читать далее”. Понятно, что писал он на английском (типа, link read more и т.д.). Я ему написал как это сделать. А потом сам думаю, сапожник-то – без сапог! На своем блоге ссылка “читать далее” в первородном состоянии: никакой уникальности, никакого способствования продвижению и, естественно, с тегом #more в конце урл.

Вообщем, рекомендую почитать статью очень внимательно. Уверен, что каждый найдет в ней что-то новое, чего еще не знал. И в этом месте я ставлю <!—more—>

Начнем с самого начала на тот случай, если кто-то вообще ничего не знает о more.

— Я не был на море.

– Ладно, не заливай, ни разу не был на море!

– Не довелось, не был…

– Уже постучались на небеса, накачались текиллой, буквально проводили себя в последний путь, а ты на море-то не побывал?!

– Не успел, не вышло…

– Не знал, что на небесах никуда без этого?

к/ф “Достучаться до небес”


 

Как добавить more

Наверняка, вы видели ни один блог, где на главной странице выводятся анонсы статей. Сначала идет текст начала статьи, а за ним ссылка “читать далее” (текст ссылки может быть другой).

ссылка "читать далее" после анонса статьи

Так вот, какой фрагмент текста отображать в анонсе задается с помощью тега more. Этот тег разделяет статью на две части: вступительную (анонс) и продолжение.

В редакторе WordPress тег more можно вставить с помощью кнопки в панели инструментов.

1. Визуальный режим редактора:

Кнопка вставки тега more в визуальном режиме

2. Текстовый режим редактора:


Кнопка вставки тега more в режиме текст

В текстовом режиме, так же можно вручную разделить запись: просто напишите <!–more—>

А теперь важная информация, которую знают далеко не все!

Если вы просто добавили <!—more—>, то после анонсов у вас будет стандартная запись, типа “читать далее” или какая-то другая (какая в вашем шаблоне прописана). Везде будут ссылка с одинаковым текстом.

Так вот, есть элементарный способ задавать каждой ссылке после анонса свой уникальный текст!

Например, после вступления к одной статье вместо “Читать далее” у меня идет ссылка “Узнать больше о WordPress помощи…”, у другой статьи в продолжение стоит “Узнать как посмотреть исходный код страницы” и т.д.

Сделать это можно, просто написав, нужный текст внутри конструкции с more. Вот так:

<!—more Уникальный текст ссылки 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.

Вписывание текста непосредственно в <!–more Уникальный текст ссылки more –>, конечно же проще и понятней.

 

Добавление заголовка статьи в ссылку “читать далее”


Здесь просто откорректируйте вызов функции the_content одним из двух способов.

 

 

Как убрать #more из ссылки

По-умолчанию, к url адресу ссылки “читать далее” добавляется конструкция #more-123, где 123 – номер поста. Это указание на якорь к которому прокручивается страница после перехода по такой ссылке.

В коде этот якорь устанавливается таким вот способом:

Многие изначально просто избавляются от этого функционала.

Чтобы убрать #more из ссылки добавьте в functions.php следующий код:

 

Стилизация ссылки “читать далее”

Напоследок скажу, что для изменения внешнего вида ссылки “читать далее” используйте встроенный класс .more-link (он изначально добавляется ко всем ссылкам more)

 

На этом все. Полагаю, что вы успешно разобрались с тем, как в WordPress преобразовать ссылку “читать далее”.

Пока!

wordpress-life.ru

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

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

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

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

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

Тег more WordPress

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

вставить тег more

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

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


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

Сделать это легко. Переключитесь в режим «Текст» и припишите какую-нибудь фразу вплотную к слову «more» в теге: <!—moreЧитать о тегах more и не только…—> (без пробелов!). Теперь вместо стандартной ссылки «читать далее», под вашим анонсом отобразится этот тест.

Как убрать ссылку читать далее в wordpress или изменить ее текст
read_more

Сейчас мы найдем файл, который отвечает за вывод тега more (ссылки «читать далее»). Если вы хотите отредактировать текст кнопки «read more» (убрать вывод текста «читать далее», заменив его чем-то своим):

  1. Отредактируйте по очереди файлы темы index.php и archive.php. Если вы не умеете редактировать файлы шаблона WordPress, читайте статью.
  2. В этих файлах найдите код <?php the_content(‘Читать далее &raquo;'); ?>, он может выглядеть иначе, поэтому удобнее воспользоваться поиском по ключу «the_content («.
  3. Замените текст «читать далее» на свой. Вы можете добавить в ссылку заголовок поста:

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

Изменить внешний вид кнопки «читать далее» WordPress (тега more)

Если вы хотите оформить ссылку «читать далее» в виде кнопки, необходимо отредактировать файл темы styles.css. Найдите в нем класс «.more-link», если такого нет, то просто допишите один из приведенных кодов в конце.

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

1. Кнопка как у меня
читать далее1

 

2. Плоская кнопка
читать далее2

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

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

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

Отвечает за такие анонсы строчка <?php the_excerpt () ?> в коде.

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

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


  1. Отредактируйте по очереди файлы темы index.php и archive.php. Если вы не умеете редактировать файлы, читайте статью. Иногда этот код может находиться и в других файлах темы, ищите его.
  2. Найдите в этих файлах код <?php the_excerpt () ?> и удалите его. Или замените на <?php the_content(‘Читать далее &raquo;'); ?>,чтобы сразу добавить вывод тега more.

pro-wordpress.ru

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

customizing-the-wordpress-read-more-link-text

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


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

Основы

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

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

<?php the_excerpt(); ?>

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

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

et-blog-post

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

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

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

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


et-settings-reading

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

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

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

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

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

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

divi-open

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

the-content

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

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

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

the-excerpt

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

Нам нужно добавить текст ссылки в самый конец каждой цитаты. Чтобы сделать это, нам нужно перейти к файлу functions.php. Открываем его в своем редакторе кода. Прокручиваем в самый низ и добавляем в него следующий блок PHP-кода:

/* 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 '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;'; } add_filter('excerpt_more', 'et_excerpt_more'); 

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

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

excerpt-modified

Стандартная 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; }

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

post-with-button

hover-state

Вместо того, чтобы выравнивать нашу кнопку по левому краю, давайте сделаем еще одно действие: присвоим 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-complete

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

Заключение

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

Источник: elegantthemes.com/blog

oddstyle.ru

Как сделать тэг «Читать далее» в WordPress

Реализация подобной функции на нашей платформе подразумевает лишь два шага:

  • демонстрация анонса записи (например, первого абзаца);
  • установка ссылки.

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

 

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

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

Кратко поясним, что ф-ция the_content позволяет отображать текст с примененным к нему форматированием. Такая функция предусмотрена в файле single.php, который находится на странице постов/статей. Когда в редакторе текста при добавлении статьи на сайт вы установите соответствующую ссылку (она называется quicktag), то автоматически будет скрыта часть текста статьи, а посетители будут видеть лишь краткий анонс записи.

В свою очередь, функция the_excerpt – она позволяет видеть сразу анонс, но без форматирования.

Как добавить тэг more в WordPress в текстовом редакторе

Чтобы на страницах сайта отображалась только часть статьи, при ее вставке и редактировании необходимо нажать на специальную кнопку. Именно она добавит такую ссылку – «Читать далее».

Если вы проводите редактирование материала в формате HTML, там также предусмотрена соответствующая кнопка. Однако достаточно просто вставить тэг <!—more—> в конкретном месте вашего материала.

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

добавить тэг more в WordPress в текстовом редакторе 

Как добавить Read more link в WordPress в шаблоне

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

  • the_content;
  • the_excerpt.

Находятся они в макете там, где и предусмотрено отображение всего списка статей вашего сайта:

  • главная (index.php);
  • архивы (archive.php);
  • категории (category.php);
  • и так далее.

Ф-ция the_content необходима для того, чтобы текст статьи отображался полностью. Для того, чтобы на главной появился только анонс, в редакторе при форматировании и подготовке поста к публикации следует установить тэг Read more:

<?php the_content( $more_link_text, $strip_teaser, $more_file ); ?>

Где:

  • $more_link_text – непосредственно сам текст для «Читать далее», который по умолчанию имеет вид, как «читать» или «more»;
  • $strip_teaser – необходим для того, чтобы либо отображать часть записи до WordPress тэга «More», либо нет. Данная пометка может принимать значение FALSE (текст отображается) либо  TRUE (текст прячется). По умолчанию в настройках выставлено так, что текст будет отображаться;
  • $more_file – на какой именно файл будет указывать ваш тэг (в данном случае указано, что он не применяется).

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

<?php the_content(‘Читать далее…’); ?>

Как видите, все довольно просто! В код нужно внести лишь небольшие изменения. Кроме того, у вас есть возможность полностью изменить Read more, установив в текст вашего предложения даже полноценное заглавие статьи/поста. И при этом допускается выполнение HTML форматирование. Ведь, вполне вероятно, подобная ссылка будет более позитивно оценена поисковыми роботами.

<?php the_content(‘<span class=»moretext»>Читать далее</span> ‘ . the_title(», », false)); ?>

В том случае, если вы вообще хотите отказаться от фразы «Читать далее», вам необходимо оставить пустым поле, как указано в примере:

<?php the_content(‘ ‘); ?>

Если же говорить о ф-ции the_excerpt, то в ней вообще не предусмотрено каких-либо настроек. Она лишь демонстрирует краткий анонс статьи, не применяя ее форматирование.

Для того, чтобы у вас появилась соответствующая ссылка, необходимо вставить код:

<div class=»morelink»>

<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>» >Читать далее…</a>

</div>

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

Кстати, также вы можете поступать с ф-ей the_content, если у вас есть желание установить ссылку не в конкретном месте текста, а в отдельном блоке. К примеру, когда речь заходит о такой «фишке», как создание необычного дизайна.

добавить Read more link в WordPress в шаблоне

Некоторый хаки для тэга «Читать далее» на платформе WordPress

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

Как убрать прокрутку для More link

В CMS по умолчанию предусмотрено следующее – после клика по тэгу «Читать далее» вы автоматически перенаправляетесь на то место, где установлена в тексте ссылка.

Кроме того, в самой ссылке предусмотрен еще один якорь в виде #more-555. Чтобы избавиться от этого, следует в functions.php вставить следующий код:

function remove_more_link_scroll( $link ) {

            $link = preg_replace( ‘|#more-[0-9]+|’, », $link );

            return $link;

}

add_filter( ‘the_content_more_link’, ‘remove_more_link_scroll’ );

Как изменить ссылку «Читать далее»

Наиболее простой способ – это перейти в ф-цию и поменять $more_link_text. Однако, чтобы полностью изменить формат такой ссылки, в functions.php вам следует лишь добавить приведенный ниже код:

add_filter( ‘the_content_more_link’, ‘modify_read_more_link’ );

function modify_read_more_link() {

return ‘<a class=»more-link» href=»‘ . get_permalink() . ‘»>Your Read More Link Text</a>’;

}

Кстати, этот код также избавляет от описанной выше прокрутки страницы.

Как сделать кнопку «Читать далее» на WordPress

Для формирования такой кнопки вам понадобится применение стилей CSS. Так, по умолчанию предусмотрено, что ф-ция the_content вставляется непосредственно в тэг А class=»more-link».

Так что вам достаточно просто установить в разделе style.css следующий код:

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_custom_excerpt_length( $length ) {

    return 70;

}

add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 );

 

Кроме того, предусмотрена смена стандартного варианта окончания текста. Когда вместо троеточия  […] может быть установлен фактически любой подходящий вам вариант. Хотя, конечно же, он не будет являться ссылкой.

 

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 ‘<a class=»moretag» href=»‘. get_permalink($post->ID) . ‘»> Читать статью полностью…</a>’;

}

add_filter(‘excerpt_more’, ‘new_excerpt_more’);

Плагины для тэга More в WordPress

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

Page Links To

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

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

После установки этого расширения в административной панели будет создано поле, в котором вы будете указывать свою ссылку для дальнейшего перехода. Одновременно с этим появляется 301 редирект. Также предусмотрена возможность установки 302 Moved Temporarily.

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

ifish2.ru

Как сделать читать далее в WordPress

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

  • 1) отображения краткого анонса заметки;
  • 2) ссылки читать далее.

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

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

  • с помощью функции the_content() + добавления ссылки читать далее.
  • с использованием функции the_excerpt() вместо the_content().

Если рассказывать вкратце, то в WordPress функция the_content выполняет отображение всего текста поста с сохранением форматирования. Именно ее вы можете найти в файле шаблона single.php (на страницах записей). Если же в текстовом редакторе для конкретного поста добавить ссылку читать далее (quicktag), то система спрячет часть текста, отобразив лишь анонс. С функцией the_excerpt все куда проще — она сразу показывает анонс заметки без форматирования.

1. Добавление тега more в WordPress редакторе

Чтобы вывести в блоге только часть поста вы должны при его создании в текстовом редакторе нажать соответствующую кнопку. Она добавит ссылку читать далее в WordPress статье.

Read more

Если вы работаете в режиме HTML, то там также есть подобная кнопка либо можно просто написать тег <!—more—> в нужном вам месте. Кстати, хотел заметить, что ссылку разрыва «читать далее» в тексте вам не обязательно ставить в конце абзаца, можно добавить после любого слова. При этом учтите, что тег нужно писать именно слитно.

Read more

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

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

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

Здесь:

  • $more_link_text – текст для ссылки читать далее, по умолчанию она выглядит как «(more…)» или на русском «(далее…)».
  • $strip_teaser – должен ли отображаться текст до WordPress тега more либо скрываться, функция принимает значение TRUE (прячется) или FALSE (отображается). По умолчанию он показывается.
  • $more_file – на какой файл указывает тег more (сейчас написано, что не используется).

Дальше несколько практических примеров, а то не все может быть понятно. Фраза «далее» по умолчанию смотрится немного убого, давайте рассмотрим как поменять read more на текст «Читать далее»:

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

Если мы вовсе хотим убрать читать далее, то нужно оставить поле параметров функции пустым:

Функция the_excerpt не содержит вообще никаких настроек и просто выводит анонс заметки (без форматирования). Чтобы сделать ссылку читать далее после текста можно добавить следующий код под ней:

Здесь, как видите, никакой «связи» с WordPress тегом more нет, — просто выводится линк на текущий пост с нужным вам текстом. Этот же прием можно использовать с функцией the_content (без параметров), когда вы хотите расположить ссылку читать далее не сразу после текста, а в отдельном блоке, например, для реализации нестандартного дизайна кнопки.

Хаки для ссылки читать далее в вордпресс

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

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

По умолчанию при переходе на страницу с полным тектом заметки осуществляется прокрутка экрана до позиции после ссылки читать далее. При этом сам линк содержит дополнительный якорь по типу #more-555. Всего этого можно избежать, если добавить в файл functions.php такой код:

Изменение ссылки читать далее

Самый простой метод изменить читать далее в WordPress — это использовать базовый параметр $more_link_text в функции the_content. Тем не менее, вы можете полностью переопределить формат данной ссылки. Нужный для этого код в functions.php:

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

Кнопка читать далее в WordPress

Чтобы сделать кнопку читать далее нужно использовать соответствующие CSS стили. По умолчанию функция the_content добавляет в тег А специальный класс class=»more-link». Поэтому вам требуется лишь прописать в 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). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.

Advanced Excerpt — еще один wordpress плагин для читать далее. Он позволяет настроить некоторые параметры отображения анонсов постов в блоге без необходимости править файлы шаблона. Например, вы можете указать количество слов / символов в превью, переопределить базовый вывод анонса, добавить отображение тега more, если его нет, и т.п.

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

wordpressinside.ru

Если у вас есть блог и вы пишите в нем большие статьи, то вы наверняка использовали тег more.

Возможно вы хотели поменять эту ссылку на красивую кнопку.

В этой статье я расскажу о том как:

  • изменить текст ссылки (читать далее или more)
  • изменить адрес ссылки, а именно  убрать /#more-номер поста
  • ссылку переделать в кнопку

Вставить  тег more  не сложно.

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

Теперь поговорим как изменить текст ссылки в моем случае изначально он был  (Read the rest of this entry »)

Нам понадобятся файлы index.php, page.php , archive.php, single.php

Их можно найти через файловый менеджер /wp-content/themes/(название вашей темы)

Открываем сразу все файлы и ищем в них текст указанный ниже.

Не обязательно во всех файлах он будет! Те файлы в которых его не будет можно закрыть. В большинстве случаев потребуются index.php , archive.php

Между ковычек пишем текст, который нам нужен. Изначально в разных темах написан тот или иной текст. У меня был Read the rest of this entry

Я поменял на следующее

После сохранения у нас должно получиться что-то вроде этого

more2

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

Для этого нам понадобиться сделать некоторые правки в файле post-template.php
Он находится в каталоге /wp-includes
Находим следующую строчку:

Заменяем на:

Или просто убираем

Мы заменили текст, ссылки (читать далее), поменяли адрес,  смотреться не плохо, но как сделать  ссылку (читать далее)  в виде кнопки, чтобы она вписывалась в дизайн сайта?

Для этого нам в эту  строчку надо добавить несколько тегов, а так же прописать стили в css. Приступим.

Заменяем строчку которую правили ранее на ту что ниже:

Теперь наша ссылка находится в блоке с классом buttons, а класс самой ссылки more-link

Остается прописать стили в style.css который лежит либо в отдельной папке, либо в корне темы.

/wp-content/themes/название темы/css

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

Кратко поясню

.buttons a.more-link Преобразует нашу ссылку в кнопку

#content .buttons   Задает отступы сверху и снизу.

buttons a:hover, .buttons a.more-link:hover, .buttons input:hover
Изменяет цвет кнопки при наводе на нее

На этом пост заканчиваю, красивых вам кнопок! =)

mmechta.ru

Как заменить «читать далее» на своё

Извините, сначала хочу небольшое предисловие сделать, а затем уже перейдем к тому, как изменить «more». Для не терпеливых предлагаю сразу перейти непосредственно к пункту — как изменить «читать далее».

kak_zamenit_chitat_daleeАнализируя сайты вебмастеров по разным параметрам (посещаемость, PR, ТИЦ, позиции в поисковиках, авторитет в интернете), я обнаружила, что многие успешные проекты сделаны на бесплатных шаблонах (темах), видоизмененных под себя(например с измененным more и т.п.).

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

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

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

Многие успешные вебмастера не тратят время на поиск идеального или уникального (даже платная тема далеко не уникальна) шаблона (по своему опыту знаю, что эта история может затянуться на бесконечное время), а сосредотачивают силы на быстром запуске проекта, создании своих продуктов, обучении, наполнении контентом и продвижении. А шаблон для сайта — уникальный, свой, любовно сделанный на заказ — можно всегда сделать.

kak_uznat_kod_html

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

opartnerke.ru

The Excerpt Basics

Excerpts (teasers) can be shown on WordPress through two methods:

  • The first, keeping the the_content() template tag and inserting a quicktag called more at your desired «cut-off» point when editing the post.
  • The second, by replacing the the_content() template tag with the_excerpt().

In both cases, if you have set anything in the Excerpt meta box on the post editor screen, that text will be used. Otherwise, the excerpt will be automatically trimmed.

The most commonly used method is the first one, because the user editing the post can choose between showing the whole content or just the excerpt, individually for each post. However, using the_excerpt() in your template file can also get a teaser from the first 55 words of the post content, without the need to place a more quicktag in the post.

To add a more quicktag in your post, put your cursor where you want to end the excerpted content of your post and click the more quicktag button. quicktags are the little buttons found above the editing window in your Administration > Post > Add New Post. They include bold, italic, links, and others, and the famous more.

posteditor more button text.jpg

It will insert a code at that point that looks like this:

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on  his face and said  <!--more-->

The rest of the post continues in the editing window, but when viewed on the non-single/non-permalink web page such as archives, categories, front page, and searches, the post is shown as an excerpt to the more point.

Users can then continue reading more as you have enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the title and the above methods will generate it by default trailing your teaser, as the example below.

Read More Techniques

The parameters within the template tag the_content() are as follows:

<?php the_content( $more_link_text , $strip_teaser ); ?>  

The $more_link_text sets the link text like «Read More». The second one, $strip_teaser, sets whether or not the teaser part or excerpt part before the more text should be stripped (TRUE) or included (FALSE). The default is FALSE, which shows the teaser part.

To remove the teaser part:

  • Change the_content(); in your index.php to (i.e., the second parameter controls this):
the_content( '', TRUE );
  • Include <!--noteaser--> in the post text, immediately after the <!--more-->.

Prevent Page Scroll When Clicking the More Link

By default, clicking the .more-link anchor opens the web document and scrolls the page to section of the document containing the named anchor (#more-000). This section is where writers choose to place the <!--more--> tag within a post type.

Users can prevent the scroll by filtering the_content_more_link with a simple regular expression.

 function remove_more_link_scroll( $link ) { 	$link = preg_replace( '|#more-[0-9]+|', '', $link ); 	return $link; } add_filter( 'the_content_more_link', 'remove_more_link_scroll' ); 

Simply add the above code to the theme’s functions.php file and the named anchors are no more.

Modify The Read More Link Text

Adding this code to your functions.php file enables you to customize the read more link text.

 function modify_read_more_link() {  return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' ); 

Code reference: https://developer.wordpress.org/reference/hooks/the_content_more_link/

Modify the Read More text when using the the_excerpt()

Sometimes you can’t afford adding a more quicktag to all your posts, so the only way to show an excerpt is modifying the template, changing the_content() to the_excerpt(). It will show the text «Read More» (Version 4.1 and later) or «[…]» (older versions).

To customize this text, add the following code to your functions.php file.

 // Replaces the excerpt "Read More" text by a link function new_excerpt_more($more) {  global $post; 	return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>'; } add_filter('excerpt_more', 'new_excerpt_more'); 

If you are using a Child Theme, the above code will not work without modification if the parent theme has its own filters setting its own «more» link. You will need to use the remove_filter() function to remove the parent’s filters for yours to work. The problem is your functions.php file is loaded before the parent’s functions.php, so at the time of your file’s execution, there is no filter to remove yet, and your remove_filter() code will fail without warning.

The key is to put your remove_filter() code in a function that executes from an action hook that triggers after the parent theme is loaded. The following code is an example of the additional code needed to get the above code to work from a child theme of the parent theme Twenty Eleven. You will need to examine your actual parent theme’s code for the correct parameters in the remove_filter() code, they must exactly match the add_filter() parameters used by the parent.

 function child_theme_setup() { 	// override parent theme's 'more' text for excerpts 	remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );  	remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' ); } add_action( 'after_setup_theme', 'child_theme_setup' ); 

Customizing the «more…» text

Seeing that you know how it works, now look at how we can make this little invitation to continue reading your post be more inviting.

By design, the the_content() template tag includes a parameter for setting the text to be displayed in the the «more…» link which allows you to continue reading.

By default, it looks like this:

If you want to change the words from more…. to something else, just type in the new words into the template tag:

<?php the_content('Read on...'); ?>

Or get more sophisticated and make it fun:

<?php the_content('...on the edge of your seat? Click here to solve the mystery.'); ?>

You can style the text in the template tag, too.

<?php the_content('<span class="moretext">...on the edge of your seat? Click here to solve the mystery.</span>'); ?>

Then set the moretext class in your style.css style sheet to whatever you want. Here is an example of the style which features bold, italic text that is slightly smaller than the default text:

Some people do not want the text and prefer to use an extended character or HTML character entity to move the reader on to the full post.

<?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?>

Would look like this:

If you want to include the title of the post in the more text, use the_title() template tag::

<?php the_content("...continue reading the story called " . the_title('', '', false)); ?>

Having a custom text for each post

Although the_content() is usually called from the template with a standard text as described above, it is possible to have an individual text for certain posts. In the text editor, simply write <!--more Your custom text -->.

So, you may have something like this:

<!--more But wait, there's more! -->

Adding An Image

The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their Template Tags, including the more tag. To add an image, there are two ways to do it. Begin with the most simple — listing it in the_content() template tag.

This examples features the image of a leaf after the «Read More» text and assumes that the image file is within your theme’s images folder.

<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?>

Notice that the code uses an ALT and TITLE in the image tag. This is in compliance with accessibility and web standards, since the image is both an image and a link. Here is what it might look like.

You could even add a style to the image and more tag, as mentioned above, to style it even more. To use the image without the «Read More» text, just delete the text.

The second example uses the CSS background image. We have described how to use style classes in the above examples. This is a little tricker. The container’s style must be set to allow the background image to show out from behind the text. If you were to use the above example as a background image, the style.css style sheet for this might look like this:

.moretext {  width: 100px;   height: 45px;   background:url(/images/leaf.gif) no-repeat right middle;  padding: 10px 50px 15px 5px}

The 50px padding against the right margin should make sure the text is pushed over away from the image as to not overlap it. The height ensures that the container will expand wide enough so the image is visible within the container, since a background image isn’t «really there» and can not push against the container’s borders. You may have to experiment with this to fit the size and shape of your own image.

You have gotten the basics. From here, it is up to your imagination.

How to use Read More in Pages

Please remember that the «Read More» tag is used only on the Home page which shows the latest posts. It does not work in «Pages». If you want to turn it on in Pages too for showing a set of partial posts, use the following code inside the loop for the dynamic content:

 <?php global $more; $more = 0; ?> //The code must be inserted ahead of the call the_content(), but AFTER the_post()  <?php the_content('Continue Reading'); ?>  

When to set $more

It’s important that if you’re going to over-ride the default $more global variable you do it inside The Loop, but after your setup the post. If you’re working with the standard Loop and using the_post(), make sure you set $more after the_post (but before the_content().

See More tag ignored on static front page forum topic.

Retrieving content before or after the $more

If you are looking to retrieve the content that is before or after the (<!--more-->), the get_extended() function will provide this content for you. It returns an array with the content before the more link, the more link, and the content after the more link.

codex.wordpress.org


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector