Hiển thị danh sách bài viết posts bằng shortcode trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hiển thị danh sách bài viết posts bằng shortcode trong wordpress

Hôm nay mình giới thiệu với những bạn cách chèn danh sách hay nội dung posts/pages vào wordpress mà chẳng cần sử dụng php hoặc chỉnh sửa đến templates. Bằng việc chèn shortcode vào trong bài viết, trang, widget text hay bất kỳ địa ra sao trên trang web.

Thêm shortcode và sử dụng các thuộc tính để lọc tìm các nội dung posts, pages vả có thể cả custom post type theo ý muốn. Để làm được điều đó chúng ta sử dụng Plugin Display Posts Shortcode , các bạn có thể tải về trên wordpress plugins miễn phí.

Download plugin và cài đặt như bình thường. Sau khi bạn kích hoạt plugin thì bắt đầu khai thác các tính năng shortcode lấy posts rồi đấy. Plugin này đã hỗ trợ sẵn trên blog wordpress.com, tuy nhiên nếu bạn xài free của wordpress thì không trải nghiệm được filter của plugin này.
hiển thị Posts bằng Shortcode wordpress plugin

Đoạn mã Shortcode sau hiển thị danh sách bài viết có tiêu đề title, excerpt và thumbnail, bao bởi thẻ div .

 [display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"] 

Shortcode trên hiển thị post thumbnail trong phần cấu hình Settings > Media . Chi tiết về cách dùng post thumbnail /featured image tôi đã nói cụ thể trong bài tùy chỉnh thumbnail trong wordpress.

Plugin không bổ trợ CSS, toàn bộ sử dụng css có trong theme. Bạn có thể tùy chỉnh cách hiển thị theo ý định bằng phương pháp trang trí css cho nó. Ví dụ mình sẽ cho ảnh căn ở bên trái mô tả của mỗi bài viết.

   .display-posts-listing     .listing-item     {     clear    :     both    ;     }       .display-posts-listing   img   {     float    :     left    ;     margin    :     0     10px     10px     0    ;     }   

Hiển thị theo tag và có giới hạn số lượng cần lấy. Đoạn code này hiển thị 20 posts mới nhất với tag “advanced”.

 [display-posts tag="advanced" posts_per_page="20"] 

Mặc định plugin chỉ hiển thị ra 10 bài mới nhất. Kết hợp các tính chất để lọc bài viết theo nhu cầu của bạn. Một tỉ dụ khác.

 [display-posts tag="advanced" image_size="thumbnail"] 

Liệt kê bài viết theo category, có hiển thị ngày tháng và được xắp xếp.

 [display-posts category="must-read" posts_per_page="-1" include_date="true" order="ASC" orderby="title"] 

Bạn cũng có thể có thể liệt kê các posts có taxonomy, như sau đây:

 [display-posts taxonomy="color" tax_term="blue" include_excerpt="true"] 

Sử dụng tính chất include_content, nếu bạn mong muốn hiển thị đầy đặn nội dung của bài viết.

   [  display  -  posts include_content  =    "true"    ]   

Nếu muốn hiển thị các tiêu đề bài viết dạng list, bạn thiết lập tính chất wrapper với “ol” hoặc “ul”.

 [display-posts wrapper="ol"] 

Mặc định sử dụng “ul”. Wrapper sẽ chỉ định thẻ bao nội dung mỗi posts tương ứng cho phù hợp. Ví dụ: ol hoặc ul thì nội dung bài viết chứa trong thẻ li . Các thẻ khác có thể sẽ lấy y nguyên. Chẳng hạn: wrapper="div" thì mỗi bài chứa trong danh sách hiển thị sẽ bao bởi “div”.

Để lấy một nội dung cụ thể, bạn liệt kê ID của posts vào thuộc tính id. Mỗi ID cách nhau dấu phẩy, như thế này.

 [display-posts >  

Cách sử dụng tham số của shortcode “display-posts”

Chi tiết bạn xem tại đây.

Filter display-posts Shortcode

Nếu thuộc tính của shortcode chưa đủ để bạn lấy dữ liệu posts thì cần dùng đến filter để tùy chỉnh các tham số của WP_Query cho chuyện lấy dữ liệu posts/custom post type của shortcode .

Plugin có filter display_posts_shortcode_args , với mỗi đợt gọi shortcode bạn cũng có thể can thiệp vào từng tham số của WP_Query trước khi xuất dữ liệu ra màn hình.

    <   ?php     /** * Display Posts Shortcode - Exclude Posts * @author Bill Erickson * @link http://wordpress.org/extend/plugins/display-posts-shortcode/ * * @param array $args * @param array $atts * @return array $args */     function   be_display_posts_shortcode_exclude_posts  (     $args    ,     $atts     )     {     if    (     isset    (     $atts    [    'not_in'    ]     )     )     {     $posts     =     explode    (     ','    ,     $atts    [    'not_in'    ]     )    ;     $args    [    'post__not_in'    ]     =     $posts    ;     }       return     $args    ;     }   add_filter  (     'display_posts_shortcode_args'    ,     'be_display_posts_shortcode_exclude_posts'    ,     10    ,     2     )    ;   

Tham số $atts là các tính chất được truyền vào cho shortcode, bạn có thể thêm tham số vào $args để lọc posts theo mong muốn trong trường hợp không thể hoàn thành được trên shortcode. Ở ví dụ trên, chúng ta định nghĩa thêm tính chất not_in và bắt tham số này để quy định mã lệnh sử lý trong filter. Bình thường thì plugin không giúp tính chất not_in nhé.

Hiển thị nội dung không tìm thấy

Khi sử dụng các tham số trong shortcode display-posts không thỏa điều kiện và kết quả là không tìm thấy dữ liệu posts nào thì shortcode xuất ra thông báo đại khái là “not found”. Để sửa nội dung này bạn sử dụng filter sau:

    <   ?php   add_filter  (     'display_posts_shortcode_no_results'    ,     'be_no_results'     )    ;     /** * Display Posts Shortcode - Display message if no results * * @author Bill Erickson * @link http://www.billerickson.net/code/display-posts-shortcode-no-results * * @param string $output, default is empty * @return string $output */     function   be_no_results  (     $output     )     {     $output     =     ' 

Sorry, there are currently no posts in this category.

‘;
return $output;
}

Thay nội dung thông báo phía trên cho phù phù hợp với website.

Thay đổi kết quả hiển thị

Bạn cũng có thể có thể thay đổi cách mỗi bài viết được tìm thấy và hiển thị ra trên website. Plugin mở rộng filter cho phép bạn toàn quyền tạo lại nội dung hiển thị của bài viết được tìm thấy bằng cách thêm filter display_posts_shortcode_output . Trong filter có những biến chứa dữ liệu của post cho bạn kiến lập với HTML như ý muốn.

   /** * Comma separated links in Display Posts Shortcode plugin * @author Bill Erickson * @link http://wordpress.org/extend/plugins/display-posts-shortcode/ * * @param string $output the original markup for an individual post * @param array $atts all the attributes passed to the shortcode * @param string $image the image part of the output * @param string $title the title part of the output * @param string $date the date part of the output * @param string $excerpt the excerpt part of the output * @param string $inner_wrapper what html element to wrap each post in (default is li) * @return string $output the modified markup for an individual post */     add_filter  (     'display_posts_shortcode_output'    ,     'be_display_posts_full_content'    ,     10    ,     7     )    ;     function   be_display_posts_full_content  (     $output    ,     $atts    ,     $image    ,     $title    ,     $date    ,     $excerpt    ,     $inner_wrapper     )     {       // Rebuild the output     $output     =     '  '     .     $title     .     ',   '    ;       // Return the modified output     return     $output    ;     }   

Cũng thay đổi luôn wrapper , có thể thêm một vài class trang điểm cho nội dung xuất ra của shortcode.

    <   ?php     /** * Customize opening outer markup of Display Posts Shortcode * @author Bill Erickson * @link http://wordpress.org/extend/plugins/display-posts-shortcode/ * * @param $output string, the original opening markup * @return $output string, the modified opening markup */     function   be_display_posts_open  (     $output     )     {     $output     =     ' 

'

; return $output ; } add_filter ( 'display_posts_shortcode_wrapper_open' , 'be_display_posts_open' ) ;   /** * Customize closing outer markup of Display Posts Shortcode * @author Bill Erickson * @link http://wordpress.org/extend/plugins/display-posts-shortcode/ * * @param $output string, the original closing markup * @return $output string, the modified closing markup */ function be_display_posts_close ( $output ) { $output = '

‘;
return $output;
}
add_filter( ‘display_posts_shortcode_wrapper_close’, ‘be_display_posts_close’ );

Nếu không thích thay đổi cách hiển thị cho bài viết với filter display_posts_shortcode_output , bạn cũng thể làm đẹp cho từng bài viết theo cấu trúc hiển thị mặc định của shortcode. Bằng cách thêm tính chất class vào mỗi bài viết như thế này.

   /** * Add Column Classes to Display Posts Shortcodes * @author Bill Erickson * @link http://www.billerickson.net/code/add-column-classes-to-display-posts-shortcode * * @param array $classes * @param object $post * @param object $query * @return array $classes */     function   be_display_post_class  (     $classes    ,     $post    ,     $listing     )     {     $classes    [    ]     =     'one-half-blueprint'    ;     if    (     0     ==     $listing    ->     current_post     ||     0     ==     $listing    ->     current_post     %     3     )     $classes    [    ]     =     'first'    ;     return     $classes    ;     }   add_filter  (     'display_posts_shortcode_post_be_display_post_class'    ,     10    ,     3     )    ;   

Hi vọng bạn sẽ cảm nhận ra thú vị khi dùng plugin này. Chúc thành công.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Hiển thị danh sách bài viết posts bằng shortcode trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang