Май
14
169

Ссылка читать далее в WordPress (тег read more)

читать далее wordpressРаньше в этом и других блогах я использовал полное отображение текстов постов на главной и в архивах. Однако с точки зрения SEO и юзабилити — это не лучший выбор. Дабы избавиться от дублирующего контента и сэкономить немного места на странице было принято решение сделать ссылки читать далее или (как их еще называют) тег more. В данной статье расскажу все, что знаю об этой функции.

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

Как сделать читать далее в 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 статье.

wordpress more

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

wordpress тег more

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

Теперь немного про использование тега more в шаблоне и, собственно, каким образом его можно выводить на вашем сайте. Для этой задачи вы можете применять функции 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 либо скрываться, функция принимает значение TRUE (прячется) или FALSE (отображается). По умолчанию он показывается.
  • $more_file – на какой файл указывает тег more (сейчас написано, что не используется).

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

<?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>

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

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

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

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

По умолчанию при переходе на страницу с полным тектом заметки осуществляется прокрутка экрана до позиции после ссылки читать далее. При этом сам линк содержит дополнительный якорь по типу #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' );

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

Самый простой метод изменить читать далее в WordPress — это использовать базовый параметр $more_link_text в функции the_content. Тем не менее, вы можете полностью переопределить формат данной ссылки. Нужный для этого код в 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>';
}

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

Кнопка читать далее в 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

Чуть выше, при описании функции 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 репозитории можно найти парочку полезных модулей под определенные задачи. Я сталкивался с двумя из них:

Плагин Page Links To — позволяет сделать перенаправление поста блога по адресу, отличному от значения текущей записи. По умолчанию система WP отображает анонсы публикации в хронологическом порядке, а при клике по их заголовкам или ссылке читать далее переходит на страницу с полным текстом конкретной заметки. Однако после активации модуля в админке появится новое поле, где вы сможете указать свой линк для перехода. При этом устанавливается 301 редирект (допускается выбор 302 Moved Temporarily). Это может быть полезным, если вы хотите вывести в списке всех постов анонс с переходом на произвольную страницу сайта.

Rich Text Excerpts — полноценный визуальный редактор для анонсов постов и записей WordPress сайта. Сможете легко оформить текст отрывка без знания HTML-тегов.

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 19, средний балл: 5,16 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , .

