Свързани постове по етикет, показвани на случаен принцип, без плъгини

28 юли 2019 | Без плъгини
Related posts by tag display randomly without plugins

Преди време в статията „WordPress: Свързани публикации с умалени изображения без плъгини“ ви показах как да си извикваме свързани публикации (related posts) по етикет или категория в WordPress, които обикновено визуализираме под текущата публикация.

Част от кода обаче вече ще променим, тъй като е остарял и не би трябвало да се използва. Правим го с цел да подобрим ефективността.

• Например, ‘caller_get_posts’ е обезценен от години. Правилният параметър, който трябва да се използва сега, е ‘ignore_sticky_posts’.
• Използваме get_queried_object_id (), за да получим текущия идентификатор на пост, вместо по-ненадеждния метод с global $post.
• Използваме wp_get_post_terms (), за да върнем всички tag ID, които са присвоени на публикацията. Трябва ни да получим само tag ID, а не пълните tag objects.
• Използваме подходящо tax_query, за да получим всички публикации, към които има прикачени етикети.
• Добавяме ‘orderby’ => ‘rand’. Стойността ‘rand’ на параметъра ‘orderby’ в WP_Query ни извиква всеки път различни свързани публикации на случаен принцип. Ако премахнем този ред, WordPress извиква по подразбиране последно публикуваните свързани статии.
• Използваме wp_reset_postdata(), вместо wp_reset_query().

<?php
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$args = [
'post__not_in'  => array( get_queried_object_id() ),
'posts_per_page' => 3, // колко свързани публикации да се виждат
'ignore_sticky_posts'  => 1,
'orderby'  => 'rand',
'tax_query'  => [
[
'taxonomy'  => 'post_tag',
'terms'  => $tags
]
]
];
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div class="related-posts-content"><h3>Интересно от сайта</h3>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<div class="related-thumb">
<a href="<? the_permalink()?>"><?php the_post_thumbnail(); ?><br />
<?php the_title(); ?>
</a>
</div>
<?php }
wp_reset_postdata();
echo '</div>';
}
?>

Поставяме кода във файла single.php или content.php (зависи как е структурирана WordPress темата ни), там където искаме да ни се появят свързаните публикации.

Трябва да си добавим и стил. Отдолу има примерен код, при който свързаните публикации изглеждат като на снимката към статията и се нагаждат според резолюцията на устройството, на което разглеждаме сайта (responsive design).

.related-posts-content h3{border-bottom:1px solid #e0e0e0;padding-bottom:5px}
.related-posts-content a{color:#333;font-size:17px;line-height:1}
.related-posts-content a:hover{color:#f17a07}
.related-thumb{padding:1%;margin-bottom:30px}
@media screen and (min-width:768px){.related-thumb{display:inline-block;float:left;width:33.3%}}
@media screen and (max-width:767px){.related-thumb{width:100%}}