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

Tạo một website với CMS wordpress bây giờ thì quá đơn giản cho người coder cũng như cho các bạn không biết gì về code vẫn có thể làm một website chuyên nghiệp.

Bài viết này vừa hướng dẫn các bạn có thêm một cách mới để tạo tin liên quan sau cuối mỗi bài viết, và lưu lại cho mình để khi làm cho khách hàng sẵn đó mà copy cho nhanh.

Thông thường, để tạo Tin liên quan hay bài viết khác sau cuối mỗi bài viết trong wordpress chúng ta hay tìm tới các plugin Related Post được chia sẻ rất nhiều trên mạng, rất nhiều các style lạ và đẹp mắt, trái lại sẽ gặp rất nhiều vấn đề về bảo mật.

Bài viết này, sẽ hướng dẫn cách tự thêm code để tạo Tin liên quan các bước thực hiện như sau:

Hiển thị bài viết liên quan kèm ảnh thumbnai

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)

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>Tin liên quan</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 đó.

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

Kết quả

Sau khi thực hiện những bước trên và thực hiện chút css thì bạn sẽ có kết quả giống như hình bên dưới đây ở cuối mỗi bài viết.

Tham khảo 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à 100% cho tương thích mọi thiết bị di động, bạn có thể thay đổi nó để phù hợp với website của bạn.

.relatedposts {width: 100%; 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: 30%;}

.relatedthumb a:hover {background-color: #ddd; color: #000;}

Bạn cũng có thể bỏ ảnh thumb bằng đoạn code sau:

<?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'=> 3, // 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>Bài viết khác</h3><ul>';

while( $my_query->have_posts() ) {

$my_query->the_post();?>

<li><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php the_time('d/m/Y') ?> </li>

<?

}

echo '</ul></div>';

}

}

$post = $orig_post;

wp_reset_query(); ?>

<br/><hr>

Kết quả:

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. Cũng tương tự như trên nếu bạn muốn hiển thị thêm ảnh thumb thì để đoạn này. Ngược lại, xóa bỏ php the_post_thumbnail();

<?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(); ?>