Cách tạo bài viết liên quan cho WordPress mà không sử dụng plugin

Hữu Thuần

[Thủ thuật WordPress] Hướng dẫn tạo bài viết liên quan cho WordPress mà không sử dụng plugin chi tiết – Việc hiển thị các bài viết liên quan trong wordpress không chỉ giúp giữ chân độc giả mà nó còn tăng tính thẩm mỹ cho trang Web của bạn để tạo bài viết liên quan trong WordPress cách đơn giản nhất là bạn sử dụng plugin hỗ trợ, tuy nhiên nhược điểm lớn nhất khi bạn sử dụng Plugin là sẽ làm cho trang của bạn trở nên rất chậm và có thể xảy ra tình trạng xung đột giữa các Plugin làm cho website của bạn hoạt động không ổn định. Vậy cách tối ưu nhất bạn nên sử dụng code và nhúng trực tiếp vào “child theme” là tốt nhất.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách hiển thị thời gian trên bài viết theo phong cách Facebook giúp bạn có thể dễ dàng tùy biến thời gian đăng bài viết theo phong cách riêng tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo bài liên quan cho WordPress mà không sử dụng plugin đơn giản nhất.

Tạo bài viết liên quan cho WordPress mà không sử dụng plugin

Trong bài viết này mình sẽ hướng dẫn các bạn cách hiển thị bài viết liên quan kèm theo có ảnh Thumbnail vào bài viết thật ra chức năng này nó đã tích hợp sẵn trong wordpress nhưng không phải theme nào bạn đang sử dụng đã kích hoạt chế độ Thumbnail bạn hãy copy đoạn code sau và dán vào file Functions.php của theme mà bạn đang sử dụng.

add_theme_support( 'post-thumbnails' );  
set_post_thumbnail_size( 100, 50, true );

Giải thích

Dòng 1: Kích hoạt tính năng thumbnail của bài viết.

Dòng 2: Để tùy chỉnh (dài) width và (Rộng) hight của ảnh thumbnail.

Để hiển thị được ảnh thumbnail sau khi đăng bài viết xong bạn phải chọn mục Ảnh đại diện (Use as featured image).

tạo bài viết liên quan cho WordPress mà không sử dụng plugin
Tạo bài viết liên quan cho WordPress mà không sử dụng plugin

Hiển thị bài viết liên quan

Tiếp tục bạn chèn code sau vào file single.php để hiển thị bài viết liên quan kèm theo hình ảnh thumbnail. Bạn muốn hiển thị ở đâu thì chèn vào vị trí đó là được.

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

Các bạn chú ý trong đoạn code trên có dòng

the_post_thumbnail(array(150,100));

Bạn có thể thay độ dài, rộng của ảnh đại diện.

Tùy chỉnh hiển thị bài viết liên quan

Tiếp tục bạn có thể tùy chỉnh để làm nổi bật hơn các bài viết liên quan bằng code Css sau hãy copy đoạn code sau và dán vô file CSS của theme bạn đang dùng.

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

Ở đây bạn chú ý các mục sau để tùy chỉnh cho phù hợp với theme của mình.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}  

Bạn thay đổi 640px thành độ rộng để phù hợp với web của mình.

.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}  

Bạn thay đổi 150px thành độ rộng của ảnh đại diện bạn muốn sử dụng là được.

Và đây là kết quả mà tôi đã làm

Bai viet lien quan1

Quá đơn giản để bạn có thể tạo bài viết liên quan cho WordPress mà không sử dụng plugin phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Đánh giá và chia sẻ để nâng cao chất lượng bài viết?

Tỉ lệ 4.8 / 5. Phiếu: 5

Chia sẻ:

BÀI VIẾT LIÊN QUAN

BÀI VIẾT NÊN XEM

Xem thêm

3 bình luận về “Cách tạo bài viết liên quan cho WordPress mà không sử dụng plugin”

Viết một bình luận