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

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

Роботы тоже используют эти линки для ускорения индексирования страниц.

Плагины

Начинающие авторы обычно ставят плагины. Плюс данного способа: установить, настроить плагин просто.

Они отличаются способом вывода ссылок, сортируют: по похожим названиям, по посещаемости, по ключевым словам.

Перечень записей формируется в виде списка простого или с миниатюрами. Размер картинок можно настроить.

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

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

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

Related Posts for WordPress

Он выводит список в конце поста или в виджете, поддерживает миниатюры, содержит несколько настроек внешнего вида. 

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

Jetpack

Похожие записи это часть многофункционального плагина Все seo в одном. Устанавливать его только с целью создания связанных постов нерационально.

Хотя, он не перегружает сервер запросами к базе данных. Обработка связанных постов происходит с сервера плагина. Чтобы включить опцию Добавления/исключения определенного контента, придется внести соответствующий код в файл functions.php.

Similar Posts

Чтобы снизить влияние на сервер, используется кеширование блока схожих постов.

Особенности этого расширения:

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

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

Custom Related Posts

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

Без плагина

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

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

Вывод по меткам

Исправления будем вносить в файл single.php (одна запись).

Выше строчки <?php comments_template (); ?>  вставляем код

<div class="sample-postsinca">
<ul>
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
}
wp_reset_query();
}
?>
</ul>
</div>

'showposts'=>5 это количество ссылок, которое вы выводите.

Чтобы связанные посты соответствовали стилю вашего блога, в файл style.css (вниз) вставьте код

.sample-postsinca ul li{
background-position:left center;
background-repeat:no-repeat;
list-style-type:none;
margin-bottom:10px;
padding-left:20px;
}

Ну, вот и получились (смотрите в конце страницы) похожие записи без плагина.

Еще интереснее, когда к каждому посту привязана привлекательная картинка (миниатюра). У посетителей появляется дополнительная мотивация перейти по ссылке из этого блока на другие страницы.

Вывод похожих записей без плагина с миниатюрами

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

В то место файла single.php, где надо отобразить связанные посты вставьте этот код.

<div id="related_posts">
<h3>с этими постами читают</h3>
<?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(
 'tag__in' => $tag_ids,  //сортировка по тегам (меткам)
 'post__not_in' => array($post->ID),
 'showposts'=>3,  //количество выводимых ячеек
 'orderby'=>'rand', // в случайном порядке
 'ignore_sticky_posts'=>1); //исключаем одинаковые записи
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
?>
<li><div class="cell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><br>
<a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>

'showposts'=>4 количество ячеек в ряду

В файле style.css пропишите стили для идентификаторов id="related_posts" (вид блока) и class="cell"(вид ячеек).

#related_posts{
margin: 10px 0;   /*  Отступы от верхнего и нижнего края */
float: left;     /* Прижимаем блок к левому краю */
 width: 100%;  /* Длина блока соответствует ширине страницы */
}
#related_posts ul {
 margin-left: 5px;  /*  Внешний отступ от левого края страницы */
 width: 577px;  /* Общая ширина блока без учета отступов от краев страницы */
}
#related_posts li {
 list-style: none;  /* Отменяем нумерацию списка (1,2,3 и т.д.) */
}
.cell{
height: 225px;  /* Высота ячейки  */
box-shadow: #F5F5F5 0px 2px 3px, #F5F5F5 0 0 3px inset;  /* Тень для ячеек (необязательно) */
float: left;   /* Каждая следующая ячейка располагается слева */
list-style: none;  /* Отменяем родительские стили */
margin: 5px;  /* Расстояние между ячейками */
padding: 2px;  /* Отступы от миниатюры до края ячейки */
text-align: center; /* Текстовые заголовки расположены по центру */
width: 157px;  /* ширина одной ячейки */
overflow: hidden;  /* Окончания длинных заголовков, не вместившихся в ячейку, будут скрыты */
border: #F5F5F5 solid 1px; /* Рамка вокруг ячейки */
border-top-left-radius: 10px;  /* Закругление левого верхнего угла ячейки */
border-top-right-radius: 10px;  /* Закругление правого верхнего угла ячейки */
border-bottom-left-radius: 10px;  /* Закругление нижнего левого угла ячейки */
 border-bottom-right-radius: 10px;  /*Закругление нижнего правого угла ячейки */
}
.cell a:hover {
color: #C6C600;  /* Цвет ссылки при наведении курсора */
text-decoration:none; /* Убираем подчеркивание ссылки */
}
.cell a{
color: #000000; /* Цвет ссылки */
text-decoration:none; /* Убираем подчеркивание ссылки */
}
#related_posts li :hover{
 background-color: #f9f9f9; /* Цвет фона ячейки при наведении курсора */
}
/* Стили для мобильных устройств */
@media screen and (max-width:760px){
#related_posts{
width:auto;
display:block;
position:relative;
}
#related_posts ul {
width:auto;
}
#related_posts li {
float:left;
}
}
Миниатюры будут ссылками, статья, соответствующая картинке, откроется в новом окне.

Вывод похожих записей с миниатюрами из пропорционально уменьшенных картинок поста плюс анонсы

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

1 ЭТАП. Дополнительно изображения загружать не надо. В файл functions.php добавьте следующий код.

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)) {
    $first_img = "http://ваш_сайт/files/default.jpg"; // Ссылка на заглушку
  }
  return $first_img;
}

В строке $first_img = "http://ваш_сайт//files/default.jpg"; // Ссылка на заглушку укажите адрес картинки на вашем сайте, которая будет выводиться при отсутствии похожих записей.

2 ЭТАП. В файл single.php перед <?php comments_template (); ?> внесите код

<table border="0" cellspacing="10"><tbody><tr>
<td valign="top" align="right" width="110"><div>Похожие записи</div></td>

    <?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,
         'post__not_in' => array($post->ID),
         'showposts'=> 3, // Количество выводимых записей
         'caller_get_posts'=> 1
      );
     $rp_query = new wp_query($args);
     endif;
     if($rp_query):
      if($rp_query->have_posts()) ?>
        <?php while ($rp_query->have_posts()):  $rp_query->the_post(); ?>

         <td valign="top"><div style="padding-left:8px;">
           <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
           <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
            <img align="left" style="-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 0px 10px rgba(0, 0, 0, 0.4); margin: 2px 10px 2px 0px; display: inline" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="250"/>
           </a>
           <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
           <br /><?php the_content_rss('', TRUE, '', 24); ?>
         </div></td>

        <?php endwhile; ?>
     <?php else: ?>
       <td><?php _e("Похожих записей пока нет",""); ?></td>
     <?php endif; wp_reset_query(); ?>

</tr><tbody></table>

КОЛИЧЕСТВО выводимых записей 'showposts'=> 3

МАКСИМАЛЬНАЯ ширина картинок " width="250", минимальная 110 мм

РАССТОЯНИЕ между ячейками (cellspacing="10") 10 мм (можно уменьшить если картинок больше и они более мелкие)

<?php echo catch_that_image() ?> - это ФУНКЦИЯ вывода изображения из записи, которую мы вставили на 1 этапе в functions.php.

<?php the_title(); ?> - ВЫВОД названия записи

<?php the_content_rss('', TRUE, '', 24); ?> - АНОНС записи без форматирования. 24 - количество отображаемых слов.

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

Заключение

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

В статье использованы материалы:

https : / /seo-mayak.com/sozdanie-bloga/obxodimsya-bez-plaginov/kak-vyvesti-poxozhie-zapisi-s-miniatyurami-na-wordpress-bez-plagina.html;

https : / /n-wp.ru/4490

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *