Hướng dẫn hiển thị bài viết liên quan trong WordPress

Bài viết liên quan là những nội dung có thể cùng chuyên mục hoặc cùng thẻ tag tùy theo bạn muốn định nghĩa cho website của mình. Để code được chức năng này vui lòng xem qua nội dung bên dưới đây.

1. Câu Query dữ liệu danh sách các bài viết liên quan

$post_type = get_post_type();
$posts_per_page = 4;

$query_args = array(
                'category__in' => wp_get_post_categories($post->ID), 
                'post_type' => $post_type, 
                'posts_per_page' =>  $posts_per_page  ,
                'post__not_in' => array($post->ID) 
        );

$related_query = new WP_Query($query_args);

//Nếu không có kết quả các bài viết cùng danh mục, tiếp tục lấy cùng thẻ (tag)
if( !$related_query->have_posts() ) { 
    $tags = wp_get_post_tags($post->ID);
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $query_args = array(
        'post_type' => $post_type, 
        'tag__in' => $tag_ids,
        'post__not_in' => array($post->ID),
        'posts_per_page'=> $posts_per_page, // Number of related posts to display.
        'caller_get_posts'=>1
    );
    $related_query = new WP_Query($query_args);
}

//Nếu không có kết quả các bài viết cùng danh mục, tiếp tục lấy bài viết mới nhất
if( !$related_query->have_posts() ) {   
    $query_args = array(  
                    'post_type' => $post_type,
                    'posts_per_page' =>  $posts_per_page  ,
                    'order'     => 'desc',
                    'post__not_in' => array($post->ID) 
        );
    $related_query = new WP_Query( $query_args );
}

• $posts_per_page = 4; => Số lượng bài viết liên quan cần lấy ra

2. Hiển thị danh sách bài viết liên quan

2.1 Mở chỉnh sửa file single.php

Mở template bạn cần xuất hiện danh sách bài viết liên quan này. Thường chúng sẽ nằm cuối trang chi tiết bài viết. Vì vậy bạn hãy mở file single.php trong thư mục theme của mình nhé.

while ( have_posts() ) : the_post();
     //bỏ qua đoạn này trong code bạn chỉ làm theo đoạn bên dưới

     //Thêm đoạn code này
     get_template_part( 'template-parts/post/related', '', array() );
endwhile;

Dùng hàm get_template_part để gọi template related trong thư mục post nếu chưa có bạn có thể tạo mới.

2.2 Tạo file related.php với nội dung sau:

<?php
$post_type = get_post_type();
$posts_per_page = 4;

$query_args = array(
                'category__in' => wp_get_post_categories($post->ID), 
                'post_type' => $post_type, 
                'posts_per_page' =>  $posts_per_page  ,
                'post__not_in' => array($post->ID) 
        );

$related_query = new WP_Query($query_args);

//Nếu không có kết quả các bài viết cùng danh mục, tiếp tục lấy cùng thẻ (tag)
if( !$related_query->have_posts() ) { 
    $tags = wp_get_post_tags($post->ID);
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $query_args = array(
        'post_type' => $post_type, 
        'tag__in' => $tag_ids,
        'post__not_in' => array($post->ID),
        'posts_per_page'=> $posts_per_page, // Number of related posts to display.
        'caller_get_posts'=>1
    );
    $related_query = new WP_Query($query_args);
}

//Nếu không có kết quả các bài viết cùng danh mục, tiếp tục lấy bài viết mới nhất
if( !$related_query->have_posts() ) {   
    $query_args = array(  
                    'post_type' => $post_type,
                    'posts_per_page' =>  $posts_per_page  ,
                    'order'     => 'desc',
                    'post__not_in' => array($post->ID) 
        );
    $related_query = new WP_Query( $query_args );
}

//Hiển thị danh sách
if( $related_query->have_posts() ) { 
?>
<div class="wpshare247-related">
     <h2>Bài viết liên quan</h2>
     <div class="wpshare247-related-posts">
     <?php
     while ($related_query->have_posts()) : $related_query->the_post();
     ?>
         <div class="wpshare247-related-post">
            <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
          <?php the_post_thumbnail('thumbnail', array('alt' =>get_the_title(), 'class'=>'related-thumb', 'itemprop'=>'image' ) ); ?>
            </a>
            <h3 class="title">
            <a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a>
             </h3>
         </div>
     <?php
     endwhile;
     wp_reset_postdata();
     ?>
     </div>
</div>
<?php
}
?>

Trọng tâm của bài viết này là câu Query post related hay còn gọi là post liên quan. Dựa vào câu trúc vòng lặp Loop bạn có thể dễ dàng hiển thị danh sách. Vì vậy bạn nên nắm rõ phần này ở bài:

Hướng dẫn cách sử dụng WP_query và vòng lặp Loop trong WordPress dễ hiểu

Đến đây xem như bạn đã hiển thị xong danh sách các bài viết. Nếu giao diện chưa phù hợp, bạn có thể tự CSS cho chúng đẹp mắt hơn nhé. Tham khảo bài Học Css cơ bản nếu bạn chưa có kiến thức về nó.