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

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

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

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

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

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

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

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

Вам, возможно, также будет интересна статья про CSS анимации. 

Код для вывода похожих записей в WordPress

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

<div class="similar_posts">
   <h3>Похожие записи:</h3>
   <?php $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,
         '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 '<ul>';
         while ($my_query->have_posts()) {
           $my_query->the_post();
     ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
         }
 echo '</ul>';
       }
 wp_reset_query();
     }
 ?>
</div>

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

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

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

Добавляем миниатюры на наши похожие записи

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

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

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

<div id="similar_posts">
  <h3>Похожие записи:</h3>
  <?php $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,
      '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 '<div id="similar_posts_wrapper">';
      while ($my_query->have_posts()) {
      $my_query->the_post();?>

      <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
        <div><?php the_post_thumbnail('medium'); ?></div>
        <div><?php the_title(); ?></div>
      </a>
    <?php
    }
    echo '</div>';
    }
  wp_reset_query();
}
?></div>

Стилизация похожих записей с миниатюрами

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

#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». А просто в виджет сайдбара этот код вставить не получится.

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

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