Существует много плагинов для вывода похожих статей, такие как: Simple Tags, Similar Posts или Yet another related posts, но как известно плагины создают лишнюю нагрузку на сервер. Чтобы облегчить сайт и снизить нагрузку на сервер воспользуемся выводом похожих записей с миниатюрами без плагина.
Открываем для редактирования файл отдельной записи single.php и в нужное место под статьей вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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’), что значит — размер миниатюры.
Если Вы хотите сортировать статьи по категориям то замените строчку:
1 2 3 | 'tag__in' => $tag_ids, |
на
1 2 3 | 'category__in' => $category_ids, |
Также можно сделать блок похожих записей с миниатюрами в 2 или 3 ряда, но учтите, что если в одном ряду 4 миниатюры, то в 2х рядах будет 8 ячеек, а в 3х рядах — 12 ячеек.
В строчке:
1 2 3 | 'showposts'=>4 |
Измените цифру на желаемую.
Заголовок можно заменить на свой:
1 2 3 | <h3>Интересное на блоге</h3> |
Вот этот отрезок кода отвечает за открывание статей в новой вкладке:
1 2 3 | onclick="return !window.open(this.href)" |
Это вроде заменителя не валидного:
1 2 3 | target="_blank" |
В общем, выбор всегда за вами!
Стили для похожих записей с миниатюрами
С помощью стилей можно сделать многое, применительно к внешнему виду блока похожих записей, тем более с миниатюрами.
В коде присутствуют идентификатор:
1 2 3 | id="interesting_articles" |
И класс для ячеек:
1 2 3 | class="cell" |
Кстати миниатюры тоже будут ссылками.
Теперь в файле style.css для данных идентификаторов прописываем следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | #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; } } |
Эти стили можно подгонять под свой вкус, меняя нужные значения.
Статья была полезной?