Вывод похожих записей WordPress


Похожие записи WordPress

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

Похожие записи WordPress

 

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

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

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

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

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

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

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

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

Сделать вывод похожих записей на WordPress можно двумя способами:

1. С использованием одного из плагинов Simple Tags, Similar Posts, Yet Another Related Posts

Размер плагина yet-another-related-posts-plugin.4.2.2 составляет 1,93 МБ (2 030 940 байт) и содержит 7 директорий и несколько десятков файлов, а чем выше скорость загрузки сайта, тем лучше он воспринимается, как поисковыми системами, так и посетителями интернет ресурса.

2. Добавив в файл темы single.php несколько строк кода.

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

Вывод похожих записей WordPress без плагина

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

Для вывода схожих статей в самом конце поста, необходимо открыть файл single.php  и перед строкой <?php comments_template(); ?> добавить вот этот код:

<!-- Похожие записи -->
<h4 style="text-align: center;">Интересные материалы по теме:</h4>
<div class="related_posts_box">
<?php
$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'=>4,
'orderby'=>rand,
'caller_get_posts'=>1);
$my_query = new wp_query ($args);
if ( $my_query->have_posts () ) {
while ($my_query->have_posts ()) {
$my_query->the_post ();
?>
<a href="<?php the_permalink () ?>" target="_blank" title="<?php the_title (); ?>">
<ul class="marker">
<li><?php the_title (); ?></li></ul></a>
<?php
}
}
wp_reset_query ();
}
?>
</div>
<!--/ Похожие записи -->

 

Количество выводимых записей определяется значением showposts, у меня 4. За сортировку схожих записей отвечает orderby, в моем случае они выводятся рандомно, т. е. случайно.

Доступные значения orderby.

date записи будут выводиться по дате публикации,

title  сортировка ссылок по названию,

modified сортировка по дате изменения.

После этого необходимо открыть файл style.css, и добавить стили для related_posts_box и market. Я решил сделать вот так:

.related_posts_box {
background-color: #F5F5F5;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
font:  20px/130% "Times New Roman", Times, serif;
padding-right: 40px;
}
.marker li{
list-style: none inside;
line-height: 1;
display: list-item;
padding: 0px;
white-space: normal;
background: url(images/lis.png) no-repeat scroll left top;
padding-left: 20px;
}

 

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

Картинку lis.png нужно создать самостоятельно или скачать в сети интернет.

Результат CSS верстки и конечной работы PHP скрипта, можно увидеть в конце статьи.

P.S. В силу некоторых особенностей скрипта по защите текста от копирования, у вас могут возникнуть проблемы с копирование кода, который заключен в теги PHP, div, a href и другие, т. е. код нужно копировать без тегов, а теги уже добавлять в ручную.

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