Code Template hiển thị Custom Taxonomy cho plugins trong WordPress

Trong quá trình phát triển plugin, có thể sẽ cần tích hợp template để hiển thị dữ liệu riêng theo nhu cầu, yêu cầu từ khách hàng. Bài viết này sẽ chia sẻ hướng dẫn chi tiết cách để viết và tích hợp template đáp ứng nhu cầu đó.

Cụ thể mình sẽ viết thêm template cho taxonomy tên pxg_source_code_category để đáp ứng việc hiển thị danh sách các bài viết dạng post có tính năng bán plugins, mã nguồn, phần mềm trên Wikipoly ở các mục: Software – Phần Mềm, Plugins,…

Khi nào cần tích hợp template riêng trên plugin?

Trước tiên là bạn cần lưu ý, việc viết template riêng để hiện thị trên plugin là không khuyến khích. WordPress có cấu trúc phân định plugins sẽ là phần phát triển các tính năng quản trị và xử lý dữ liệu, themes sẽ là phần hiển thị dữ liệu đó. Việc sử dụng plugin để hiển thị dữ liệu theo thay cho template của theme chỉ thực hiện trong một số trường hợp nhất định. Cụ thể là:

• Hạn chế lỗi khi update themes, đặc biệt là đối với các themes không hỗ trợ hook đáp ứng tính năng plugin đang phát triển.
• Cố định cấu trúc hiển thị của dữ liệu plugin hỗ trợ.
• Những cấu trúc, post type, custom post type chưa được WordPress theme hỗ trợ hiển thị.

Một số tài liệu liên quan có thể bạn cần trong quá trình viết template hiển thị riêng cho custom taxonomy:

• Để kiểm tra xem danh mục taxonomy hiện tại có đúng là taxonomy mình cần không? Copyhttps://developer.wordpress.org/reference/functions/is_tax/
• Để kiểm tra xem tên taxonomy danh mục hiện tại, sử dụng các hàm var_dump(get_queried_object());. Sau đó sử dụng ở trí có thể hiển thị trên giao diện để xem, thực tế nếu là plugin do bạn viết thì chỉ cần tìm tới các hàm đăng ký taxonomy để xem tên.
• Tìm hiểu về quy chuẩn phát triển cấu trúc template WordPress: Copyhttps://developer.wordpress.org/themes/basics/template-hierarchy/

Hướng dẫn tích hợp template cho custom taxonomy

Bước 1: tạo một thư mục để chứa các tập tin template trong plugin đang viết. Ví dụ tạo thư mục templates trong plugin_name: plugin_name/templates.

Bước 2: tạo tập tin .php theo cấu trúc quy định của WordPress. Thực ra bạn có thể đặt tùy ý nhưng sẽ khó cho việc phát triển sau này nên đặt tên theo quy chuẩn của WordPress là cần thiết.

Mình tạo tập tin tên taxonomy-source-code.php

Bước 3: trong tập tin functions.php hoặc nơi khởi tạo thông tin chính cho plugin bạn khai báo thông tin sau.

Nếu plugin đang phát triển dạng class, mô hình MVC sử dụng khai báo sau:

add_filter('template_include', array($this,'pxg_source_code_set_template'));

Nếu plugin phát triển ngoài môi trường class sử dụng khai báo sau:

add_filter('template_include', 'pxg_source_code_set_template');

Tiếp theo khai báo 2 hàm sau:

Hàm loại template để hiển thị dựa vào taxonomy name. Ở đây mình check nếu is_tax đúng là pxg_source_code_category thì mình sử dụng template trong /templates/taxonomy-source-code.php để hiển thị dữ liệu.

Đối với trường hợp bạn sử dụng class, MVC thì khai báo 2 hàm như sau:

