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

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

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

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

На сегодняшний день миниатюры поддерживаются всеми темами (шаблонами) оформления. Достаточно при написании статьи выбрать подходящую картинку и всё готово.

По умолчанию размер миниатюр в WordPress задан 150х150 пикселей. Изменить эти размеры вы можете в разделе «Настройки» — «Медиафайлы».

Код блока похожих статей с миниатюрами.

Код похожих статей вы можете взять из прошлой статьи. Любой, в зависимости от сортировки статей.

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

Без применения стилей css, вид списка будет в соответствии с заданными стилями в вашей теме оформления.

Доработанный код будет выглядеть так:

<!--Похожие статьи-->
<h3 class="relatedtitle">Похожие статьи из категории: <?php the_category( ', ' ) ?></h3>
<div><?php
 global $post;
 $backup = $post;
 $categories = get_the_category($post->ID);
 if ($categories) {
 $categories_ids = array();
 foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
 
$args=array(
 'category__in' => $category_ids,
 'post__not_in' => array($post->ID),
 'posts_per_page'=>6, // Количество похожих статей.
 'ignore_sticky_posts'=>1
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul class="relatedPosts">';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><div class="relatedblok"><a href="<?php the_permalink() ?>" rel="bookmark" title="Перейти к статье <?php the_title_attribute(); ?>"><?php the_post_thumbnail('thumbnail'); ?><br><?php the_title(); ?></a></div></li>
 <?php
 }
 echo '</ul>';
 }
 }
 $post = $backup;
 wp_reset_query();
 ?></div>

Дополнения, которые я внёс в код, обозначены оранжевым цветом. Я лишь поясню, что они обозначают.

class="relatedtitle" – позволит управлять стилями заголовка.

<div class="relatedblok"> – этот блок нужен для определения стилей ячейки каждой статьи.

<?php the_post_thumbnail('thumbnail'); ?> – код, отвечающий за вывод миниатюры.

<br> – перенос строки.

Где вставить код похожих статей.

Конечно же, раз речь идёт о похожих статьях, то и вставлять код нужно в файл, отвечающий за вывод статей (single.php).

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

Итак, открываем административную панель WordPress – «Внешний вид» – «Редактор» – «Одна запись (single.php)» и после вывода статьи, вставляете код похожих статей с миниатюрами.

Создание стилей для блока похожих статей.

После того как вы вставите код. Внешний вид такого блока вас не порадует. Выглядеть он будет примерно так:

Для того чтобы вид блока был более привлекательный, необходимо добавить стили оформления в файл style.css.

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

Это нужно учитывать при добавлении стилей в файл style.css. Ваша задача вставить стили оформления до медиазапросов, в которых расположены стили адаптации темы.

Для этого открываете файл стилей – нажимаете комбинацию клавиш CTRL+F – вводите поисковый запрос «@media» и вы найдёте, откуда начинаются медиазапросы.

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

.relatedtitle {margin-left: 20px;}
.relatedblok {width: 250px;}
.relatedPosts li {display: inline-block;
width: 250px;
text-align: center;}

Если медиазапросов вы не нашли, значит ваша тема не адаптивная и стили вы можете вставить в конце файла style.css.

Теперь вид похожих статей с миниатюрами примет вот такой вид.

Цвет заголовка и ссылок наследуется из стилей темы. Поэтому у вас они будут в соответствии с дизайном вашей темы.

Также вы должны сменить параметры ширины ячейки width: 250px, так как в вашей теме ширина блока с контентом может отличаться и ячейки в 250 пикселей либо не вместятся, либо будут смотреться мелковато.

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

.relatedblok {
width: 250px;
height: 250px;
overflow: hidden;
border: 1px solid #d2d2d2;
margin-bottom: 4px;
box-shadow: 0px 2px 3px #d2d2d2;}

В результате блок приобретёт вот такой симпатичный вид.

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

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

Друзья, всем удачи и до встречи в новых статьях.

С уважением, Максим Зайцев.