Друзья, всем привет. Сегодня поговорим о том, как создать список похожих статей в WordPress без плагина. Похожие материалы улучшают поведенческие факторы. Обычно их размещают в конце статьи, так чтобы посетитель мог ознакомиться с другими статьями по теме.
Таким образом, если вы заинтересовали посетителя, то он задержится на вашем сайте подольше, а похожие статьи помогут ему лучше разобраться в решении его проблемы.
Создать список похожих статей с миниатюрами и без, можно чистым кодом php или плагином. Каждый выбирает свой путь.
До недавнего времени у меня на блоге использовался для этого плагин WordPress Related Posts. Хороший плагин, красиво можно оформить, под любой дизайн, вывод похожих статей.
Только вот в борьбе за скорость загрузки сайт я решил заменить этот плагин на простой код. Потому что этот плагин тормозил загрузку моего блога от 0,5 до 0,9 секунды в зависимости от времени и нагрузки.
И поэтому я решил использовать код php для вывода похожих статей, который позволяет выводить статьи, сортирую их по тегам или категориям (рубрикам).
Как правило, список похожих статей выводится в конце статьи. В большинстве тем WordPress за статьи (записи) отвечает файл single.php. Именно в этот файл нужно вставить код, отвечающий за вывод похожих статей.
Шаг 1: поиск места для вставки кода.
У всех нас разные шаблоны и структура их немного отличается друг от друга. К примеру, в моей теме, вообще, нет файла single.php. Я создал , и все доработки делаю через файл функции темы. А это на порядок сложней, чем править обычные файлы.
Для определения правильного места вставки кода, вам нужно сначала посмотреть на станицу, найти на ней основные элементы и тогда в исходном коде вам будет проще найти необходимое место для код.
Как видно на скриншоте, подходящее место для вставки кода, находится после окончания статьи, перед навигацией.
После этого фрагмента можно вставить код похожих статей. В моём примере дальне будет идти код навигации.
Шаг 2: вставка кода похожих статей.
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"=>5
,
"ignore_sticky_posts"=>1);
$my_query = new wp_query($args);
if($my_query->have_posts()) {
echo "
";
while ($my_query->have_posts()) {
$my_query->the_post();
?>
- " rel="bookmark" title="Перейти к статье
">
";
}
}
$post = $backup;
wp_reset_query();
?>
Теперь после каждой статьи будет выводиться список похожих статей, релевантность которых определяется по тегам.
Внешний вид списка будет соответствовать дизайну вашего сайта, так как стили, определённые в шаблоне, распространяются и на этот список.
Но, если вы захотите внести изменения в стили, то вы всегда можете использовать класс relatedPosts и задать свои стили. Этот класс я уже добавил в основу списка.
Также вы можете изменить в коде элементы, отмеченные оранжевым цветом.
К примеру, вы захотите вывести похожие статьи не по тегам, а по категории. Предложив посетителю, ознакомится с похожими материалами из этой категории.
Тогда, действуя по описанному выше алгоритму, вы вставляете вот этот код:
Похожие статьи из категории:
ID);
if ($categories) {
$categories_ids = array();
foreach($categories as $individual_category) $category_ids = $individual_category->term_id;
$args=array("category__in" => $category_ids,
"post__not_in" => array($post->ID),
"posts_per_page"=>5
,
// Количество похожих статей.
"ignore_sticky_posts"=>1);
$my_query = new wp_query($args);
if($my_query->have_posts()) {
echo "
";
while ($my_query->have_posts()) {
$my_query->the_post();
?>
- " rel="bookmark" title="Перейти к статье
">
";
}
}
$post = $backup;
wp_reset_query();
?>
Этот код сортирует статьи только по категории. Теги уже не играют никакой роли.
Добрый день, постоянные читатели блога!
Вот появилось свободное время, и я решил написать еще одну статью.
На мой взгляд, это будет достаточно полезная информация, изучив которую, Вам нужно будет сразу же применить её на практике.
Речь пойдет о выводе похожих записей на блоге с после каждой статьи.
Итак, похожие записи WordPress.
Что такое похожие записи? Для чего на блоге нужно выводить похожие записи?
На моем блоге можно их увидеть после каждой. Только называется список: «Другие интересные статьи».
Вывод таких записей необходим Вам для улучшения поведенческих факторов — увеличения времени нахождения посетителей на Вашем ресурсе.
Другая важная функция заключается в том, что похожие записи
улучшают внутреннюю перелинковку на блоге. О внутренней перелинковке Вы можете прочитать в моей предыдущей статье о .
Существует два способа для осуществления вывода похожих статей на сайте. Один из них с помощью плагина, другой — с использованием кода.
На моем блоге вывод похожих записей первое время осуществлялся с помощью плагина WordPress Related Posts. Но через некоторое время я удалил его и прописал код.
Нагружают сервер и тормозят загрузку блога по сравнению с кодом. Замена плагина кодом это своего рода оптимизация блога.
На тему увеличения скорости загрузки сайта советую Вам прочитать мою предыдущую статью – . Ну а теперь от теории к практике.
Принцип по которому работает код довольно прост. После его установки в конце каждой статьи будут выводиться предыдущие статьи из той же рубрики что и эта.
Предыдущие статьи будут соответствовать тематике написанной, что мне кажется, вполне логично.
Ведь если посетитель дочитал Вашу статью до конца, значит, ему интересна эта тема и вполне возможно заинтересуют и другие похожие посты.
Ну а теперь предоставляю Вам сам код для вывода похожих записей на WordPress, который заменит плагин:
Читайте также:
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category)
$category_ids = $individual_category->term_id;
$args=array(
"category__in" => $category_ids,
"post__not_in" => array($post->ID),
"showposts"=>5,
"caller_get_posts"=>1);
$my_query = new wp_query($args);
if($my_query->have_posts()) {
echo "
";
while ($my_query->have_posts()) {
$my_query->the_post();
?>
- " rel="bookmark"
title="">
";
}
wp_reset_query();
}
?>
Скопируйте его через проводник в буфер обмена и зайдите в админку блога. Затем зайдите во Внешний вид—> Редактор и выберите файл для редактирования single.php. Вставьте код в этот файл после строк:
Не забудьте нажимать «Обновить файл».
Найдите в этом коде строчку:
"showposts"=>5,
Нашли? Цифра 5 в этой строке как раз обозначает количество похожих записей, которые будут выводиться на Вашем ресурсе после каждой статьи.
Хочу сразу предупредить о том, что если у Вас в одной из рубрик меньше количество статей, чем указано в данной строчке кода, то в этом случае отображаться будет только доступное количество статей.
Если у Вас много статей в рубриках, тогда можете сделать вывод и 10 и 15 статей, поменяв при этом всего одну лишь цифру. Это самая основная настройка кода.
Кроме этого Вы можете в файле таблица стилей (style.css) прописать коды для изменения внешнего вида ссылок похожих записей.
Можно, например, изменить шрифт, цвет, фон или стиль текста ссылок.
Также можно сделать на заднем фоне или создать красивую рамку для списка этих записей.
К слову можно подогнать этот список под дизайн Вашего блога. Я как Вы можете заметить, не стал использовать CSS, потому что меня вполне устраивает основная настройка кода. Ссылки с похожими записями вполне вписываются в дизайн моего блога.
На этом все. Вот такая небольшая, но надеюсь полезная статья.
Примените эту информацию на практике — этот способ будет намного эффективнее, чем простая установка плагина.
Также советую вам установить . Эта фишка отлично помогает в продвижении веб-ресурса!
Похожие посты – это блок со ссылками на материалы, которые, так или иначе, будут интересны читателю текущей записи. Вывод такого блока положительно сказывается на поведенческих факторах, степени и скорости индексированной страниц и, в общем, трасте сайта.
В этой статье я приведу обзор нескольких плагинов, которые выводят похожие статьи в WordPress. Выберите среди них лучший вариант, который удовлетворяет именно вашим потребностям.
Начну с условно бесплатного плагина. CP Related Posts в бесплатной версии имеет следующие возможности:
- управлять заголовком блока и количеством похожих постов;
- выбирать процент схожести материалов (в других плагинах этого нет, надо заметить);
- выключать и включать показ миниатюры в блоке, а также выбирать её размер;
- управлять количеством символов в выдержке;
- дизайнерские опции;
- и другие традиционные для плагинов этого типа опции.
В платной версии добавляется:
- возможность выбора типов записей, которые будет обрабатывать плагин;
- выбор вида иконок, которые будут показывать процент похожести (у плагина есть функция вывода степени похожести постов с текущей записью);
- выбор макета блока.
Платная версия стоит 29$. За эти деньги приобретаются три вышеописанные возможности, а также услуги поддержки на два месяца. Однако большинству сайтов хватит и бесплатных функций.
К особенностям плагина относится то, что похожие посты, кроме традиционного места (под записью), можно вывести с помощью виджета в сайдабре. Кроме того, как я указал выше, есть возможность определения степени похожести, и вывода индикатора похожести.
Related Post
Простой плагин с простым названием, который выводит похожие посты. Полностью бесплатный, и со всеми необходимыми настройками. Все опции собраны в одноименном пункте консоли, который образуется после активации дополнения. Среди них имеются следующие:
- количество выводимых записей;
- заголовок блока;
- размер и цвет шрифта.
Блок похожих записей выводится с миниатюрами, но настраивать сами миниатюры нельзя.
Особенности у плагина такие – в отличие от других аналогов, это дополнение не выводит блок похожих записей автоматически, а предоставляет PHP код и шорткод, которые можно поместить либо в файл установленной темы, либо в виджет, или даже непосредственно в текст записи или страницы.
Related Posts by Zemanta
Бесплатный и функциональный плагин, который выводит похожие посты. Отличается простотой и традиционностью в настройках, в нём нет ничего лишнего, ничего особенного, всё то, к чему мы привыкли.
Опции находятся в пункте «Настройки», подпункте «Related Posts by Zemanta»:
- изменение заголовка блока;
- управление количеством записей;
- можно определить, насколько старые записи не будут выводиться в блоке похожих;
- замечательная возможность изменения макета блока, есть семь готовых вариантов, которые можно по-своему кастомизировать, в том числе и с помощью
- и другие функции.
Плагин хороший, и в умелых руках сыграет полноценную роль.
Замечательный многофункциональный плагин, частично переведённый на русский язык. Имеется множество возможностей, которые позволяют заточить похожие посты под свои нужды. Всё это бесплатно.
- вывод блока автоматически под записью или с помощью PHP кода в любом месте, а также есть виджет для сайдбара;
- фильтры по типам записей и рубрикам;
- определение заголовка блока и количества постов в нём;
- настройки миниатюр;
- тонкая настройка внешнего вида в части размеров, цветов, шрифтов;
- настройка метода определения похожести.
Плагин отличный, стабильный и проверенный практикой.
Доброго дня! Мы уже не раз говорили о том, насколько важно проводить внутреннюю оптимизацию на сайте. Один из способов сделать эффективную внутреннюю перелинковку – вывод похожих записей внизу каждой статьи. Такое дополнение позволяет увеличить длительность пребывания посетителей на сайте, уменьшает показатель отказов, а соответственно положительно сказывается на . О том, как добавить похожие записи на WordPress-блог, какие плагины для этого подойдут, а также о том, как это сделать без плагинов пойдет речь в сегодняшней статье.
Есть два варианта вывода похожих записей под статьей – по категориям и по тегам (меткам). Теги позволяют показывать схожие по тематике статьи, которые могут относиться к разным разделам. За вывод статьи отвечает файл single.php. Если кто забыл, можно ознакомиться со статьей про .
Т.е. чтобы добавить похожие записи без плагина к статье, нам нужно вставлять код непосредственно в single.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
Читайте также
ID
)
;
if
($categories
)
{
$category_ids
=
array
()
;
foreach
($categories
as
$individual_category
)
$category_ids
=
$individual_category
->
term_id
;
$args
=
array
(
"category__in"
=>
$category_ids
,
"post__not_in"
=>
array
($post
->
ID
)
,
"showposts"
=>
3
,
"orderby"
=>
rand
,
"caller_get_posts"
=>
1
)
;
$my_query
=
new
wp_query($args
)
;
if
( $my_query
->
have_posts
()
)
{
echo
" "
;
while
($my_query
->
have_posts
()
)
{
$my_query
->
the_post
()
;
?>
-
" rel="bookmark" title="
">
"
;
}
wp_reset_query()
;
}
?>
|
Читайте также
ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids = $individual_category->term_id;
$args=array("category__in" => $category_ids,
"post__not_in" => array($post->ID),
"showposts"=>3,
"orderby"=>rand,
"caller_get_posts"=>1);
$my_query = new wp_query($args);
if($my_query->have_posts()) {
echo "
";
while ($my_query->have_posts()) {
$my_query->the_post();
?>
- " rel="bookmark" title="">
";
}
wp_reset_query();
}
?>
- Если заменить строку "category__in" => $category_ids, на такую: "tag__in" => $tag_ids, то сортировка похожих записей будет осуществляться по тегам.
- В этом коде следует обратить внимание также на строку "orderby"=>rand, . Она отвечает за случайный порядок вывода ссылок на записи. Если вы хотите, чтобы записи были показаны согласно датам создания, эту строку следует убрать.
- Cтрока "caller_get_posts"=>1 запрещает повторение записей под постом.
- Cтрока "showposts"=>3, указывает на количество выводимых записей.
Приведенный код нужно вставлять сразу после вывода статьи в файле single.php.
Но это еще не все. Если вы хотите, чтоб по ссылкам похожих записей переходили, вам придется дополнительно их оформить. Для этого нужно внести изменения в файл стилей style.css.
Чтобы получилось, как на данном , добавьте следующий код:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| #related_posts
{
margin-right
:
-25px
;
}
#related_posts
p{
font-size
:
18px
;
}
#related_posts
li{
float
:
left
;
width
:
205px
;
margin
:
0
20px
20px
0
;
padding
:
4px
;
background
:
#f8f8f8
;
/* цвет фона серый*/
height
:
160px
;
}
#related_posts
li:
hover
{
background
:
#f6fffd
;
/* смена фона на голубой при наведении */
}
#related_posts
li a{
text-align
:
center
;
display
:
block
;
padding
:
5px
;
color
:
#222
;
/* цвет ссылок */
}
#related_posts
li img{
width
:
195px
;
height
:
117px
;
}
|
#related_posts{
margin-right: -25px;
}
#related_posts p{
font-size: 18px;
}
#related_posts li{
float: left;
width: 205px;
margin: 0 20px 20px 0;
padding: 4px;
background: #f8f8f8; /* цвет фона серый*/
height: 160px;
}
#related_posts li:hover{
background: #f6fffd; /* смена фона на голубой при наведении */
}
#related_posts li a{
text-align: center;
display: block;
padding: 5px;
color: #222; /* цвет ссылок */
}
#related_posts li img{
width: 195px;
height: 117px;
}
Внося изменения в код, вы можете выводить записи с миниатюрами различного оформления и стиля.
Если вы отдаете предпочтение плагинам, то вот несколько из них для выводапохожих записей: WordPress Related Posts, Simple Tags, Similar Posts или Yet another related posts.
Наиболее популярный WordPressRelatedPosts анализирует содержание статьи и подбирает соответствующие ей посты с вашего блога. Преимуществом данного плагина похожих записей перед остальными является то, что он наиболее легкий, т.е. меньше других нагружает сервер. Читайте « ». В настройках WordPressRelatedPosts так же, как и с помощью кода, но без лишних трудов, можете указать количество выводимых записей, принцип сортировки (по дате, случайный, по популярности). Также вы можете выводить посредством плагина в Вордпресс похожие записи с миниатюрами (Thumbnail), но для этого для ваших статей на сайте должны быть предварительно созданы эти миниатюры.
Выбирайте свой способ, чтоб выводить похожие записи в WordPress:плагин или код. Главное, чтоб выбранный метод соответствовал вашим ожиданиям и привлекал все больше посетителей на сайт.
Приветствую, уважаемые! Мало кто знает, что помимо всего прочего я еще изучаю веб-программирование. Эта статья открывает новую рубрику на нашем сайте, посвященную коду. Нет, это не уроки по какому-либо языку программирования, а просто полезные фрагменты кода, которые могут пригодиться вам, если у вас есть свой сайт. Например, сегодня мы поговорим про вывод похожих записей на движке 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 "
";
while ($my_query->have_posts()) {
$my_query->the_post();
?>
- " rel="bookmark" title="">
";
}
wp_reset_query();
}
?>
Для тех, кто хоть немного разбирается в коде, понятно, что тут используется язык 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
». А просто в виджет сайдбара этот код вставить не получится.
Поздравляю, теперь на вашем сайте есть похожие записи с миниатюрами
, которые вы поставили собственноручно без использования плагинов. И выглядят они, скорее всего, именно так, как вы и планировали. А если нет, то пишите в комментариях, что у вас не получается, помогу чем смогу.
ПС: Первое время у этой статьи может не быть похожих записей, потому что мы только-только открыли эту рубрику и по сути на сайте нет других статей с такими же тегами. А код как раз ориентируется по тегам, которые вы пишете к своим статьям, так что не забывайте их заполнять, это важно!
Вы дочитали до самого конца?
Была ли эта статься полезной?
Да
Нет
Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!