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

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

1. Yet Another Related Posts Plugin aka YARPP

Данный плагин является одним из наиболее популярных плагинов WordPress для отображения тематически связанных постов, он имеет более 3,4 миллиона закачек, а также поддерживает отображение связанных по содержанию записей в виде миниатюр и текста.

Достоинства:

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

Недостатки:

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

YARPP не совместим с WPML-плагином. Если вам нужен многоязычный сайт WordPress, выбирайте Polylang.

К тому же YARRP блокируется некоторыми хостинг-провайдерами WordPress.

2. Contextual Related Posts

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

Достоинства:

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

Недостатки:

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

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

3. Related Posts for WordrPress

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

Достоинства:

Related Posts for WordrPress фокусируется на производительности. Он работает быстрее, не замедляя работу сайта, а также поддерживает отображение связанных постов в виде миниатюр и текста.

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

Недостатки:

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

4. Yuzo Related Posts

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

Достоинства:

Плагин чрезвычайно прост в использовании и настройке. Он позволяет выбрать стиль, просто кликнув на него. Кэширование работает лучше, чем в YARPP и Contextual Related Posts. Плагин имеет легко настраиваемый виджет с большим количеством опций.

Недостатки:

Когда имеется большое количество опций, это не может не сказаться на быстродействии. Yuzo Related Posts – плагин быстрый, но не облегчённый.

5. Inline Related Posts

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

Достоинства:

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

Недостатки:

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

Небольшая подсказка

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

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

Другой вариант – вручную отображать похожие посты с миниатюрами без использования плагинов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приступаем к пункту третьему или какой там у нас уже? Тут я покажу, как я оформил свои похожие записи, но вы, возможно, захотите по-другому. Код стилей, который я приведу ниже, нужно вставить в файл стилей вашего сайта (желательно в конце для удобства). Он находится в корне темы оформления вашего сайта и называется 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 :

Код 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 без плагина. Это будет некое продолжение предыдущей статьи.

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

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

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

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

Сначала я даю видео-урок, где показал, как все сделать, а затем уже идет текстовая статья со всеми кодами и объяснениями.

Вт, собственно, сама часть кода.