Перепробовал несколько плагинов для вывода "похожих публикаций" на странице детального просмотра. Но с каждым была какая-то беда, начиная с фоновых 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 элемента).