комментариев 169 к статье “Ссылка читать далее в WordPress (тег read more)”

  • Виктор   09.07.2012

    Когда используешь поиск по сайту, то выдает все равно это убогое [далее] , посоветуйте где можно поправить. В index.php, archive.php исправил, результата нет

  • Tod   09.07.2012

    Виктор, для поиска используется файл search.php, полезно будет почитать статью улучшаем страницу с результатами поиска в wordpress по этой же теме.

  • Ольга   21.08.2012

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

  • Tod   21.08.2012

    Ольга, как я понял тег ставится, но просто не работает — это значит, что так настроено в шаблоне с помощью функции the_content или других. Это нужно разбираться в файлах index.php или archive.php (хотя если шаблон новый, то в других). В общем, конкретнее подсказать не смогу — надо искать проблему в шаблоне.

  • Владимир   17.09.2012

    Здравствуйте. Помогите пожалуйста советом: Мне на сайте нужно, что бы рублики отображались каждая на собственной странице. Но с этим я вроде как разобрался :) (по-создавал в теме что-то типо news.php и копировал всё из index.php с некоторыми дополнениями). Однако появилась проблема: В статьях, опубликованных на этих странницах Отсутствует «Читать далее»! То есть на главной странице в этих же статьях «Читать далее» есть, а на тех страницах где нужно нет. :(

    Вот такая вот печалька, буду рад принять любую помощь)

    P.S.: Плюс ко всему, там же (на этих же, мноюсозданных страница) не отображается под статьями кнопки плагина Share Buttons :(

  • Tod   18.09.2012

    Владимир, с копированием index.php сделали все правильно, но тогда теоретически эта кнопка должна быть. я бы еще посмотрел коды файлов home.php и archive.php — может там найдете ответ для решения этой задачи. Но вообще выводит ссылку читать далее функция the_content — в разных шаблона по разному все реализовано, поэтому я бы искал именно ее в файлах и потом уже экспериментировал.

  • Владимир   18.09.2012

    Благодарю вас за ответ!) Решил проблему другим путём!) Понял, что зря всё это делал и выполнил задачу обычным созданием меню! :) Недостаток информации порой заставляет бегать по кругу :)

  • Алексей   16.10.2012

    Блин! Спасибо Автору, выручил офигенно……

  • Denis Creative   30.11.2012

    А подскажите, как вывести не просто первую фразу, а чтобы отображалась нужная конкретная фраза из поста в анонсе в категории?..

  • Tod   01.12.2012

    Denis, для вывода нужной фразы я бы гуглил решение через «произвольные поля» custom fields — это может помочь.

  • Portal   11.01.2013

    Отличный материал. Спасибо большое!

  • GadZZillA   20.01.2013

    А в каком файле нужно помещать данный тег?

  • Tod   20.01.2013

    GadZZillA, данный тег размещается не в файле, а в текстовом редакторе при написании поста.

  • SkyWay   10.02.2013

    Здравствуйте. Разместил данный тег в своих статьях, всё хорошо работает. Но есть одно неприятное «но», при переходе по «Далее», открывается не начало поста, а с того места где этот тег вставлен, то есть чтобы увидеть начала поста надо пролистать вверх, код страницу получается: ?p=522#more-522 , хотя чтобы было нормально должен быть вида ?p=522. Подскажите как это поправить?

  • Tod   11.02.2013

    SkyWay, для этого в функции the_content нужно оставить «пустые кавычки», а потом после нее добавить код, указанный в конце статьи. В таком случае ссылка будет без #more и следовательно вести на начало поста.

  • Елена   12.03.2013

    Владимир 17.09.2012 задавал вопрос «В статьях, опубликованных на этих странницах Отсутствует «Читать далее»! То есть на главной странице в этих же статьях «Читать далее» есть, а на тех страницах где нужно нет. :( » . Так как решение вопроса для Владимира уже не актуально, то может быть кому-нибудь понадобится. Я решила это так: в файл archive.php после функции до закрывающего тега написала следующее
    Проблема решена! Кстати, спасибо автору за статью!

  • Tod   12.03.2013

    Елена, код, к сожалению не добавился) Нужно использовать:
    <pre lang="html">…</pre>

  • Александр   31.03.2013

    Подскажите пожалуйста
    поставил тему (Sliding Doorа) в ней уже эта функция, а мне она не нужна, как сделать наоборот что бы при открытии рубрики открывалась вся рубрика без continue reading

  • Tod   31.03.2013

    Александр, нужно оставить параметр пустым.

    the_content('');
  • Александр   31.03.2013

    Шаблон вложений attachment.php я уже здесь так сделал и не чего не изменилось
    ?>

    » . __( ‘Pages:’, ‘slidingdoor’ ), ‘after’ => » ) ); ?>
    но я так понял что надо изменить еще и здесь Функции темы (functions.php) а вот как не знаю
    подскажите пожалуйста вот этот кусок
    /**
    * Returns a «Continue Reading» link for excerpts
    *
    * @since Sliding Door 1.0
    * @return string «Continue Reading» link
    */
    function slidingdoor_continue_reading_link() {
    return ‘ ‘ . __( ‘Continue reading →’, ‘slidingdoor’ ) . ‘‘;
    }

    /**
    * Replaces «[…]» (appended to automatically generated excerpts) with an ellipsis and slidingdoor_continue_reading_link().
    *
    * To override this in a child theme, remove the filter and add your own
    * function tied to the excerpt_more filter hook.
    *
    * @since Sliding Door 1.0
    * @return string An ellipsis
    */
    function slidingdoor_auto_excerpt_more( $more ) {
    return ‘ …’ . slidingdoor_continue_reading_link();
    }
    add_filter( ‘excerpt_more’, ‘slidingdoor_auto_excerpt_more’ );

    /**
    * Adds a pretty «Continue Reading» link to custom post excerpts.
    *
    * To override this link in a child theme, remove the filter and add your own
    * function tied to the get_the_excerpt filter hook.
    *
    * @since Sliding Door 1.0
    * @return string Excerpt with a pretty «Continue Reading» link
    */
    function slidingdoor_custom_excerpt_more( $output ) {
    if ( has_excerpt() && ! is_attachment() ) {
    $output .= slidingdoor_continue_reading_link();
    }
    return $output;
    }
    add_filter( ‘get_the_excerpt’, ‘slidingdoor_custom_excerpt_more’ );

    /**
    * Remove inline styles printed when the gallery shortcode is used.
    *
    * Galleries are styled by the theme in Sliding Door’s style.css.
    *
    * @since Sliding Door 1.0
    * @return string The gallery style filter, with the styles themselves removed.
    */
    function slidingdoor_remove_gallery_css( $css ) {
    return preg_replace( «#(.*?)#s», », $css );
    }
    add_filter( ‘gallery_style’, ‘slidingdoor_remove_gallery_css’ );

    if ( ! function_exists( ‘slidingdoor_comment’ ) ) :

  • василий   01.04.2013

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

  • Tod   02.04.2013

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

  • василий   02.04.2013

    А вы не подскажите как сделать чтоб, я страницы делаю( у меня их уже много)И стр в верхем меню появляются ,и с права меню тоже поювляются Вот как сделать чтоб в верхнем меню не появлялись больше,а только в боковом меню.но чтоб в верхем меня осталось только 4-6стр ,а остальные стр их гдето 30 в боковом меню размещались.

  • Tod   03.04.2013

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

  • Сергей   10.04.2013

    У меня в index.php нет <?php the_content
    Везде где можно менял read more бесполезно.
    В шаблоне 6 видов шаблонов для разных страниц.

    Testimonials
    News
    Products
    Slides
    Portfolio
    Gallery

    Где искать подскажите, шаблон русифицирован.

  • Tod   11.04.2013

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

  • Сергей   11.04.2013

    Спасибо за беспокойство. Нашел, при редактировании, или создании новой статьи, есть отдельно пункт где можно писать свою надпись. Я ее просто не заметил. Это особенность админки шаблона.

  • Елена   23.08.2013

    У меня вдруг тег More стал устанавливаться сразу после первого слова в записи. Я его в редактировании переставляю после первого абзаца, но он упорно возвращается на место (после первого слова).
    Не могу понять, что я сделала, почему он с сегодняшнего дня стал неправильно работать?
    Заранее благодарна за помощь.

  • Tod   23.08.2013

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

  • Алексей   30.08.2013

    Автору + давно искал кнопку как сделать с функцией читать далее, а то на некоторых шаблонах ее попросту нету

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости