Плагин Related Posts Thumbnails: вывод похожих записей с картинками для WordPress. Плагины для отображения похожих записей WordPress

Добрый день, постоянные читатели блога!

Вот появилось свободное время, и я решил написать еще одну статью.

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

Речь пойдет о выводе похожих записей на блоге с после каждой статьи.

Итак, похожие записи WordPress.

Что такое похожие записи? Для чего на блоге нужно выводить похожие записи?

На моем блоге можно их увидеть после каждой. Только называется список: «Другие интересные статьи».

Вывод таких записей необходим Вам для улучшения поведенческих факторов — увеличения времени нахождения посетителей на Вашем ресурсе.

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

Существует два способа для осуществления вывода похожих статей на сайте. Один из них с помощью плагина, другой — с использованием кода.

На моем блоге вывод похожих записей первое время осуществлялся с помощью плагина WordPress Related Posts. Но через некоторое время я удалил его и прописал код.

Нагружают сервер и тормозят загрузку блога по сравнению с кодом. Замена плагина кодом это своего рода оптимизация блога.

На тему увеличения скорости загрузки сайта советую Вам прочитать мою предыдущую статью – . Ну а теперь от теории к практике.

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

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

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

Ну а теперь предоставляю Вам сам код для вывода похожих записей на WordPress, который заменит плагин:

1. IGIT Related Posts With Thumb Image After Post

Только я начал рассматривать первый плагин как появились «небольшие проблемы». Модуль был актуален около года назад, но по непонятным мне причинам на wordpress.org его больше нет. Основная моя версия — там имелись определенные проблемы с безопасностью, но многие утверждают, что это «заслуга» не модуля а известной WP уязвимости с файлом timthumb.php. Видимо, из-за этого модуль GIT Related Posts больше недоступен, тем не менее, в интернете в блогах я нашел 2-3 источника (в рунете бесплатно, в англоязычном сегменте за $15), где ошибки исправлены и можно плагин скачать.

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

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

Данный плагин тоже имеет большое число хороших опций — отображение миниатюр не только в постах, но и на страницах + пользовательских типах записей, возможность разных настроек оформления (цвета фона, рамки, длина текстов описания и т.п.). Также в модуле есть возможность выбрать критерий, по которому будет определять схожесть материалов — по тегам и/или категориям, случайным образом или задаваться вручную. Можно указать источник миниатюр. Скачиваем плагин Related Posts Thumbnails .

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

В данном wordpress модуле опций по настройке меньше чем в предыдущих, но это не вызывает никаких проблем. Здесь вы сможете выбрать разные размеры миниатюр, а также их количество для отображения. Отличной функцией есть специальный эффект с отображением анонса поста при наведении на картинки. Кроме того, похоже, что плагин может выбирать изображения из картинок, которые имеются в посте, а не только брать их из «featured image». Да и автоматический ресайз картинок работает хорошо. Скачиваем отсюда .

Плюсы: Отлично справляется с ресайзом (изменением размера) картинок и хороший эффект при наведении.
Недостатки: Не очень много опций по оформлению.

Плагин WP-Thumbie позволяет контролировать число миниатюр, их размер, длину текста анонса (или отключать его), а также исключать страницы из списка или категории. Скачать модуль можно .

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

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

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

Итого

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

Есть ли здесь победитель? Автор статьи решил выбрать в качестве него модуль Wp-Thumbie. Во-первых, он хорошо ресайзит миниатюры — сразу понятно что за картинка перед вами, во-вторых, имеет базовый набор необходимых опций. С другой стороны, здесь нет горизонтального стиля отображения и анонсов, поэтому я бы, наверное, все же рекомендовал выбрать модуль исходя из ваших задач . Кроме того, я также настоятельно советую глянуть один из прошлых постов про , который имеет множество настроек и достаточно функциональный, если говорить о миниатюрах. В целом все модули достаточно неплохие более-менее одинаковые.

P.S. Интернет продажи могут стать очень выгодным, чтобы создать интернет магазин лучше обратиться в профессиональную веб-студию вашего города.
Хотите сэкономить при покупке или заказе услуг? — используйте купоны на скидки, с помощью которых можно очень выгодно и отдыхать.

Приветствую, уважаемые! Мало кто знает, что помимо всего прочего я еще изучаю веб-программирование. Эта статья открывает новую рубрику на нашем сайте, посвященную коду. Нет, это не уроки по какому-либо языку программирования, а просто полезные фрагменты кода, которые могут пригодиться вам, если у вас есть свой сайт. Например, сегодня мы поговорим про вывод похожих записей на движке WordPress . Почему эта тема? Потому что я сам столкнулся недавно с этой «проблемой» и хочу помочь другим.

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

А все мы хорошо знаем, что «похожие записи» в конце статьи или сбоку в сайдбаре очень положительно влияют на поведенческие факторы (внутренняя СЕО оптимизация). И первое, что приходит на ум – установить плагин, который бы выводил эти самые похожие записи.

