Việc thêm bài viết liên quan vào cuối mỗi bài viết không những giúp tạo nên bố cục giao diện hài hoà cho website giúp tăng điểm SEO mà còn giúp người đọc có thể tiếp cận thêm các thông tin khác để tăng thời gian ở lại trên web. Với giao diện mặc định của WordPress thì không có mục thêm bài viết liên quan, nếu muốn hiển thị thì bắt buộc phải sử dụng plugin hoặc code thủ công.

Hôm nay, Flatsomea-z sẽ hướng dẫn các bạn thêm các bài viết liên quan kèm ảnh ở cuối mỗi bài viết mà không cần tới plugin

Bước 1: Code PHP cho bài viết liên quan

Các bạn sao chép đoạn code dưới đây và dán nó vào file single.php nhé, tại đây các bạn tìm nơi mà bạn muốn nó hiển thị nhé. Thông thường người ta thường chèn ở cuối bài viết.

<?php
/*
* Code hiển thị bài viết liên quan trong cùng 1 category
*/$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="bai-viet-lien-quan">';
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 6, // So bai viet dc hien thi
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
echo '<h3>Bài viết cùng chủ đề:</h3>
<ul class="list-bai-viet">';
while ($my_query->have_posts()):$my_query->the_post();
?>
<li>

<div class="box-image">
<a href="<?php%20the_permalink()%20?>"><?php the_post_thumbnail('large'); ?></a>
</div>
<a href="<?php%20the_permalink()%20?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4>
</a>
</li>
<?php
endwhile;
echo '</ul>';
endif; wp_reset_query();
echo '</div>';
}
?>

Bước 2: CSS làm đẹp cho bài viết liên quan

Sau khi bạn đã thêm đoạn code kia vào single.php sau đó bạn vào CSS bổ sung (Giao diện > Tuỳ biến > Add CSS) và chèn đoạn mã CSS để cho nó thêm đẹp nhé.

Code css hiển thị dạng bài viết liên quan cho wordpress 3 cột và 2 hàng:

.bai-viet-lien-quan {
margin-top: 2em;
border-top: 1px solid #EEE;
}
.bai-viet-lien-quan h3 {
font-size: 19px;
color: black;
margin: 20px auto;
position: relative;
}
.bai-viet-lien-quan ul {
display: inline-block;
margin: 0;
width: 100%;
}
.bai-viet-lien-quan ul li {
list-style: none;
width: 33%;
color: graytext;
float: left;
padding-left: 4px;
padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
height: 120px;
border-radius: 4px;
object-fit: cover;
object-position: center;
}
.bai-viet-lien-quan h4 {
font-size: 15px;
color: black;
line-height: 19px;
padding-top: 7px;
height: 64px;
overflow: hidden;
}
@media only screen and (max-width: 600px) {
.bai-viet-lien-quan ul li {
width: 50%;
}
.bai-viet-lien-quan ul li .box-image img {
height: 90px;
}
}
}

Code css hiển thị bài viết liên quan trong wordpress kiểu 2 cột 3 hàng

.bai-viet-lien-quan {
margin-top: 2em;
border-top: 1px solid #EEE;
}
.bai-viet-lien-quan h3 {
font-size: 19px;
color: black;
margin: 20px auto;
position: relative;
}
.bai-viet-lien-quan ul {
display: inline-block;
margin: 0;
width: 100%;
}

.bai-viet-lien-quan ul li {
color: graytext;
padding-left: 4px;
padding-right: 5px;
list-style: none;
margin: 0 auto 15px;
display: block;
width: 50%;
position: relative;
overflow: hidden;
float: left;
}
.bai-viet-lien-quan ul li .box-image img {
object-fit: cover;
object-position: center;
width: 72px;
height: 72px;
padding: 0;
margin: 0 15px 0 0;
overflow: hidden;
float: left;
display: flex;
border-radius: 3px;
align-items: center;
justify-content: center;
}
.bai-viet-lien-quan h4 {
font-size: 15px;
color: black;
line-height: 19px;
padding-top: 7px;
height: 64px;
overflow: hidden;
}

@media only screen and (max-width: 600px) {
.bai-viet-lien-quan ul li {
width: 100%;
}
.bai-viet-lien-quan ul li .box-image img {
height: 90px;
}
}
}

Vậy là xong. Lưu lại và xem kết quả nhé!