Похожие публикации (без плагина) в WordPress

С помощью плагинов WordPress можно сильно видоизменить сайт, подстроить под себя. Одна из проблема использования плагинов в том, что они нагружают систему, замедляют сайт и панель администрирования. Поэтому остаётся самый надёжный способ - доработать сайт самостоятельно.

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

Чтобы максимально облегчить и ускорить нашу функцию, сделаем все без использования JavaScript. Будет только текст, изображения и ссылки. Все статьи будут выводиться в случайном порядке. В итоге, мы хотим получить на странице детального просмотра статьи, под статьёй, следующий блок ссылок:

Программируем решение

Приведём пример готового решения. в нём будут как код PHP, так и CSS код оформления. Сначала разберём серверный скрипт PHP:

<?php      
$categories = get_the_category($post->ID); // категории текущей статьи
if (count($categories)) {
   $categoryIds = array(); // будем получать массив из id категорий
   foreach($categories as $individual_category) {
      $categoryIds[] = $individual_category->term_id;
   }      
   $args = array(
      'category__in' => $categoryIds, // статьи должны быть в этих категориях
      'post__not_in' => array($post->ID), // не выводить текущую статью
      'showposts'=>8, // должно быть 8 статей
      'orderby'=>'rand', // случайны порядок публикаций
      'caller_get_posts'=>1 // нужно получить информацию о статьях
   );      
   $my_query = new wp_query($args);      
      if( $my_query->have_posts() ){ ?>
         <div class="rpost">
            <h3>Похожие публикации</h3>      
            <div class="rpost-list">
               <?php      
               while ($my_query->have_posts()) {
                  $my_query->the_post();      

                  $title = get_the_title(); // заголовок статьи
                  $link = get_the_permalink(); // ссылка на статью
                  $pic = get_the_post_thumbnail_url(array( 150,150 )); // миниатюра 150х150 пикс.

                  ?>
                  <div class="rpost-el">
                     <div class="rpost-in">
                        <a href="<?=$link;?>" title="<?=$title;?>">
                           <div class="img" style="background-image:url('<?=$pic?>');"></div>
                           <?=$title;?>
                        </a>
                     </div>
                  </div>
                  <?php
               }?>
            </div>
         </div>
      <?php      
   }      
   wp_reset_query();
}?>

Остаётся сделать красивый вывод "плиток" из ссылок на статьи и их миниатюр. Для этого на странице должен находиться такой CSS код:

.rpost {
   overflow: hidden;
   width: 100%;
   display: block;
   float: left;
   clear: both;
}
.rpost h3{
   clear: both;
   display: block;
   margin-bottom: 15px;
   text-transform: none;
   font-size: 20px;
   color: #1a1a1a;
}
.rpost .rpost-list{width: 100%;}
.rpost .rpost-el{
   width: 25%;
   min-height: 220px;
   display: inline-block;
   float: left;
   line-height: 1.5;
   font-size: 14px;
}
.rpost .rpost-el a{
   display: inline-block;
   width: 100%;
}
.rpost .rpost-el a:hover{opacity: 0.7;}
.rpost .rpost-in{padding: 0 5px;}
.rpost .img{
   background: 50% 50% no-repeat;
   max-width: 100%;
   height: 100px;
   margin-bottom: 15px;
   background-size: cover !important;
}

Нет кеширования

Как можно заметить, наше решение обладает существенным минусом. У него вообще нет кеширования результата выборки из базы. С другой стороны, это и не так важно, когда используется кеширование страниц, к примеру, через "WP Super Cache" (читайте подробнее о нём в статье "Как ускорить сайт на WordPress").