Перепробовал несколько плагинов для вывода «похожих публикаций» на странице детального просмотра. Но с каждым была какая-то беда, начиная с фоновых ajax запросов в административную часть сайта, до наличия маркетинговой ловушки от сторонних сайтов, которая отяжеляла загрузку контента. Решился запрограммировать самостоятельно.
В этой статье расскажу, как сделать блок «похожие публикации» самостоятельно, без плагинов. Этот блок располагается на странице детального просмотра публикации, под статьёй. Ссылки в блоке увеличивают вовлечённость пользователей, предлагая прочитать статью по той же теме.
Получим следующее:
Для реализации нужно знание программирования на PHP и CSS. Запрограммируем так, чтобы не было всех бесилок, которые присутствуют в плагинах этой тематики:
- Не будет js/jq скриптов. Ведь для блока из нескольких ссылок они и не нужны!
- Не будет обращений через jq/ajax в административную часть сайта (как у некоторых плагинов)
- Не будет назойливой рекламы и требований доната в административном интерфейса. У нашего программного кода не будет интерфейса в административной части вообще. Это плюс — админка будет работать быстрее.
- Не будет маркетинговой ловушки, которая собирает данные о пользователях и отсылает сторонним компаниям.
В конечном итоге хотим:
- Получить блок ссылок в виде плитки, в несколько рядов (4 в ряд, 2 рада).
- В каждой плитке будет уменьшенное (ресайзнутое) фото публикации и название.
- Сделаем так, чтобы кликабельными были не только названия, но и картинка. Добавим осветление блока при наведении курсора.
- Будут выводиться ссылки на публикации в том же разделе (не с теми же тегами).
- Статьи будут выбираться в случайном порядке. В выводе не должно быть текущей статьи.
- Весь блок будет появляться, только если есть хотя бы одна «похожая» статья.
- Подбор «похожих» статей ведётся из всех рубрик, к которых находится текущая статья.
Я не программист для WordPress. Поэтому собирал куски кода по интернету. Из-за этого решил пожертвовать одной необходимой функцией — кешированием результата. Но это не проблема, ведь у меня работает WP Super Cache, и скомпилированные однажды страницы выдаются через nginx, как статичные html. Если на сайте вообще нет средств кеширования страницы, то в блоке «похожие» публикации будут непрерывно выводиться новые результаты. Это будет замедлять сайт.
Я не верстальщик, поэтому прошу не кидать помидоры, как только увидите блочные элементы внутри строчных. Сделал так, чтобы работало. О правильности не думал. Каюсь.
Программируем html/php
Открываем файл детального просмотра публикации «single.php» (он находится в папке с темой) и добавляем после блока со статьёй следующий html/php код:
<?php
$categories = get_the_category($post->ID);
if (count($categories)) {
$categoryIds = array();
foreach($categories as $individual_category) {
$categoryIds[] = $individual_category->term_id;
}
$args = array(
‘category__in’ => $categoryIds,
‘post__not_in’ => array($post->ID),
‘showposts’=>8,
‘orderby’=>’rand’,
‘caller_get_posts’=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {?>
<div class=»rpost»>
<h3>Похожие публикации</h3>
<div class=»rpost-list»>
<?php
while ($my_query->have_posts()) {
$my_query->the_post();
?><div class=»rpost-el»><div class=»rpost-in»><a href=»<?php the_permalink();?>» title=»<?php the_title();?>»><div class=»img» style=»background-image:url(‘<?php the_post_thumbnail_url(array( 150,150 ));?>’);»></div><?php the_title();?></a></div></div><?php
}?>
</div>
</div>
<?php
}
wp_reset_query();
}?>
Сохраняем файл и проверяем результат в публичной части сайта.
Облагораживаем CSS
Сделаем вывод результата красивым. Открываем CSS файл темы и добавляем в конец:
.rpost {
overflow: hidden;
width: 100%;
display: block;
float: left;
clear: both;
}
.rpost h3{
clear: both;
display: block;
margin-bottom: 15px;
text-transform: none;
font-size: 20px;
color: #1a1a1a;
}
.rpost .rpost-list{width: 100%;}
.rpost .rpost-el{
width: 25%;
min-height: 220px;
display: inline-block;
float: left;
line-height: 1.5;
font-size: 14px;
}
.rpost .rpost-el a{
display: inline-block;
width: 100%;
}
.rpost .rpost-el a:hover{opacity: 0.7;}
.rpost .rpost-in{padding: 0 5px;}
.rpost .img{
background: 50% 50% no-repeat;
max-width: 100%;
height: 100px;
margin-bottom: 15px;
background-size: cover !important;
}
Сохраняем файл и проверяем результат в публичной части. Перезагружаем страницу через Ctrl+F5, чтобы кеш браузера сбросился и подгрузился изменённый CSS файл.
Параметры
Как можно догадаться из строчки скрипта:
‘showposts’=>8,
— он выдаёт ровно 8 публикаций. Можно поменять на любое число кратное 4 (в строке 4 элемента).