public function pxg_source_code_set_template( $template ){
    if(is_tax('pxg_source_code_category')&& !$this->pxg_source_code_is_template($template)){
        $template = PXG_SOURCECODE_PLUGIN_PATH.'templates/taxonomy-source-code.php';
    }
    return $template;
}
public function pxg_source_code_is_template( $template_path ){
    $template = basename($template_path);
    if( 1 == preg_match('/^taxonomy-soure-code((-(\S*))?).php/',$template) )
         return true;
    return false;
}

Đối với trường hợp bạn viết plugin thông thường và không dùng class thì khai báo 2 hàm như sau:

function pxg_source_code_set_template( $template ){
    if(is_tax('pxg_source_code_category')&& !pxg_source_code_is_template($template)){
        $template = PXG_SOURCECODE_PLUGIN_PATH.'templates/taxonomy-source-code.php';
    }
    return $template;
}
function pxg_source_code_is_template( $template_path ){
    $template = basename($template_path);
    if( 1 == preg_match('/^taxonomy-soure-code((-(\S*))?).php/',$template) )
         return true;
    return false;
}

Lưu ý: biến số PXG_SOURCECODE_PLUGIN_PATH trong hàm trên là biến số trả về đường dẫn thư mục gốc plugin của mình. Bạn có thể sử dụng các hàm tương đương mà wordpress hỗ trợ để xử lý tùy vào cấu trúc thư mục plugin bạn phát triển.

Ví dụ các hàm: dirname( __FILE__ ); /*hoặc*/ plugin_dir_path(__FILE__);

Bước 4: hiển thị dữ liệu cho template. Mở tập tin templates/taxonomy-source-code.php và viết code hiển thị dữ liệu. Cấu trúc template bên dưới chỉ là ví dụ, để hoàn chỉnh thì tùy vào thiết kế cần hiển thị mà bạn xử lý code thêm như: loại dữ liệu, phân trang, sidebar, hook function,…

Lưu ý: để template hiển thị đúng style, javascript theo cấu trúc theme mà site đang sử dụng thì bắt buộc trong tất cả template cơ bản phải có 3 hàm sau:

get_header(); để hiển thị cấu trúc đầu trang theo theme.

get_sidebar(); để hiển thị sidebar wideget.

get_footer(); để hiển thị cấu trúc cuối trang theo theme.

Ngoài ra còn các vị trí hook liên quan tới action, filter khác wordpress hỗ trợ bạn cũng có thể dùng để xử lý hiển thị template sao cho chuẩn với theme đang sử dụng.

<?php 
get_header();
?>
<div id="content-sidebar-wrap">
    <div class="wrap">
        <main class="content"> 
            <?php
                $taxonomy_slug = get_queried_object()->slug;
                $taxonomy_name = get_queried_object()->name;
            ?>
                <h2><?php echo $taxonomy_name; ?></h2>
            <?php
                $post_args = array(
                    'post_type' => 'post',
                    'posts_per_page' => 24,
                    'order' => 'ASC',
                    'tax_query' => array(
                        array(
                            'taxonomy' => 'pxg_source_code_category',
                            'field' => 'slug',
                            'terms' => $taxonomy_slug
                        )
                    )
                );
                $post_query = new WP_Query($post_args);
                if($post_query->have_posts()){
                	?>
                	<div class="row clearfix">
                	<?php
                   while($post_query->have_posts()){
                        $post_query->the_post();
                        ?>
                        <div class="col-4">
                        <?php
                    ?>
                                <h2 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>" class="entry-title-link"><?php  the_title(); ?></a></h2>
                                <div class="entry-content"> <?php echo get_the_excerpt(35);  ?> </div>

                        </div>
                    <?php
                   }
                   ?>
                   </div>
                   <?php
                  }
            ?>
        </main>         
    </div>  
</div>          
<?php
get_footer();
?>

Vậy là cơ bản đã hoàn thiện cấu trúc 1 template hiển thị tùy biến trong plugin cho custom taxonomy rồi. Trong trường hợp cần giải đáp, hỗ trợ gì mọi người cứ liên hệ mình giải đáp nhé!