Hướng dẫn chèn bài viết liên quan (Related Posts) cho WordPress

Bài viết liên quan (Related Posts) là một trong những yếu tố quan trọng giúp giữ chân người đọc, tăng số trang xem và cải thiện hiệu quả SEO cho website WordPress. Khi người dùng đọc xong một bài viết và được gợi ý những nội dung liên quan, khả năng họ tiếp tục ở lại website sẽ cao hơn đáng kể.

Thay vì sử dụng plugin – vốn có thể làm website nặng, tăng thời gian tải trang và phát sinh xung đột – trong bài viết này, chúng ta sẽ chèn Related Posts trực tiếp bằng code, đảm bảo nhẹ – đẹp – tối ưu SEO và phù hợp cho cả blog cá nhân lẫn website nội dung lớn. Cách này đơn giản và dễ làm là ra ngon liền nha. Xem nội dung bên dưới nhé.

Bài viết liên quan (Related Posts) là gì?

Related Posts là danh sách các bài viết có nội dung tương đồng với bài viết hiện tại, thường được hiển thị ở cuối bài hoặc trong sidebar. Các bài viết này có thể được chọn dựa trên:

• Cùng chuyên mục (category)

• Cùng thẻ tag

• Nội dung gần giống

• Bài viết ngẫu nhiên trong website

Mục tiêu chính của bài viết liên quan là điều hướng người đọc sang các nội dung khác, giúp website tăng thời gian on-site và giảm tỷ lệ thoát trang.

Vì sao nên chèn bài viết liên quan (Related Posts)?

Nhiều website WordPress mặc định sử dụng plugin để hiển thị Related Posts. Tuy nhiên, cách này tồn tại không ít hạn chế.

1. Website tải chậm hơn

Plugin thường phải truy vấn database nhiều lần, load thêm CSS và JavaScript không cần thiết, khiến website nặng hơn – đặc biệt với hosting cấu hình thấp.

2. Dễ xung đột theme hoặc plugin khác

Một số plugin Related Posts không tương thích tốt với theme, gây lỗi giao diện hoặc hiển thị sai bố cục.

3. Khó tùy biến giao diện

Muốn chỉnh lại layout, CSS hay logic hiển thị thường phải can thiệp sâu hoặc viết thêm code phức tạp.

Chèn bài viết liên quan bằng code thuần giúp bạn:

• Kiểm soát hoàn toàn giao diện

• Tối ưu hiệu suất

• Không phụ thuộc plugin

• Chuẩn SEO và thân thiện với Google

Hướng dẫn chèn bài viết liên quan (Related Posts) cho WordPress

Code chèn bài viết liên quan (Related Posts)

Bạn vào truy cập vào hosting vào File Manager -> Public_html -> Wp-content -> Themes -> Flatsome (Chọn theme bạn đang dùng) -> Template-parts -> Posts -> content-single.php (File chứa nội dung bài viết cần sửa).

Lưu ý:

• Mình hướng dẫn trên Theme Flatsome nên các theme khác có thể khác hơn nhé!
• Bạn nên tạo theme child và copy thư mục template-parts về theme child để chỉnh sửa. Để sau này có update theme thì không lo bị mất code và lỗi nha.

Dưới đây là đoạn code phổ biến – dễ dùng – chuẩn SEO, hiển thị các bài viết cùng chuyên mục với bài hiện tại. Bạn chỉ việc copy vào là xong.

<?php
$categories = get_the_category( get_the_ID() );

if ( ! empty( $categories ) ) :

    // Lấy category chính (category đầu tiên)
    $primary_cat_id = $categories[0]->term_id;

    $related_args = array(
        'post_type'           => 'post',
        'posts_per_page'      => 6,
        'post__not_in'        => array( get_the_ID() ),
        'cat'                 => $primary_cat_id,
        'ignore_sticky_posts' => 1,
    );

    $related_query = new WP_Query( $related_args );

    if ( $related_query->have_posts() ) : ?>
        
        <div class="bai-viet-lien-quan">
            <div class="tde">
                <span class="null">Bài viết cùng chuyên mục</span>
            </div>

            <ul class="list-bai-viet">
                <?php 
                $i = 1; 
                while ( $related_query->have_posts() ) : 
                    $related_query->the_post(); 
                ?>
                    <li>
                        <span class="stt"><?php echo $i; ?></span>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php 
                    $i++; 
                endwhile; 
                ?>
            </ul>
        </div>

    <?php endif;

    wp_reset_postdata();

endif;
?>

.bai-viet-lien-quan {
    background: #e6f6ff;
    border: 1px solid #b9e6f5;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 30px 0;
}

.bai-viet-lien-quan .tde .null {
    font-size: 26px;
    font-weight: 600;
    color: #333;
}

.list-bai-viet {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-bai-viet li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.list-bai-viet .stt {
    min-width: 26px;
    height: 26px;
    background: #00a0d2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

.list-bai-viet a {
    font-size: 18px;
    line-height: 1.5;
    color: #0073aa;
    font-weight: 500;
    text-decoration: none;
}

.list-bai-viet a:hover {
    color: #005177;
    text-decoration: underline;
}

Kết luận

Bài viết liên quan (Related Posts) không chỉ giúp website WordPress chuyên nghiệp hơn mà còn đóng vai trò quan trọng trong chiến lược SEO tổng thể. Việc chèn Related Posts không cần plugin giúp website tải nhanh, dễ kiểm soát và hoạt động ổn định hơn trong thời gian dài.

Hy vọng với hướng dẫn chi tiết trên, bạn có thể tự tạo mục bài viết liên quan đẹp – nhẹ – chuẩn SEO cho website của mình. Nếu thấy nội dung có giá trị, đừng quên đánh giá 5 sao để tiếp thêm động lực cho KHAWEB tiếp tục chia sẻ nhiều bài viết chất lượng hơn.