• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar
  • Bỏ qua footer
Thành Thái Blog

Thành Thái Blog

Thủ thuật Wordpress, thủ thuật SEO và chia sẻ mã giảm giá hosting domain

  • WordPress
  • Domain Coupon
    • Namecheap Coupon
    • Godaddy Coupon
    • Domain.com Coupon
  • Hosting Coupon
    • Hostarmada Coupon
    • HawkHost Coupon
    • Stablehost Coupon
    • Hostarmada Coupon
    • A2Hosting Coupon
    • Dreamhost Coupon
    • Exabytes Coupon
    • GreenValueHost Coupon
    • Hostgator Coupon
    • inmotion Coupon
    • Siteground Coupon
  • SEO
  • Kiếm tiền Online
Thành Thái Blog  ➢  Thủ thuật Wordpress  ➢  Code bài viết liên quan kèm ảnh thumbnai cho Wordpres ...

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

Thái Dương 28/05/2020 Thủ thuật Wordpress 36 Bình luận

Sử dụng code để thêm bài viết liên quan cho website 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.

  • Yet Another Related Posts Plugin (YARPP), by mitcho (Michael 芳貴 Erlewine).
  • Similar Posts, by Rob Marsh.
  • WordPress Related Posts, by Denis (Hua?).

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.

Bài viết liên quan

  • Auto remove spam links trong wordpress comment
  • Hướng dẫn chèn quảng cáo Adsense vào vị trí bất kỳ trong bài viết
  • Thêm tùy chọn background cho website wordpress của bạn
  • Child Themes là gì? Cách tạo Child Themes trong Worpdress
  • Tối ưu Contact Form 7 để tăng tốc website wordpress của bạn

Tags: Bài viết liên quan featured images Related Post

Nói về Thái Dương

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. Hiện tại mình là Freelancer, ai thuê gì tôi làm đó, chỉ cần hàng ngày kiếm đủ tiền mua bỉm, sữa cho con là đủ :) Follow Facebook - Twitter - Pinterest của tôi để chúng tôi kết nối cùng nhau nhé

Subscribe
Login
Notify of
guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?
guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?
36 Comments
Inline Feedbacks
View all comments

phần mềm
phần mềm
7 years ago

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

Reply
Hai87
Hai87
6 years ago

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

Reply
Nguyen Trung
Nguyen Trung
6 years ago

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

Reply
vinh
vinh
6 years ago

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

Reply
tho68.com
tho68.com
6 years ago

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

Reply
Nhat Anh
Nhat Anh
6 years ago

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 ạ.

Reply
Ngô Thắng
Ngô Thắng
6 years ago

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

Reply
sua dieu hoa
sua dieu hoa
5 years ago

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

Reply
Du hoc Nhat Ban
Du hoc Nhat Ban
5 years ago

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

Reply
deidare
deidare
5 years ago

Cách này dễ nè
https://vosontra.wordpress.com/2015/09/24/tao-bai-viet-lien-quan-related-cho-wordpress/

Reply
Thái Dương
Author
Thái Dương
5 years ago
Reply to  deidare

cái này là wp.com chứ ko phải là trên host bạn nhé

Reply
Hung Dang
Hung Dang
5 years ago

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

Reply
Thái Dương
Author
Thái Dương
5 years ago
Reply to  Hung Dang

Bạn đang dùng theme gì?

Reply
xuyen
xuyen
5 years ago

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 ?

Reply
Ship24h
Ship24h
5 years ago

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

Reply
Vũ Việt Long
Vũ Việt Long
4 years ago

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

Reply
Xuan
Xuan
4 years ago

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

Reply
Văn Thủ
Văn Thủ
4 years ago

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

Reply
Gio Mua Dong
Gio Mua Dong
4 years ago

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

Reply
dau da day
dau da day
4 years ago

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

Reply
Trường Luân
Trường Luân
3 years ago

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.

Reply
Thái Dương
Author
Thái Dương
3 years ago
Reply to  Trường Luân

Bạn dùng css để sửa theo ý bạn nhé

Reply
lukhucthanh
lukhucthanh
2 years ago

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

Reply
Nguyễn Hải
Nguyễn Hải
2 years ago

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

Reply
Thái Dương
Author
Thái Dương
2 years ago
Reply to  Nguyễn Hải

vẫn ok bạn ơi

Reply
82x
82x
2 years ago

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

Reply
Nguyễn Phương Nam
Nguyễn Phương Nam
2 years ago

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.

Reply
Huy
Huy
2 years ago

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

Reply
Blog iHuongdan
Blog iHuongdan
1 year ago

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

Reply
Thái Dương
Author
Thái Dương
1 year ago
Reply to  Blog iHuongdan

Nó có hàm này để show ảnh nè e the_post_thumbnail();

Reply
iHuongdan Blog
iHuongdan Blog
1 year ago
Reply to  Thái Dương

Thanks đại ca nhiều ạ! Đã thành công hehe

Reply
Quách Quỳnh
Quách Quỳnh
1 year ago

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á

Reply
Thái Dương
Author
Thái Dương
11 months ago
Reply to  Quách Quỳnh

Vừa ghé qua blog của bác, đang muốn liên kết các blog với nhau, bác có nhu cầu không ạ?

Reply
Minh Khanh
Minh Khanh
1 year ago

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

Reply
Nam Hải
Nam Hải
1 year ago

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

Reply
Shophouse
Shophouse
7 months ago

Anh ơi, web em bất động sản muốn hiển thị bài viết liên quan theo “chuyên mục mẹ”, và liên quan “tag”

Làm 2 phần liên quan thì sửa như thế nào?

Anh có làm clip Youtube về bài này ko ạ?

Cám ơn

Reply
wpdiscuz   wpDiscuz

Sidebar chính

Bài viết mới

get envato elements mien phi – chia se free elements envato

Get Envato Elements miễn phí – Download Free Elements Envato

Đánh giá Hostarmada Hosting giá rẻ chất lượng

Đánh giá HostArmada, Hosting giá rẻ chất lượng

Top 5 game được yêu thích nhất hiện nay

Làm thế nào để truy cập Oppa888 khi bị chặn?

Fshare sale tưng bừng: Fshare thả ga lưu trữ, thanh toán tiết kiệm cùng ví Moca

Hosting nên dùng cho Wordpress

HELLO2017
VPS giá rẻ
Hosting quốc tế giá rẻ

Footer

Liên kết hữu ích

  • Get themeforest giá rẻ
  • Đối tác
  • Download
  • Review
  • Kinh nghiệm

Bình luận mới

  • lacasta trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Thái Dương trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Đệ Nguyễn Trọng trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Quách Huy trong Get Envato Elements miễn phí – Download Free Elements Envato
  • David Do trong Hướng dẫn thêm tài khoản Admin WordPress bằng MySQL và Functions

Bạn bè

  • NamLee Blog
  • Thắng Đặng Blog
  • Mua theme WordPress giá rẻ
  • Diễn đàn học tập
  • Trường THPT Mỹ Đức A
  • Món ngon mỗi ngày
  • Tuấn.dev
  • Blog Tin Học
  • Tiền Minh Vy – tienminhvy.com

Copyright © 2014 by Thành Thái Blog - Sử dụng Hawkhost kết hợp dịch vụ Mua theme Wordpress bản quyền

  • Giới thiệu
  • Liên hệ
  • Thanh toán
  • Policy
wpDiscuz