Custom Taxonomy – Hiển thị danh sách post type và Gọi post type theo taxonomy slug

Home / Custom Taxonomy – Hiển thị danh sách post type và Gọi post type theo taxonomy slug

Bạn đã tạo được custom post type, nhưng giờ bạn muốn hiển thị hết bài viết trong custom post type đó ra theo custom taxonomy name slug thì làm thế nào được? Vậy ở bài viết này mình sẽ hướng dẫn các bạn xử lý vấn đề đó.

Nếu bạn chưa biết tạo Custom Post Type Thì đọc lại bài viết này: Custom Post Type – Thêm lựa chọn đăng bài viết trong wordpress

* Video Hướng Dẫn


1. Khởi tạo Custom Taxonomy

Bạn mở file function.php hoặc bạn có thể tạo một file khác rồi gọi nó vào file function.php sau đó thêm đoạn mã sau vào:

function make_taxonomy_tin_tuc() {
        $labels = array(
                'name' => 'Categories',
                'singular' => 'Category',
                'menu_name' => 'Categories'
        );
        $args = array(
                'labels'                     => $labels,
                'hierarchical'               => true,
                'public'                     => true,
                'show_ui'                    => true,
                'show_admin_column'          => true,
                'show_in_nav_menus'          => true,
                'show_tagcloud'              => true,
        );
        register_taxonomy('cat-tin-tuc', 'tin-tuc', $args);
}
add_action( 'init', 'make_taxonomy_tin_tuc', 0 );

Sau đó bạn vào post type tin tức kiểm tra sẽ thấy có category rồi đó:

Custom Taxonomy - Hiển thị danh sách post type

2. Viết Shortcode hiển thị custom post type qua custom taxonomy name slug

2.1. Tạo shortcode

Bạn mở file function.php rồi thêm đoạn code sau vào:

// Call post type via taxonomies name slug

function tin_tuc_shortcode_call($atts){
    extract(shortcode_atts(array(
       'class_name'  => 'cat-post',
       'totalposts' => '-1',
       'thumbnail' => 'false',
       'excerpt' => 'true',
       'category' => '',
       'layout' => '1',
       'width' => '1',
       'orderby' => 'post_date'
    ), $atts));
    
    global $post;
    $args = array (
        'post_per_page' => $totalposts,
        'orderby'       => $orderby,
        'post_type'     => 'tin-tuc',
        'tax_query'     =>array(
           array(
            'taxonomy' => 'cat-tin-tuc',
            'field'     => 'slug',
            'terms'     => array($category)
               
           ) ) ); 
    $post_custom= NEW WP_Query($args);
    $out ='<ul class="'.$class_name.'">';
    if($post_custom->have_posts()){ 
        while ($post_custom->have_posts()){
            $post_custom -> the_post();
            $out .= '<li class="list_post_item">';
            $out .= '<h3><a href="'.get_permalink().'">'.get_the_title(). '</a></h3>';
            $out .= '<div class="image_post_type">'.get_the_post_thumbnail($post->ID, 'thumbnail').'</div>';
            $out .= '<p class="content_post_type">'.get_the_excerpt().'</p>';
            $out .= '</li>';
        }
    }
    $out .= '</ul>';
    wp_reset_query();
    return $out;
}
add_shortcode('tin-tuc', 'tin_tuc_shortcode_call' );

//Cách gọi: [tin-tuc  totalposts ='3' category = 'test' thumbnail='true' excerpt ='true']

Các biến thumbnail và excerpt là để bạn phát triển thêm sau này nếu bạn muốn hiển thị miêu tả ngắn hoặc ảnh đại diện thì chọn true ngược lại chọn false. Mình sẽ hướng dẫn tiếp ở phần sau.

2.2. Hiển thị short code trong bài viết và trong file php

Để hiển thị trong bài viết bạn chỉ cần đặt đoạn shortcode “[tin-tuc totalposts =’3′ category = ‘test’ thumbnail=’true’ excerpt =’true’]” vào bất kì vị trí nào khi viết bài, trong widget hay thậm chí trong cả các plguin khác, thì bài viết sẽ show ra thôi.

Để hiển thị trong file php bạn dùng như sau:

<?php echo do_shortcode("[tin-tuc  totalposts ='3' category = 'test' thumbnail='true' excerpt ='true']")?>

sau dòng lệnh đó shortcode sẽ hiện ra theo ý của bạn, và bạn nhớ rằng category = ‘tên-slug-của-custom-taxonomy’.

Trong quá trình đọc bài viết hoặc xem video có chỗ nào không hiểu bạn cứ để lại comment bên dưới để được giúp đỡ nhé. Cảm ơn các bạn đã quan tâm!
Bài viết trước
[CSS-Tricks] Tạo khối lập phương bằng CSS
Bài viết tiếp theo
Game xếp hình - html5 - Tải miễn phí

    Đăng kí nhận thông tin

    Đăng ký ngay để nhận được những thông tin khi có bài viết mới!