Cách thực hiện: Các bài viết liên quan có hình thu nhỏ trong WordPress mà không cần Plugin

Bạn có muốn hiển thị danh sách các bài đăng liên quan trên trang web WordPress của mình và thích sử dụng mã hơn là plugin không?

Khi khách truy cập vào blog của bạn đọc xong một bài viết mà họ quan tâm, việc cung cấp danh sách các bài đăng có liên quan sẽ thu hút họ và giúp họ tìm nội dung mới để đọc.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách hiển thị các bài đăng liên quan bằng WordPress bằng mã mà không cần plugin.

Tại sao hiển thị các trang liên quan trong WordPress?

Khi blog WordPress của bạn bắt đầu phát triển, người dùng có thể gặp khó khăn hơn khi tìm thấy các bài đăng khác có cùng chủ đề.

Hiển thị danh sách nội dung liên quan ở cuối mỗi bài đăng trên blog là một cách tuyệt vời để giữ khách truy cập ở lại trang web của bạn và tăng số lượt xem trang. Nó cũng giúp cải thiện khả năng hiển thị của các trang quan trọng nhất của bạn bằng cách hiển thị nội dung hay nhất của bạn ở nơi mọi người có thể dễ dàng tìm thấy.

Nếu bạn không quen với mã, thì bạn sẽ thấy đơn giản hơn khi chọn một trong nhiều plugin đăng bài liên quan đến WordPress có thể hiển thị các bài đăng liên quan mà không cần mã.

Nhưng nếu bạn từng thắc mắc liệu bạn có thể hiển thị các bài đăng liên quan mà không cần sử dụng plugin hay không thì chúng tôi sẽ chia sẻ hai thuật toán khác nhau mà bạn có thể sử dụng để tạo các bài đăng liên quan có hình thu nhỏ chỉ bằng mã:

Lưu ý: Nếu bạn muốn hiển thị hình thu nhỏ với mỗi bài đăng có liên quan thì trước tiên hãy đảm bảo bạn thêm hình ảnh nổi bật vào các bài đăng đó.

Phương pháp 1: Cách hiển thị các bài viết liên quan trong WordPress theo thẻ

Một cách hiệu quả để xác định nội dung liên quan là tìm kiếm các bài đăng khác có cùng thẻ. Thẻ thường được sử dụng để tập trung vào các chi tiết cụ thể có trong bài viết.

Với ý nghĩ đó, bạn có thể muốn tiếp tục và thêm một số thẻ chung vào các bài đăng mà bạn muốn liên quan đến nhau. Bạn có thể nhập chúng vào hộp ‘Thẻ’ trong trình chỉnh sửa WordPress.

Sau khi bạn đã thêm thẻ vào bài đăng của mình, điều tiếp theo cần làm là thêm đoạn mã sau vào mẫu single.php của chủ đề. Nếu bạn cần trợ giúp thêm mã vào trang web của mình, hãy tham khảo hướng dẫn của chúng tôi về cách dán đoạn mã từ web vào WordPress.

$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
   
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
   
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

Mã này tìm kiếm các thẻ được liên kết với một trang và sau đó chạy truy vấn cơ sở dữ liệu để tìm nạp các trang có thẻ tương tự.

Bạn nên đặt mã ở đâu? Điều đó phụ thuộc vào chủ đề của bạn, nhưng trong hầu hết các trường hợp, bạn có thể dán mã vào mẫu single.php của chủ đề sau bài đăng chính và ngay phía trên phần nhận xét.

Nếu bạn đang sử dụng chủ đề Twenty Twenty-One như chúng tôi đang sử dụng trên trang web demo thì nơi tốt nhất để dán mã là trong tệp template-parts/content/content-single.php sau tiêu đề và ngay sau <?php the_content();.

Điều này sẽ tự động hiển thị nội dung liên quan trên bất kỳ bài đăng WordPress nào. Bạn sẽ cần thay đổi kiểu dáng và giao diện của các bài đăng liên quan để phù hợp với chủ đề của mình bằng cách thêm CSS tùy chỉnh.

Mẹo: Thay vì chỉnh sửa các tệp chủ đề có thể làm hỏng trang web của bạn, chúng tôi khuyên bạn nên sử dụng plugin đoạn mã như WPCode.

WPCode giúp việc thêm mã tùy chỉnh vào WordPress trở nên an toàn và dễ dàng. Ngoài ra, nó còn đi kèm với các tùy chọn ‘Chèn’ cho phép bạn tự động chèn và thực thi đoạn mã ở các vị trí cụ thể trên trang web WordPress của mình, chẳng hạn như sau một bài đăng.

Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách thêm mã tùy chỉnh trong WordPress.

Phương pháp 2: Cách hiển thị các bài viết liên quan trong WordPress theo danh mục

Một cách khác để hiển thị nội dung liên quan là liệt kê các bài viết cùng danh mục. Ưu điểm của phương pháp này là danh sách các bài viết liên quan hầu như sẽ không bao giờ trống.

Giống như Phương pháp 1, bạn cần thêm đoạn mã vào mẫu single.php của chủ đề hoặc trong plugin đoạn mã như WPCode. Để biết thêm chi tiết, hãy tham khảo Phương pháp 1 và hướng dẫn của chúng tôi về cách thêm mã tùy chỉnh trong WordPress.

$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

Bây giờ bạn sẽ nhìn thấy danh sách các nội dung liên quan ở cuối mỗi bài viết.

Nếu bạn muốn thay đổi kiểu dáng và giao diện của các trang liên quan thì bạn sẽ cần thêm CSS tùy chỉnh để phù hợp với chủ đề của mình.

Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách hiển thị các bài đăng liên quan bằng hình thu nhỏ trong WordPress mà không cần plugin. Bạn cũng có thể muốn tìm hiểu cách theo dõi khách truy cập vào trang web WordPress của mình hoặc xem danh sách 24 mẹo của chúng tôi để tăng tốc trang web của bạn.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.