Thành Thái Blog

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

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

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

Reader Interactions

Bình luận

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

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

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

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

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

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

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

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

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

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 *