Но всегда существует какое-то «НО…»!

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

Во-вторых, можно сутки потратить на поиски подходящего плагина и на его настройку, но в итоге так и не получить на выходе желаемый результат. Да, я тоже перепробовал несколько таких плагинов, а один из них даже провисел у меня на сайте почти полгода. Но выглядел он, мягко говоря, не очень (не будем называть имена).

Если есть хоть малейшие познания в движке Вордпресс и стилизации (CSS), то лучшим решением будет внедрить код напрямую в шаблон вашего сайта. Приступим!

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

Вот сам код (нажмите):

ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids = $individual_tag->term_id; $args=array("tag__in" => $tag_ids, "orderby"=>rand, "caller_get_posts"=>1, "post__not_in" => array($post->ID), "showposts"=>5); $my_query = new wp_query($args); if($my_query->have_posts()) { echo "

" rel="bookmark" title="">

Для тех, кто хоть немного разбирается в коде, понятно, что тут используется язык php , некоторые стандартные функции Вордпресс и все это элегантно завернуто в HTML разметку. Вставляем его в нужное место (у многих это файл single.php в корне темы). И что мы получаем на выходе? А вот что:

То, как «Похожие записи» выглядят без миниатюр

Да, этот код вывел нам похожие записи, но вывел их обычным списком и без миниатюр. Может кому-то такой вариант и подойдет, но не мне. Нужно срочно что-то с этим делать.

Для начала нужно избавиться от списка. Для этого заменяем теги «ul » (ненумерованный список) на теги «div » (простой блочный элемент) в двух местах (! ) и добавляем ему вразумительный идентификатор (чтобы потом было удобно стилизовать). Потом просто удаляем теги элементов списка «li » (только оставьте их содержимое).

Внутри «div» у вас сейчас осталась голая ссылка с заголовком записи в качестве текста. Для удобства я обернул заголовок еще в один тег. А теперь самое главное – добавляем миниатюру к записям. Для этого существует стандартная функция Вордпресс — the_post_thumbnail() , которая возвращает нам миниатюру записи в теге «img ».

Теперь у нас код выглядит немного иначе. Наши похожие записи уже выводятся с миниатюрами, и, как видите, мы смогли этого добиться без помощи сторонних плагинов. Но не советую оставлять все в таком виде. Выглядит это по-прежнему безобразно. Огромные картинки на ширину всей страницы. Еще и в ужасном качестве. А под ними подписи синего цвета (обычные ссылки). Можете вставить этот код и посмотреть на все своими глазами. Хотя в любом случае вставляйте, потому что в этот код мы лезть больше не будем.

Немного переделали, сравните (нажмите):

ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids = $individual_tag->term_id;
$args=array(
‘tag__in’ => $tag_ids,
‘orderby’=>rand,
‘caller_get_posts’=>1,
‘post__not_in’ => array($post->ID),
‘showposts’=>5
);
$my_query = new wp_query($args);
if($my_query->have_posts()) {
echo ‘

’;
while ($my_query->have_posts()) {
$my_query->the_post();
?>
» rel=»bookmark» title=»»>

}
echo ‘

’;
}
wp_reset_query();
}
?>

Приступаем к пункту третьему или какой там у нас уже? Тут я покажу, как я оформил свои похожие записи, но вы, возможно, захотите по-другому. Код стилей, который я приведу ниже, нужно вставить в файл стилей вашего сайта (желательно в конце для удобства). Он находится в корне темы оформления вашего сайта и называется style.css (но может и по-другому и находиться в папке, например, «css» или «styles»). Вот сам код:

Код стилей (CSS):

#similar_posts{
margin: 30px 0;
}

#similar_posts h4{
margin-bottom: 15px;
}

#similar_posts_wrapper{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

#similar_posts_wrapper a{
flex-basis: 19%;
text-align: center;
text-decoration: none;
color: inherit;
border-radius: 5px;
transition: background-color 0.3s;
}

#similar_posts_wrapper a img{
padding: 3px;
border-radius: 5px;
}

#similar_posts_wrapper a:hover{
background-color: lightblue;
}

@media screen and (max-width: 767px){
#similar_posts_wrapper{
flex-wrap: wrap;
justify-content: space-around;
}

#similar_posts_wrapper a{
flex-basis: 160px;
margin: 25px;
}
}

Застилизованные «Похожие записи». Чувствуете разницу?

В итоге мы получили красивые «похожие записи» с миниатюрами, которые к тому же еще и адаптивные и с едва заметным плавным переходом в ховер состояние (при наведении мыши). Надеюсь, у вас тоже все получилось.

Вместо итога:

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

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

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

Вы дочитали до самого конца?

Была ли эта статься полезной?

Да Нет

Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!

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

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

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

Почему следует отказаться от использования плагина?

Есть множество причин по которым следует предпочитать использование встроенного кода и функций WordPress плагинам.

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

