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

Пример блока похожих записей Вы можете посмотреть на моем блоге. Сразу под статьей под блоком поделиться в социальных сетях выводятся 4 картинки со ссылками на другие статьи из этой категории.

Зачем нужны похожие записи с картинками в конце статьи

Для начинающих блоггеров я поясню, зачем нужно после статьи выводить ссылки на посты по теме. Наличие блока с анонсами других статей положительно сказывается на таких поведенческих факторах, как глубина просмотра и время нахождения на сайте. Все происходит примерно так: посетитель прочел Вашу статью, на которую он попал из поисковой системы, в которой он искал ответ на свой вопрос. Далее он увидел в конце статьи блок с анонсами других статей. Заголовок или картинка-миниатюра поста его заинтересовала и он перешел на другую страничку Вашего сайта. В статистике Вы увидите, что пользователь, пришедший на сайт по определенному ключевому слову, провел на сайте сколько-то времени и сделал столько-то переходов. Таким образом, похожие записи с миниатюрами в wordpress помогают пользователям просматривать тематические материалы, находить в них ответы на другие вопросы и улучшать поведенческие факторы сайта.

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

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

В Вашем шаблоне должны быть включены миниатюры. Ну и соответственно картинки миниатюр должны быть загружены ко всем записям на сайте. Если картинок не будет, то будут отображаться пустые квадратики. Я на своем блоге для каждого поста загружаю картинку-миниатюру размером 200*200. Стараюсь загружать квадратные изображения по размеру варьирующиеся в пределах 20 пикселей от значения 200*200. В противном случае, большая картинка будет не красиво обрезаться.

На странице добавления записи в правой колонке должен быть вот такой блок:

Еще один важный момент. Отключите обрезание картинок-миниатюр до указанного в настройках движка размеров. Посмотрите на следующей картинке, куда зайти в админке, чтобы сделать это:

Как сделать похожие записи с миниатюрами без плагина

Теперь приступим непосредственно к добавлению кодов вывода похожих записей в файлы. Первый код вывода похожих записей мы добавим в файл single.php. Если Вы ранее не производили никаких манипуляций с этим файлом (не добавляли кнопок соцсетей, рекламных кодов), в этом случае найдите в файле single.php код <?php the_content (); ?>. Именно он отвечает за вывод текста поста. Смотрите на картинке, где он находится в моем шаблоне.

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

<!-- Похожие записи -->  

<div id="interestpost">

<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'=>6,  //количество выводимых анонсов

 'orderby'=>rand, 

 'caller_get_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 id="postcell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a></span><br>

<span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></div></li>

<?php

}

echo '</ul>';

}

wp_reset_query();

}

?>

</div>

В этом коде Вы можете поменять количество выводимых в блоке анонсов, напротив этой строки стоит комментарий.  Сейчас там стоит значение 6.

Следующий код стилей добавьте в файл style.css, можно в самый конец.

/*------------------- стили похожих записей ------------------*/

#interestpost{

 margin: 8px 0;   

 float: left;     

 width: 100%;  

}

#interestpost ul {

 margin-left: 5px;  

 width: 600px;  /* Общая ширина блока без учета отступов от краев страницы */

}

#interestpost li {

 list-style: none; 

}

#postcell{

 height: 230px;  /* Высота ячейки  */

 box-shadow: #D1F7DB 0px 1px 2px, #D1F7DB 0 0 2px inset;  /* Тень для ячеек. Цвет D1F7DB */

 float: left;   

 list-style: none; 

 margin: 4px;  

 padding: 2px; 

 text-align: center; 

 font-size: 16px; /* Размер шрифта у ссылок */

 width: 156px;  

 overflow: hidden;  

 border: #D1F7DB solid 1px; /* Рамка вокруг ячейки цветом D1F7DB */

 border-radius: 5px; /* Закругленные края ячейки */

}

#postcell a:hover {

 color: #077C1A;  /* Цвет ссылки при наведении*/

 text-decoration:none; /* Ссылка без подчеркивания */

}

#postcell a{

 color: #000000; /* Цвет ссылки */

 text-decoration:none; /* Ссылка без подчеркивания */

}

#interestpost li :hover{

 background-color: #CDE1D0; /* Фон ячейки при наведении */

}

Цвета рамки и тени ячеек, а также текста ссылок, можете менять по своему усмотрению.

Вывод похожих записей с картинками плагином Related Posts Thumbnails

Плагин — это вариант для новичков. Если вы хоть немного начали разбираться в CSS, вы с увлечением настроите показ похожих статей, да еще и докрутите оформление блока под дизайн сайта.

Вот ссылка на скачивание плагина Related Posts Thumbnails, который поможет вывести похожие записи с миниатюрами. Или же можете найти плагин по названию и установить непосредственно с админ панели.

В админке, в разделе Параметры, выберите из выпадающего списка Related Posts Thumb и попадете на страницу настройки плагина:

Вывод похожих записей с картинками после статьи можно задать автоматически или же вставить самостоятельно код в нужное место в шаблоне. Задайте на каких страницах будут отображаться похожие записи и какие категории будут включены. Укажите заголовок, поскольку по умолчанию выводится заголовок Related Posts. Выбрите нужное количество выводимых записей. Также, можно задать стили: цвет фона, шрифтов и т.д.

Еще можно задать вывод похожих записей с картинками по категориям, меткам или произвольно:

На этом у меня все. Надеюсь, Вы без проблем сможете вывести похожие записи с картинками после постов с помощью плагина Related Posts Thumbnails.

Вывод списка тематических публикаций плагином WordPress Related Posts

Плагин WordPress Related Posts позволит вывести под статьей блок «Похожие записи».

Установка плагина Related Posts очень простая:

1. Скачиваем плагин из официального сайта по ссылке http://wordpress.org/plugins/wordpress-23-related-posts-plugin/installation/
2. Устанавливаем и активируем плагин Related Posts. Как устанавливать плагины написано тут.
3. Настраиваем плагин. Из меню параметры выбираем Related Posts, и настраиваем количество похожих записей на странице и прочее.
4. Для отображения блока Похожие записи на страницах статей, размещаем следующий код в шаблон страницы single.php. Код вставляется  между кодом текста статьи страницы и кодом комментариев:
   
   

<?php wp_related_posts();?>

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