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

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.

Code bài viết liên quan kèm ảnh thumbnai cho WordPress
5 (100%) 4 votes

Người dùng quan tâm

  • bài viết liên quan có thumb wordpress

Bài viết nên đọc

Tác giả: 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

23 Comments

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *