Как добавить "похожие заметки" под статьями в WordPress (продвинутый уровень)

WordPress — "похожие заметки" под статьями (продвинутый уровень)Около месяца назад я добавил WordPress-плагин — Related Posts, который в колонке выводит виджет "Похожие записи", но он себя не оправдал, т.к. там его никто не замечает. Статистика показала, что за целый месяц всего несколько человек кликнули по его ссылкам, при этом, почти каждый третий посетитель кликает ссылки "следующая заметка" или "предыдущая заметка" под статьями. Поскольку мой блог имеет широкий тематический охват, то вышеупомянутые ссылки, естественно, выдают людям не интересующие их статьи и, как следствие, они уходят. Не нужно быть гением, чтобы понять, что блок ссылок "Похожие заметки" должен располагаться сразу под статьей не только из соображений SEO, но и для удобства читателей. Сразу предупреждаю — это решение для тех, кто имеет представление о PHP, HTML и CSS. Под катом я опишу своё решение этой задачи.

За основу был взят WordPress-плагин IGIT Related Post With Thumb. Страница плагина IGIT Related Posts With Thumb в каталоге WordPress.

Устанавливаем его. Заходим в настройки:

IGIT Related Post With Thumb — меню / настройки

Вы можете поиграться с настройками самостоятельно, но более чем уверен, результат вас не особенно впечатлит. Изображения съезжают, тексты кривые, подсветка тоже не ахти какая. Поэтому лучше настроить всё вручную. Вот скрин моих настроек (для удобства я пронумеровал пункты и ниже их опишу):

IGIT Related Post With Thumb — настройки плагина

#1. Если флаг установлен, то плагин будет автоматически добавлять свой код в конец статьи. Меня это не строило, т.к. у меня сразу после статьи установлены иконки "Поделиться с друзьями".

#2. Это код, который надо скопировать и вставить в шаблон, если флаг из пункта #1 не установлен (что я и сделал).  В моем шаблоне, я вставил его в файл content-single.php. Не буду приводить пример кода, т.к. в разных шаблонах это может выглядеть по-разному.

#3. Текст заголовка блока, вместе с обрамляющими HTML-тегами. У меня это теги H4 и надпись "Похожие записи".

#4. Текст, который будет отображаться в случае, если похожих записей не найдено. Вообще-то, лучше всего вообще не выводить этот блок в этом случае, но у меня еще не дошли руки для подобной модификации, поэтому, я вписал текст "Похожих записей не найдено :-(".

#5. Список, в котором можно отметить те категории, в которых данный блок отображаться не будет. У меня нет таких категорий, поехали дальше...

#6. Целое число: сколько максимально похожих записей вы хотите показывать. И там же рекомендация, что лучше показывать не более 4-х. Поскольку у меня список отображается компактно, без картинок, я указал — 6.

#7. Флаг: "Показывать изображения?". У меня он не установлен, поэтому изображения не отображаются.

#8. Флаг: "Показывать заголовок?" и комментарий: "Отображается только при горизонтальном типе вывода". У он включен, т.к. я хочу, чтобы он отображался.

#9. Флаг: "Отображать полный заголовок?". В текущей версии плагина эта опция глючит! Он все-равно обрезает заголовок до 45 символов. Поэтому я отключил этот фоаг и указал максимальное количество символов заголовка в следующем пункте.

#10. Целое число: максимальное количество символов в заголовке (длина заголовка). У меня указана 99 символов, т.к. я и без того не делаю длинных заголовков в статьях и не переживаю за "мусор" в отображении.

#11. Группа настроек внешнего вида. Я их игнорирую, т.к. настраиваю стили с помощью CSS.

#12. Выбор из 3 вариантов: 1) отображать вертикально; 2) отображать горизонтально; 3) отображать горизонтально в виде обычного списка. Поскольку я оформляю список сам, то мне подходит 3-й вариант.

Отображение и настройка списка "Похожие заметки"

Начнем с того, что нам надо отключить "родные" стили этого плагина. Для этого в консоли WordPress заходим в установленные плагины, находим IGIT и выбираем "Изменить". Там находим секцию запуска, которая выглядит примерно так:

if(is_admin()) {
// то, что выполняется при вызове настроек плагина
}
else
{
// то, что выполняется при обычном выводе страницы в блоге
}

Находим и комментируем строку:

add_action('wp_head', 'igit_add_css_style');

Это предотвратит загрузку стилей плагина в "шапку" страницы. Теперь нам надо изменить структуру вывода списка, т.к. в самом плагине она реализована, мягко говоря, жутковато. Ищем файл: wp-content/plugins/igit-related-posts-with-thumb-images-after-posts/inc/core.php, в нем находим строку, где начинает формироваться вывод:

$output = '<div ...';

далее смотрим внимательно что и как там дальше добавляется в этот самый $output. Я привел его к виду:

<div class="ctt-related-posts">
<h4>Заголовок:</h4>
<ul>
<li><a href="...">...</a></li>
...
</ul>
</div>

Семантически простой и правильный список. Теперь заходим в темы оформления и редактируем CSS текущей темы, добавляя в конец стили для списка:

.ctt-related-posts { margin: 2em 0; }
.ctt-related-posts H4 { color: #788c59; font-family: Arial; font-size: 24px; font-weight: normal; margin: 1em 0; }
.ctt-related-posts UL { list-style: disc outside; margin: 1em 0 1em 2em; }
.ctt-related-posts UL LI { margin: .5em 0; }

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

Поделитесь с друзьями:



Один комментарий к “Как добавить "похожие заметки" под статьями в WordPress (продвинутый уровень)

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>