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

Что ж, продолжим статью добавления ссылок на похожие записи… но уже прикрепим к ним миниатюры изображений. Всё настраиваемо и адаптивно!

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

Посудите: в нынешнем адаптивном “длинном” дизайне шаблонов, вывод ссылок похожих записей СЕГОДНЯШНИМ СПОСОБОМ правильный подход – в отличие размещения в сайдбаре, ибо посетитель редко достигает низа (футерной части) – ведь виджеты расположены ближе к подвалу, если смотреть сайт с телефона или планшета.

…а посему нужно как можно полезнее использовать основное статейное место сайта.

настраиваем похожие по теме записи и миниатюры

Рекомендую вернуться к статье, ссылка на которую выше, так будет понятнее.

Открываем файл post-single.php у вас может быть и иной, к примеру просто single.php

Отыщите в этом файле кусочек кода, по которому нужно ориентироваться, вписывая “похожие записи” в тело статьи – the_content('') – этот вензель (функция) отвечает за вывод всей массы статьи.

Если вам нужно выводить ссылки на другие посты рубрики вверху страницы, то код, который ниже, нужно прописывать перед показанной формулировкой функции, а вот если в финале, то – после этого вызова функции, где-нить после ?> (подробнее в предыдущей статье).

А вот и нужный код вывода в записи тематически-похожих записей (пояснения работы кода чуть ниже):

<div class="sample-posty">
<p>ещё статьи по теме:</p>
<?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(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'showposts'=>5,        // колличество отображаемых ссылок
'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><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); ?><br /><?php the_title(); ?></a></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

Прописывайте этот код так, чтобы не “разрывать” процессы/циклы иных функций файла post-single.php

…сохраняйте и смотрите что получилось на сайте… Файл стилей пока не трогаем.

Обратите внимание на див класс <div class=″sample-posty″>, который образует селектор CSS .sample-posty – если вы уже пробовали способ вывода аналогичных статей рубрики БЕЗ картинок, то удалите или закомментируйте относящийся к нему селектор.

Файл стилей style.css не нужно бессмысленно загружать!

Также возможен способ перемены имени показанного кода css ниже, если предыдущий селектор удалять жаль. Например sample-posty замените на sample-posty2 или как-то иначе…

Собственно вот код CSS, относящийся к сегодняшний теме:

/*похожие записи*/
.sample-posty p{
font-weight: 700;
color: #878787;
font-size: 16px;
margin: 5px 0;
font-style: italic;
}
.samp {
font-weight: 700;
color: #878787;
}
.sample-posty li{
float: left;
width: 110px;
margin: 0;
padding: 0;
background: #f8f8f8;
}
/*li:hover{}*/
.sample-posty li a{
text-align: center;
/*display: block;*/
padding: 5px;
}
.sample-posty li img{
width: 95px; /*ширина картинки*/
height: 67px; /*высота картинки*/
}

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

Таким образом, регулируя вышепоказанные настройки, вы сможете добиться оптимального результата своим требованиям отображения похожих записок блога – в финале поста, или же перед его стартом (где-то в информационном описании статьи) – как оформить статью тегами h3 – h4-5

Думается, на этой высокой ноте настроек своего настроения можно и закончить на сегодня)

А коли не ясно, всегда можно спросить в комментариях…

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

Online консультация по настройкам и созданию сайтов на WordPress