Как вывести список похожих записей на WordPress без плагинов

Разместил / Просмотров: 2 332 / комментарий 31

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

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

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

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

Похожие статьи на WordPress без плагинов

Пример

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

PHP код

Для начала нам нужно зайти в админку нашего блога, затем идём в «Внешний вид» потом в «Редактор». Далее находим файл со статьями — «Одна запись (single.php)». Нашли? Отлично.

Теперь нужно найти примерно следующую строчку — <?php the_content(); ?> и после неё добавить следующее:

<!-- Похожие посты-->

<?php
 $backup = $post;
 $tags = wp_get_post_tags($post->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),
 'showposts'=>6, // Количество вывода похожих статей.
 'caller_get_posts'=>1
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul class="relatedPosts"><h2><span>Посты по теме</span></h2>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><?php the_post_thumbnail(array()); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Перейти к записи <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
 }
 echo '</ul>';
 }
 }
 $post = $backup;
 wp_reset_query();
 ?>

<!--Конец Похожие посты-->

Как это работает?

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

Количество выводимых статей.

В данном коде можно задавать количество показа постов. Чтобы это значение изменить, нужно найти в коде выше вот эту строчку: ‘showposts’=>6, В данном примере выводится 6 похожих постов, это значение Вы, естественно, можете изменять.

Ну а сейчас давайте придадим красивый вид нашим записям.

Стили CSS

Сейчас Вам нужно в админке Вашего блога зайти в «Внешний вид» затем «Редактор» и выбрать Таблица стилей (style.css), потом добавить в него следующее:

/*----------------------------
 популярные посты
------------------------------*/

.relatedPosts {
margin-top:40px;
 height:600px;

}

.relatedPosts h2 {

color:#e35858;
padding: 0px 20px 0px 20px;
margin-left:35px;
border:0px solid #333;
font-weight: 500;
font-size:22px;
margin-bottom:40px;


}

.relatedPosts li {

height:260px;
 float: left;
 padding: 0px;
 border:0px solid #333;
 width:190px;
 margin-right:35px;


}

.relatedPosts a {
 font-weight:500;
 color:#555;

}

.relatedPosts a:hover {
 color:#e35858;

}


.relatedPosts li img {
 width: 185px;
 height: 145px;
 padding: 2px;
 border:1px solid #999;
 background:#fff;
 margin:0 10px 5px 0;


}

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

Миниатюры

В данном примере размер миниатюр стоит 185*145. Это значение Вы можете изменить под себя. Чтобы изменить эти значения, нужно найти вот этот класс .relatedPosts li img и там уже изменить величину отображаемых миниатюр. width: — это ширина, а height: — это высота.

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