Май
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)”

  • Зоя Кузнецова   06.02.2010

    Александр! Спасибо большое за информацию для чайников.

    Я совершенно ничего не знаю об этих тегах.

    И с удовольствием читаю такую конкретную информацию, то есть
    о тегах на Word Press.

    Расскажите, пожалуйста, обо всех.

    Спасибо большое заранее.

    С уважением
    Зоя Кузнецова

  • Зоя Кузнецова   06.02.2010

    Еще хочу спросить Вас.

    Почему рядом с моим комментарием нет фото.

    И как сделать это фото в комментариях.

    Если есть возможность — ответьте!
    Заранее благодарю

    С уважением
    Зоя Кузнецова

  • Andrew S.   06.02.2010

    Интересная заметка :)
    Позволю себе ответить Зои за автора: что бы вместо буквы G отображался ваш аватар, вам нужно зарегестрировать ваш e-mail на сайте gravatar.com, тогда при комментировании блогов связанных с этим сервисом, будет отображаться ваш аватар, а не тот, что идёт по умолчанию.

  • Sergeev   07.02.2010

    Зоя Кузнецова, это называется Gravatar. Как-то давно писал об этом у себя в блоге: http://egorsergeev.ru/internet/gravatar-ili-kak-postavit-avatar-v-kommentarii/

  • Hind   07.02.2010

    Конечно лучше смотрится с тегом «подробнее» — гораздо гораздо удобнее и привычнее

  • Юля   08.02.2010

    Автру спасибо)))Очень полезная для меня информация)))вынесла мнего хороших советов))

  • Богдан Киев   08.02.2010

    Для тех, кто уже давно делает сайты на wordpress, это информация не интересна, но для новичков самое то…:O)
    Помню, когда делал свой первый сайт на wordpress очень долго не мог понять для чего нужна эта кнопка :O)
    Сейчас активно изучаю Drupal — очень мощный инструмент для разработки сайтов.

  • Андрей   08.02.2010

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

  • delphix   09.02.2010

    Тег More на самом деле очень и очень полезная штука. Во первых он делает страницы (2,3,4,5…) и архивы более «уникальными» для поисковиков, то есть препятствует дублированию контента, а во вторых некоторые в полной записи умудряются вывести на месте тега — адсенс, кстати Тод нет кода у тебя такого?

  • Богдан Киев   09.02.2010

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

  • Валерий   09.02.2010

    Просто полный расклад….спасибо

  • Вильдан   12.02.2010

    Полезно, да еще и скриншотами, что еще лучше. Кста рекомендую всем кто не делает с more делать с more! Это важно для поисков, выше будут стоять ваши странички при ранжировании!

  • Leon   14.02.2010

    Когда то тоже не мог с этим разобраться. Спасибо, для начинающих это очень полезная статья.

  • wicked_kiD   21.02.2010

    2 Андрей: лично мое мнение — это вобще полный бред, не знаю ни одного человека, которы правит посы и убирает теги, да и бороться с дублированием надо при помощи robots.txt а не уборкой или добавлением тегов…

  • CPU   26.02.2010

    Знаю ещё одну хитрость с этим тегом, она позволяет легко заменять текст установленный по умолчанию «Читать далее». …Если в каких-то отдельных постах захотелось поменять дефолтный текст разрыва, то, просто перед закрытием тега пишите свой текст. Например, так В результате слова «а все подробности конкурса смотрите под катом» заменят «Читать далее» …или что там у вас по умолчанию. :)

  • CPU   26.02.2010

    А-аа ёксель-поксель… :) WordPress обрезал пример в прошлом моём комменте. В общем, свой текст вставляется в тег сразу после слова «more».

  • Саня Б.   15.03.2010

    Хороший пост! Как вы все разжевываете! Что самым юным вебмастерам понятно, как мне!

  • Сергей   23.03.2010

    2Александр, я вот с вами не согласен — на всех своих сайтах я убираю тег more — во-1, это убирает дублирование контенкта как тут правильно заметили, а во-2, делает более красивыми ссылки — без дурацкого добавления в конце #more#
    Предлагаю Вам добавить про эту возможность в данную статью, чтобы люди знали. Взять можете отсюда http://forum.maxsite.org/viewtopic.php?id=1115

  • insoco   01.04.2010

    а можно сделать так, чтобы часть текста скрывалась, а потом шло продолжение?

  • Tod   01.04.2010

    insoco, не совсем понимаю цель и суть данного метода, какая часть текста скрывалась, что за продолжение?

  • insoco   02.04.2010

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

  • insoco   02.04.2010

    нашёл, такое реализует плагин wpSpoiler, но для WP 2.9 не подходит

  • insoco   02.04.2010

    и ещё вопрос offtop число и количество комментариев у вас в верхнем левом углу — это шаблон реализует или плагин такой есть?

  • Egor   13.05.2010

    Добрый вечер!
    Подскажите пожалуйста, как можно вставить в оформление more кнопку (через класс)?
    Код в индексе вот такой:

    <?php if (is_search()) the_excerpt(); else the_content(__('Дальше ⇒‘, ‘kubrick’)); ?>

    Код класса кнопки:

    <input class="button" type="submit" name="more" value="» />

  • boocho   04.06.2010

    Спасибо автору за последнюю мысль. весь инет перерыл как переместить кнопку more. Продолжайте в том же духе. Желаю удачи!

  • Avalon   03.07.2010

    Спасибо, а то чета не мог понять как ета фишка работает

  • Konstantin   09.07.2010

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

  • Nagano   22.08.2010

    Спс за разъяснение функции the_excerpt()

  • Gle13   02.09.2010

    Здравствуйте, хотел бы задать вопрос про тег more.

    В шаблоне у меня для тега more прописано слово «Подробнее». В некоторых статьях мне нужно чтобы выходило тег more со словом «Видео». Я делаю это так: . Теперь сам вопрос, как мне сделать чтоб слово «Видео» было красным? В стилях у меня для класса more-link прописан цвет зеленый.

  • Tod   02.09.2010

    Gle13, код, видимо, не вставился. Если выводить ссылку в текстовом редакторе, то там должна быть возможность поменять цвет текста. Если через CSS, то добавить для ссылки новый класс и задать ему цвет красный. Хотя, все зависит от твоего решения, которое не отобразилось) Поэтому маякни лучше в аську или на почту — решим вопрос.

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


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

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

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

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

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

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

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