Другая причина заключается в том, что вы избегаете риска использовать код плагина, который может "завесить" или замедлить работу сайта (хотя такие случае достаточно редко встречаются при использовании плагинов из официального каталога WordPress).

Данная функция разработана для использования на странице основной статьи (файл single.php ), но вы можете применять код там, где нужно в цикле WordPress. Для выбора похожих записей используются метки, которые проставляются для статей.

Миниатюры

У WordPress есть встроенная система для работы с миниатюрами, которая нам понадобится. Для ее использования нужно добавить данный код в файл functions.php вашей темы (в больинстве случаев такой код уже имеется в наличии).

Add_theme_support("post-thumbnails");

Также можно установить высоту и ширину миниатюры с помощью добавления следующей строки кода рядом с предыдущей:

Set_post_thumbnail_size(100, 50, true);

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

Код

Код добавляется в файл single.php :

ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids = $individual_tag->term_id; $args=array("tag__in" => $tag_ids, "post__not_in" => array($post->ID), "posts_per_page"=>4, // Количество записей, которые выводятся "caller_get_posts"=>1); $my_query = new wp_query($args); while($my_query->have_posts()) { $my_query->the_post(); ?>

Код the_post_thumbnail(array(150,100) устанавливает размер миниатюры, которая будет выводиться (в нашем случае 150px х 100px).

CSS

У нас используется два класса здесь: “.relatedposts ”, который используется для контейнера, и “.relatedthumb ”, который применяется к миниатюрам и ссылке, размещенным в контейнере. Предполагается, что ширина блока записи 640px. Код CSS:

Relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;} .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; } .relatedthumb {margin: 0 1px 0 1px; float: left; } .relatedthumb img {margin: 0 0 3px 0; padding: 0;} .relatedthumb a {color:#333; text-decoration: none; display:block; padding: 4px; width: 150px;} .relatedthumb a:hover {background-color: #ddd; color: #000;}

Выше приведенный код CSS выводит миниатюры записей шириной 150px. То есть, мы получаем 4 миниатюры на ширине записи 640px (включая поля между ними). Если нужно другое количество, то придется сделать настройки: например, если хочется разместить 5 миниатюр, то нужно установить ширину в классе .relatedthumb примерно 125px.

Важно: Ширина миниатюр, генерируемая установками медиа файлов WordPress, должна соответствовать значениям, используемым в CSS. Также нужно соответствие со значениями, установленными в коде PHP: the_post_thumbnail(array(150,100) .

Пример

Блог DigitalBattle использует описанный метод для формирования списка подобных записей:

Блок с похожими записями можно оформить как угодно. Например, очень популярен заголовок "Вам также может понравиться".

Заключение

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

Вывод похожих записей в WordPress является хорошим методом удержать посетителей на вашем сайте. Плагинов для реализации схожих записей достаточно много, и одним из самых популярных является плагин Yet Another Related Posts Plugin, или сокращённо YARPP.

Установка и настройка плагина

Скачать плагин вы можете бесплатно из официальной директории WordPress.org , или же установить автоматически через панель администрирования WordPress зайдя в раздел Плагины → Добавить новый. После установки и активации плагина, в меню Параметры вы найдёте новый пункт «Связанные посты» для его настройки.

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

Score (по умолчанию) — сортирует по сходству записей
Date — сортировка по дате статей
Title — сортировка по заголовку статей в алфавитном порядке

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

Стоит так же отметить раздел с настройками для RSS ленты. Здесь вы можете включить отображение похожих записей в вашей RSS ленте. Это эффективно особенно в том случае, если вы публикуете полные статьи в RSS ленте WordPress, а не только их анонсы.

После настройки плагина вы можете увидеть его в действии при переходе на любую вашу статью.

Как администратор сайта в скобках к каждой выбранной статье вы увидите значение её релевантности к основной статье в виде коэффициента. Посетители вашего сайта и читатели RSS ленты этих значений не увидят.

Как YARPP влияет на скорость загрузки сайта

Перебрать все статьи и найти между ними сходство — задача не из лёгких, особенно если у вас более десятка тысяч записей. К счастью в YARPP есть встроенный механизм кэширования результатов, который позволяет выполнять сложные расчёты лишь один раз.

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

Режим Custom/PHP

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

При активации режима Custom, YARPP создаст несколько дополнительных шаблонов для примера в вашей теме. Вы можете использовать их для создания собственного шаблона вывода схожих статей со своей собственной разметкой. Это хорошо сочетается с возможностью выводить схожие статьи в любом месте вашей темы с помощью функции плагина related_posts() .

YARPP Experiments

Если вы работаете над сайтом с огромным количеством статей и под высокой нагрузкой, то вам будет интересен плагин YARPP Experiments . Это официальный плагин от разработчика YARPP, который добавляет дополнительные настройки к основному плагину, включая управление кэшированием, снижение скорости расчётов схожести (поможет снизить нагрузку на сервер) и другие.

Если у вас возникли вопросы при использовании плагина YARPP, оставьте его в комментариях или задайте его нам в