Настройка анонсов записей, ссылки «читать далее» и тега more WordPress

11/03/2014 Настройка Wordpress

tag more Главная страница почти каждого в интернете блога представляет собой перечень анонсов статей. Как правило в качестве анонса используются первые пару абзацев статьи, в которых написано о чем будет статья и почему ее стоит прочитать. В конце анонса ставится ссылка «читать далее» или «подробнее», щелкнув на которую, вы попадаете на страницу с полным текстом статьи.

Сегодня мы научимся создавать такие анонсы и оформлять кнопку «читать далее». Удобнее всего создавать анонсы с помощью тега more, но мы рассмотрим так же и другие способы.

Содержание статьи:

Главная страница в wordpress — настройка вида
Тег more в WordPress
Поменять ссылку читать далее в wordpress
Внешний вид кнопки читать далее WordPress
Стандартные анонсы записей WordPress
Цитата WordPress — уникальные анонсы

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

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

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

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

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

Тег more WordPress

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

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

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

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

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

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

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

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

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

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

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

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

1. Кнопка как у меня

.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. Плоская кнопка

.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. Кнопка с тенью и градиентом
читать далее3

.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. Однако, такие анонсы выглядят не красиво и я не советую их использовать. Гораздо удобнее самому решать после какой фразы обрубать анонс.

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

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

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

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

Уникальные анонсы – функция «Цитата WordPress»

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

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

Если и вы так считаете и вам не лень каждый раз писать уникальные анонсы, читайте как это реализовать.

Включите функцию «Цитата». Для этого нажмите кнопку «настройки экрана» в правом верхнем углу и отметьте галочкой «Цитату».
Теперь под текстом статьи появилось поле «Цитата», куда нужно вводить уникальный текст анонса.
Чтобы цитаты заработали, нужно настроить в шаблоне стандартные анонсы, т.е. добавить код <?php the_excerpt() ?> вместо <?php the_content(‘'); ?>. Подробнее о стандартных анонсах читайте выше.

На мой взгляд, статья про анонсы и ссылки «читать далее» получилась исчерпывающей. Мы рассмотрели всевозможные варианты настройки анонсов и тега more. Надеюсь, это будет полезно!

«Предыдущая