logo
  • Опубликовано 14 июня 2017
  • Комментарии к записи Вывод похожих записей с миниатюрами отключены

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

Существует много плагинов для вывода похожих статей, такие как: Simple Tags, Similar Posts или Yet another related posts, но как известно плагины создают лишнюю нагрузку на сервер. Чтобы облегчить сайт и снизить нагрузку на сервер воспользуемся выводом похожих записей с миниатюрами без плагина.

Открываем для редактирования файл отдельной записи single.php и в нужное место под статьей вставляем следующий код:

<div id="interesting_articles">

<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'=>4,  //количество выводимых ячеек
 '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();
}
?>
</ul></div>

За вывод миниатюр в коде отвечает функция the_post_thumbnail(), которой я задал параметр (‘thumbnail’), что значит — размер миниатюры.

Если Вы хотите сортировать статьи по категориям то замените строчку:

'tag__in' => $tag_ids,

на

'category__in' => $category_ids,

Также можно сделать блок похожих записей с миниатюрами в 2 или 3 ряда, но учтите, что если в одном ряду 4 миниатюры, то в 2х рядах будет 8 ячеек, а в 3х рядах — 12 ячеек.

В строчке:

'showposts'=>4

Измените цифру на желаемую.

Заголовок можно заменить на свой:

<h3>Интересное на блоге</h3>

Вот этот отрезок кода отвечает за открывание статей в новой вкладке:

onclick="return !window.open(this.href)"

Это вроде заменителя не валидного:

target="_blank"

В общем, выбор всегда за вами!

Стили для похожих записей с миниатюрами

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

В коде присутствуют идентификатор:

id="interesting_articles"

И класс для ячеек:

class="cell"

Кстати миниатюры тоже будут ссылками.

Теперь в файле style.css для данных идентификаторов прописываем следующие стили:

#interesting_articles{
margin: 10px 0; /* Отступы от верхнего и нижнего края */
float: left; /* Прижимаем блок к левому краю */
width: 100%; /* Длина блока соответствует ширине страницы */
}
#interesting_articles ul {
margin-left: 5px; /* Внешний отступ от левого края страницы */
width: 577px; /* Общая ширина блока без учета отступов от краев страницы */
}
#interesting_articles 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; /* Убираем подчеркивание ссылки */
}
#interesting_articles li :hover{
background-color: #f9f9f9; /* Цвет фона ячейки при наведении курсора */
}
/* Стили для мобильных устройств */
@media screen and (max-width:760px){
#interesting_articles{
width:auto;
display:block;
position:relative;
}
#interesting_articles ul {
width:auto;
}
#interesting_articles li {
float:left;
}
}

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

Источник.

Вывод похожих записей с миниатюрами обновлено: Август 21, 2017 автором: admin

Обсуждение закрыто.

▲Вверх