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

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

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

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

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

Приведём пример готового решения. в нём будут как код 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").
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: