Code bài viết liên quan kèm ảnh thumbnai cho WordPress

Plugin Related Post hay còn được gọi là bài viết liên quan, nhiệm vụ của nó nhằm “giữ chân” người dùng khi họ đọc các bài viết trên website của bạn. Đôi khi sử dụng nó hợp lý, nó còn tăng tính thẩm mỹ cho website của bạn.

Plugin Related Post Cách tạo bài viết liên quan
Plugin Related Post Cách tạo bài viết liên quan

Lợi thế của việc sử dụng wordpress chính là kho thư viện plugin đồ sộ. Dường như tất cả những gì bạn nghĩ ra, bạn tưởng tượng ra cho website wordpress của bạn thì hiện nay đều đã có các plugin tại kho thư viện WordPress plugin (chỉ có điều là có cái miễn phí, cái thì mất phí :p )

Việc sử dụng nhiều plugin trên website wordpress của bạn được các chuyên gia khuyến cáo là không nên, vì nó có nguy cơ làm chậm trang web của bạn, chưa kể đến việc các plugin có thể xung đột với nhau.

WordPress Plugin phổ biến nhất, được mọi người tìm kiếm nhiều nhất chắc là plugin bài viết liên quan (Related Posts). Mặc định thì wordpress không có tính năng này. Nhưng bạn có thể thêm nó bằng cách sử dụng một plugin hoặc bạn có thể thực hiện theo bài viết dưới đây của tôi để thêm bài viết liên quan bằng code.

Plugin Related Post cho Website wordpress

Bạn có thể tìm kiếm trong kho thư viện của wordpress và sử dụng các plugin ấy để hiển thị bài viết liên quan trong website wordpress của bạn, dưới đây tôi xin liệt kê một số plugin cho phép bạn tạo bài viết liên quan. Nhưng tôi vẫn khuyên bạn không nên sử dụng chúng.

Hiển thị bài viết liên quan kèm ảnh thumbnai sử dụng code.

Tính năng bài viết liên quan này có thể hiển thị ở mọi vị trí mà bạn muốn miễn nó nằm trong loop của wordpress, nhưng tôi sẽ hướng dẫn chi tiết cách hiển thị bài viết liên quan chỉ ở trong trang bài viết (single.php)

Thumbnai trong bài viết

Thật ra thì chức năng này đã có sẵn ở các phiên bản wordpress gần đây. Nhưng không phải theme nào cũng đã kích hoạt nó, để kích hoạt đó, bạn cần thêm đoạn code bên dưới vào trong file functions.php của theme bạn đang sử dụng.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );
  • Dòng 1: Để bật tính năng thumbnail của bài viết.
  • Dòng 2: Để set width và hight của ảnh thumbnail.

Lưu ý: Để hiển thị được ảnh thumbnail thì bạn cần sử dụng chức năng Use as featured image trong khi viết bài. Nếu không thì bạn có thể sử dụng plugin Auto Post Thumbnail để nó tự động làm việc này (Plugin này sẽ tự động lấy ảnh đầu tiên trong bài viết làm featured images)

Hiển thị bài viết liên quan (Related Post) kèm thumbnail

Sử dụng đoạn code bên dưới, chèn vào file single.php . Bạn muốn bài viết liên quan hiển thị ở đâu thì chèn ở đó.

<div>
<h3>Related posts</h3>
<?php
$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'=>4, // Số bài viết liên quan muốn hiển thị.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div>
<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

Trong đoạn code trên có dòng the_post_thumbnail(array(150,100)) Nó có nhiệm vụ hiển thị kích thước ảnh thumbnail. Bạn có thể thay đổi kích thước ảnh thumbnail tại đó.

Kết quả

Sau khi thực hiện những bước trên thì bạn sẽ có kết quả giống như hình bên dưới đây

Hiển thị bài viết liên quan cho wordpress
Kết quả sau khi thực hiện những bước trên

Thêm css để làm đẹp bài viết liên quan.

Bạn có thể tùy chỉnh css cũng như các class, id trong đoạn code ở trên. Nếu bạn sử dụng các class, id ở trên thì bạn có thể sử dụng lại css của tôi bên dưới.

Giả định tôi đặt chiều rộng là 640px, bạn có thể thay đổi nó để phù hợp với website của bạn.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

Đoạn CSS trên sẽ làm cho thumbnail của bài viết liên quan có kích thước chiều rộng là 150px, điều đó có nghĩa là kết hợp đoạn code php và css trên thì sẽ có 4 ảnh thumbail hiển thị với chiều rộng 640px (đã bao gồm các khoảng cách margin và padding). Bạn có thể điều chỉnh chiều rộng đó theo ý muốn, ví dụ, bạn muốn hiển thị 5 thumbnail thì bạn cần chiều rộng .relatedthumb là 125px

Hiển thị bài viết liên quan theo Category

Đoạn code bên dưới sẽ hiển thị các bài viết trong cùng category với bài viết hiện tại.

<?php $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, // Số bài viết bạn muốn hiển thị ra ngoài.
'caller_get_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><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div>
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Trên đây là Thủ thuật WordPress cơ bản để giúp bạn Hiển thị Bài viết liên quan cho website wordpress mà không dùng plugin. Có thể còn rất nhiều cách khác nữa, nhưng đây là cách tôi hay sử dụng với website wordpress của tôi.

Chúc bạn thành công.

Người dùng quan tâm

  • tìm bài viết liên quan

You May Also Like

About the Author: Thái Dương

Tôi là Dương Thành Thái, tốt nghiệp chuyên ngành CNTT nhưng bản thân lại thích kinh doanh và kiếm tiền trên internet. Công việc hiện tại của tôi là Freelancer nghĩa là ai thuê tôi làm gì là tôi làm cái đó :p

34
Leave a Reply

avatar
28 Comment threads
6 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
29 Comment authors
Nam HảiMinh KhanhQuách QuỳnhiHuongdan BlogBlog iHuongdan Recent comment authors
  Subscribe  
Notify of
phần mềm
Guest

Thủ thuật rất hay cho wp, việc cài nhiều plugin khiến site ngày 1 nặng nề hơn

Hai87
Guest

mình thấy dùng plugin nó đẹp hơn là code tay

Nguyen Trung
Guest
Nguyen Trung

Ban oi, minh co bai viet co anh va bai viet ko co anh. Gio minh muon hien thi theo dang bai viet co anh vaf bai viet ko co anh thi lam sao. Ban chi giup minh nhe. Thank banj

vinh
Guest
vinh

minh dung theme genesis thì làm sao ak bạn . k có file single.php .nên k biết mò làm sao nữa

tho68.com
Guest

Thái ơi, site mình làm nhưng nó lại hiển thị ảnh đại diện full size luôn và ko biết phải làm sao T.T

Nhat Anh
Guest

Nó có cái này mặc định mà ko biết cứ đi cài Plugin cho nó nặng website. Thanks bác, cái này cần chỉnh Css cho nó tí nữa là đẹp như Pinterest thôi ạ.

Ngô Thắng
Guest

Anh ơi em cho cái Related Post vào single.php sao nó báo lỗi k tải được trang ak

sua dieu hoa
Guest
sua dieu hoa

Em thêm mãi mà không được chắc phải dùng plugin thôi

Du hoc Nhat Ban
Guest
Du hoc Nhat Ban

Mình nghĩ là có plugin thì nên dùng plugin nó tiện hơn chứ nhỉ

deidare
Guest
deidare
Hung Dang
Guest
Hung Dang

bạn cho mình hỏi, mình dùng plugin để tạo future images, plugin tự lấy ảnh đầu tiên trong bài viết làm ảnh future images, nhưng khi mình xem nội dung bài viết thì nó lại xuất hiện cái hình đó ở đầu bài viết, mình đã chỉnh css mà không được,, bạn có các nào không? help me..Thân

xuyen
Guest
xuyen

Có cách nào để tạo hình ảnh mặc định cho bài viết ( thumbnail ) mà không cần dùng plugin không vậy AD ?

Ship24h
Guest
Ship24h

Cèn đoạn css ở chỗ nào bạn ơi ?
hướng dẫn thêm xíu cho mình đi
thanks bạn

Vũ Việt Long
Guest
Vũ Việt Long

Hay lắm ad, mình làm được rồi nè

Xuan
Guest
Xuan

Mình thêm nhưng không được, nếu có video hướng dẫn thì tốt

Văn Thủ
Guest
Văn Thủ

Đã thêm thành công, thanks admin

Gio Mua Dong
Guest
Gio Mua Dong

Cảm ơn bạn vì bài viết, bạn có thể hỗ trợ mình làm sao giống hình ảnh mình gửi kèm đây được không ?
Mình có cài plugin này Yet Another Related Posts Plugin và làm sao sửa code để nó hiện thì như hình .
Hoặc theo bạn thì nên làm làm thủ công điền code hơn hay làm sao. Cảm ơn bạn .
Hình :
comment image

comment image

dau da day
Guest
dau da day

cảm ơn bác đúng cái em tìm đây rồi

Trường Luân
Guest
Trường Luân

Cảm ơn bạn vì bài viết này nhé. Mình đã chèn đoạn code kia vào file content-single.php, nhưng mà nó không hiển thị một hàng ngang như giao diện của bạn mà hiển thị thành một cột dọc. Mình đang tập tành làm wordpress, lên mạng tìm cách chỉnh lại giao diện mà làm hoài vẫn không được. Bạn chỉ giúp mình được không? Cảm ơn bạn.

lukhucthanh
Guest
lukhucthanh

Cảm ơn bạn, bài viết rất hữu ích

Nguyễn Hải
Guest

Hiện tại còn dùng được code này để tạo bài liên quan không bạn ?

82x
Guest
82x

Cái này nó là fix cứng những bài viết đó chứ không phải random post nhỉ

Nguyễn Phương Nam
Guest

Chào anh Thái.
Em thêm vào file function.php rồi. và cũng thêm vào file single.php mà khi load trang thì báo không load được trang luôn anh. Không bị sao ạ.
Mong anh phản hồi! Cám ơn anh.

Huy
Guest
Huy

mình thấy dùng code tay thì có vẻ khó tuy nhiên thì code tay vẫn tối ưu hơn

Blog iHuongdan
Guest

Có cách nào để nó hiện cùng với ảnh đại diện khong ạ?

Quách Quỳnh
Guest

Mình đang cần sử dụng code cho bớt nặng blog may quá tìm thấy bài viết này chứ ngại dùng plugin quá

Minh Khanh
Guest

Code bài viết liên quan kèm ảnh thumbnai cho WordPress em ưng ý nhất hiện nay

Nam Hải
Guest
Nam Hải

giờ đọc lại và cũng như học thêm kiến thức cũ cũng không có muộn nhỉ hihi

Đăng ký nhận tin
Tặng quà đặc biệt

Đăng ký nhận tin tức mới từ Thái blog, có quà tặng bạn nhé

Cảm ơn bạn đã đăng ký

Đã xảy ra lỗi