• 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
    • 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

  • Hướng dẫn thêm tài khoản Admin WordPress bằng MySQL và Functions
  • Seri Video tự học WordPress cơ bản
  • Xóa liên kết ở footer sau khi cài Seo Ultimate
  • Hướng dẫn chèn quảng cáo Adsense vào vị trí bất kỳ trong bài viết
  • 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é

Reader Interactions

Bình luận

  1. Shophouse viết

    01/08/2020 lúc 10:47

    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

    Bình luận
  2. Nam Hải viết

    14/10/2019 lúc 19:53

    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

    Bình luận
  3. Minh Khanh viết

    26/07/2019 lúc 21:46

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

    Bình luận
  4. Quách Quỳnh viết

    06/04/2019 lúc 21:03

    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á

    Bình luận
    • Thái Dương viết

      12/03/2020 lúc 16:11

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

      Bình luận
  5. Blog iHuongdan viết

    14/03/2019 lúc 16:38

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

    Bình luận
    • Thái Dương viết

      16/03/2019 lúc 17:26

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

      Bình luận
      • iHuongdan Blog viết

        16/03/2019 lúc 18:11

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

        Bình luận
  6. Huy viết

    17/10/2018 lúc 14:52

    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

    Bình luận
  7. Nguyễn Phương Nam viết

    10/10/2018 lúc 15:59

    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.

    Bình luận
  8. 82x viết

    04/09/2018 lúc 13:56

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

    Bình luận
  9. Nguyễn Hải viết

    28/08/2018 lúc 11:35

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

    Bình luận
    • Thái Dương viết

      31/08/2018 lúc 15:56

      vẫn ok bạn ơi

      Bình luận
  10. lukhucthanh viết

    08/03/2018 lúc 23:27

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

    Bình luận
  11. Trường Luân viết

    03/05/2017 lúc 16:14

    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.

    Bình luận
    • Thái Dương viết

      08/05/2017 lúc 09:42

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

      Bình luận
  12. dau da day viết

    28/06/2016 lúc 10:31

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

    Bình luận
  13. Gio Mua Dong viết

    20/04/2016 lúc 00:45

    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 :
    https://dl.dropboxusercontent.com/u/62864086/Ho%20tro/hien%20thi.jpg

    https://dl.dropboxusercontent.com/u/62864086/Ho%20tro/banthan.jpg

    Bình luận
  14. Văn Thủ viết

    19/04/2016 lúc 13:11

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

    Bình luận
  15. Xuan viết

    30/03/2016 lúc 20:34

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

    Bình luận
  16. Vũ Việt Long viết

    29/03/2016 lúc 11:31

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

    Bình luận
  17. Ship24h viết

    06/03/2016 lúc 16:15

    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

    Bình luận
  18. xuyen viết

    16/02/2016 lúc 16:11

    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 ?

    Bình luận
  19. Hung Dang viết

    24/01/2016 lúc 11:41

    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

    Bình luận
    • Thái Dương viết

      24/01/2016 lúc 14:37

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

      Bình luận
  20. deidare viết

    24/09/2015 lúc 21:41

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

    Bình luận
    • Thái Dương viết

      05/10/2015 lúc 14:06

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

      Bình luận
  21. Du hoc Nhat Ban viết

    30/08/2015 lúc 21:16

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

    Bình luận
  22. sua dieu hoa viết

    10/03/2015 lúc 17:07

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

    Bình luận
  23. Ngô Thắng viết

    10/02/2015 lúc 09:58

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

    Bình luận
  24. Nhat Anh viết

    30/12/2014 lúc 15:33

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

    Bình luận
  25. tho68.com viết

    28/08/2014 lúc 09:18

    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

    Bình luận
  26. vinh viết

    08/08/2014 lúc 22:32

    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

    Bình luận
  27. Nguyen Trung viết

    11/07/2014 lúc 05:28

    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

    Bình luận
  28. Hai87 viết

    18/03/2014 lúc 02:40

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

    Bình luận
  29. phần mềm viết

    27/12/2013 lúc 10:37

    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

    Bình luận

Để lại một bình luận Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

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

GIẢM 25% Dịch vụ Cloud VPS, Hosting hoặc NHÂN ĐÔI RAM, Tặng đến 12 tháng sử dụng

Tự động resize ảnh nền theo thẻ div, sử dụng CSS

HostingViet giảm 50% các dịch vụ cho Black Friday 2021

Tiêu chí lựa chọn nhà cái uy tín

Tên miền miễn phí tại 1and1

[Kèo ngon] Hướng dẫn đăng ký tên miền + hosting miễn phí 1 năm

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
  • Hosting Việt

Bình luận mới

  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Nguyễn Lộc trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • James trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ

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
  • Thiết kế Web An Tâm

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