Cách tích hợp Meta Box vào plugin để tạo custom fields

Nếu bạn muốn sử dụng Meta Box để tạo custom fields, hay là một trang settings page nhưng lại không muốn cài plugin này vào website, thì có một cách đó là tích hợp nó vào 1 plugin khác.

Có thể bạn sẽ hỏi là tại sao phải làm như vậy, cứ cài Meta Box như bình thường cũng được mà, phải không? Nhưng có đôi khi bạn tạo website cho khách hàng, bạn muốn ẩn một số thông tin đi, ví dụ như plugin bạn sử dùng chẳng hạn, thì đây sẽ là một cách hữu hiệu.

Hãy cùng xem cách làm nhé.

Tích hợp Meta Box vào một plugin

Bước 1: Tạo một plugin mới

Trong folder wp-content > plugin, tạo một folder mới tên là project-demo với một file project-demo.php bên trong. File php có nội dung như sau:

<?php
/**
 * Plugin Name: Project Demo 
 * Plugin URI: https://metabox.io 
 * Version: 1.0
 * Author: Meta Box
 * Author URI: https://metabox.io
 */

Vào trang danh sách plugin trong Admin Dashboard, bạn sẽ thấy một plugin mới tên là Project Demo xuất hiện. Bạn nhấn activate nó nhé.

Bước 2: Tích hợp Meta Box plugin vào plugin vừa tạo

Chúng ta sẽ cần tải các thư viện cần thiết của Meta Box vào plugin vừa tạo.

Trong folder project-demo, mình tạo thêm một file là composer.json với nội dung như sau:

{
    "repositories":[
        {
            "type": "composer",
            "url": "https://wpackagist.org"
        }
    ],
    "require": {
        "wpackagist-plugin/meta-box": "dev-trunk",
    },
    "extra": {
        "installer-paths": {
            "vendor/meta-box/meta-box": ["wpackagist-plugin/meta-box"],
        }
    },
    "autoload": {
        "files": [
            "vendor/meta-box/meta-box/meta-box.php",
        ]
    }
}

Lưu ý, ở đây mình chỉ tích hợp một mình plugin Meta Box (miễn phí) vào plugin vừa tạo nên sử dụng đoạn code này. Còn nếu bạn muốn thêm các extension khác của Meta Box để tạo các custom fields nâng cao hay các settings page, thì bạn tham khảo file này nhé.

Khi tích hợp thêm các extension khác, đặc biệt là các premium extension, thì bạn cần phải nhập thêm licence key của sản phẩm nhé (xem cụ thể ở file này).

Quay trở lại với đoạn code trên, mình giải thích thêm một vài điểm như sau:

  • "require": là phần khai báo các thư viện sẽ cần tải về. Ở đây mình chỉ khai báo một mình thư viện của Meta Box thôi. Bạn tham khảo thêm các dòng lệnh khai báo cho các thư viện của các extension ở đây.
  • "extra": khai báo đường dẫn để lưu các thư viện.
  • "autoload": tự động load thư viện khi plugin được kích hoạt.

Tiếp theo, bạn chạy lệnh composer install trong folder project-demo nhé (hãy đảm bảo rằng bạn đã cài Composer).

Chạy lệnh composer install sau khi tích hợp Meta Box vào plugin mới

Sau đó, bạn sẽ thấy folder project-demo của bạn sẽ gồm các folder và file như sau:

Các file trong folder của plugin mới.

Cuối cùng, bạn sẽ cần chạy tiếp một dòng lệnh trong file project-demo.php để tải các thư viện vừa khai báo:

require 'vendor/autoload.php';
Chạy tiếp một dòng lệnh trong file chứa plugin mới được tích hợp với Meta Box.

Bạn có thể xem thêm hướng dẫn về cách dùng Composer để cài đặt Meta Box ở đây nhé.

Đến đây là bạn đã hoàn thành việc tích hợp Meta Box vào một plugin rồi đó, bạn có thể tiến hành tạo thử các custom fields luôn được nhé.

Tạo Post Types và Custom Fields bằng plugin mới

Bây giờ, mình sẽ sử dụng plugin vừa tạo ở trên (đã được tích hợp Meta Box) để tạo một post type mới có tên là Project rồi sau đó tạo custom field cho post type này nhé.

Thực ra, việc thao tác lúc này sẽ khá giống so với khi bạn cài trực tiếp plugin Meta Box lên website. Chỉ có một sự khác biệt là nếu bạn không tích hợp kèm các extension cung cấp UI (Ví dụ: Meta Box Builder, MB Custom Post Type, MB Custom Taxonomy) vào plugin như mình làm ở đây, thì bạn sẽ phải viết code hoàn toàn. Đồng thời, thay vì viết code vào file functions.php thì bây giờ bạn sẽ viết code vào file .php của plugin mà bạn tạo (project-demo.php).

Xem cụ thể thao tác dưới đây và so sánh với bài tạo một trang giới thiệu sản phẩm bằng plugin Meta Box, bạn sẽ thấy rõ điều đó.

Bước 1: Tạo một post type mới

Thêm đoạn code sau vào file project-demo.php:

// Create a new post type
function frefix_register_post_type_project(){
    $label = array(
        'name'                => 'Projects',
        'singular_name' => 'Project',
    );

    $args = array(
        'labels'               => $label,
        'description'       => 'Post type Project',
        'supports'          => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments', 'revisions' ),
        'rewrite'           => array(
            'slug'           => 'project',
            'with_front'  => false,
            'feeds'         => true,
            pages'         => true,
        ),
        'public'                          => true,
        'show_ui'                      => true,
        'menu_position'            => 20,
        'capability_type'           => 'page',
        'map_meta_cap'          => true,
        'has_archive'                => true,
        'query_var'                   => 'project',
        'show_in_rest'              => true,
        'show_in_menu'           => true,
        'show_in_nav_menus' => true,
    );
    register_post_type( 'project', $args );
}
add_action( 'init', 'frefix_register_post_type_project' );

Quay trở lại trang Admin Dashboard, bạn sẽ thấy một menu mới tên là Projects xuất hiện. Đây chính là post type mà bạn vừa tạo mới.

Post type vừa được tạo bởi plugin mới.

Bước 2: Tạo custom fields cho post type mới

Để tạo custom fields bạn cũng có thể lựa chọn là tự code, hoặc dùng Online Generator để tạo code nhé. Sau đó copy và dán đoạn code (như dưới đây chẳng hạn) vào file project-demo.php.

// Add custom fields for the Project post type
function prefix_add_fields_project( $meta_boxes) {
    $meta_boxes[] = [
        'title'             => 'Information project',
        'post_types' => 'project',
        'fields'          => [
            [
                'id'       => 'investors',
                'name' => 'Investors',
            ],
            [
                'id'       => 'customer',
                'name' => 'Customer',
            ],
            [
                'id'       => 'description',
                'name' => 'Description',
                'type'   => 'textarea',
            ],
            [
                'id'       => 'image',
                'name' => 'Images',
                'type'   => 'image_advanced',
            ],
        ],
    ];
    return  $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'prefix_add_fields_project' );

Bây giờ, thử tạo/chỉnh sửa một bài viết thuộc post type Project, bạn sẽ thấy các custom field xuất hiện như sau:

Các custom field xuất hiện trong post type Project.

Bước 3: Hiển thị giá trị của các custom fields ra frontend

Tạo template cho trang single của post type Project

Thêm đoạn code sau vào file project-demo.php:

// Register a new template for the single page of Project post type
function prefix_project_template( $template ) {
    if(  is_singular( 'project' )) {

        $new_template = plugin_dir_path( __FILE__ ) . 'project-template.php';

        if ( '' != $new_template ) {
            return $new_template ;
        }
    }
    return $template;
}
add_filter( 'template_include', 'prefix_project_template', 99 );

Tiếp theo, bạn tạo một file mới trong folder project-demo có tên là project-template.php (trùng với tên file đã khai báo ở đoạn code phía trên) với nội dung như sau:

<?php get_header(); ?>
<div class="content">
    <h3><a href="<?php  the_permalink() ?> " title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p><span class="uabb-meta-date"> <?php echo get_the_date('d.m.Y'); ?> </p></h5>
</div>
<?php get_footer(); ?>

Hiển thị giá trị của custom fields vào template vừa tạo

Bạn thêm đoạn code sau vào phần nội dung (content) của file template (project-template.php):

<div class="img-post">
    <div>
        <?php 
            $images = rwmb_meta( 'image', array( 'size' => 'full' ) );
            foreach ( $images as $image ) {
                echo '<img src="'. $image['url']. '">';
            }
        ?>
    </div>
</div>
<div class="infomation">
    <?php
        $investors = rwmb_meta( 'investors', '', get_the_ID() );
        $customer = rwmb_meta( 'customer', '', get_the_ID() );
        $description = rwmb_meta( 'description', '', get_the_ID() );
    ?>
    <table>
        <tr>
            <td class="col-1">Investors</td>
            <td><?php echo $investors; ?></td>
        </tr>
        <tr>
            <td class="col-1">Customer</td>
            <td><?php echo $customer; ?></td>
        </tr>
        <tr>
            <td class="col-1">Description</td>
            <td><?php echo $description; ?></td>
        </tr>
    </table>
</div>

Lúc này, ở trang single post của post type Project, bạn sẽ thấy nội dung hiển thị lên như sau:

Nội dung được hiển thị ở trang single post của post type Project.

Các field và giá trị của nó hiển thị chưa được đẹp, nên chúng ta cần style lại một chút nữa nhé.

Dùng CSS style lại hiển thị của các field

Mình tạo thêm một file style.css trong folder project-demo và enqueue nó vào trong file project-demo.php như sau:

function prefix_project_styles() {
    wp_register_style( 'prefix_main-style', plugin_dir_url( __FILE__ ) . '/style.css', 'all' );
    wp_enqueue_style( 'prefix_main-style' );
}
add_action( 'wp_enqueue_scripts', 'prefix_project_styles' );

Cấu trúc của folder project-demo sẽ thành như này:

Cấu trúc của file chứa plugin được tích hợp với Meta Box.

Tùy theo việc bạn muốn style các field hiển thị như thế nào thì bạn thêm code vào file style.css tương ứng. Ở đây, mình thêm một đoạn code như này:

.information table, td{
    border: 1px solid black;
}

img {
    display: inline-block!important;
    height: auto;
    max-width: 200px!important;
    margin-right: 15px!important;
    margin-bottom: 20px;
}

.content {
width: 800px;
margin: 0 auto;
}

.col-1 {
    width: 30%;
}

Bạn sẽ thấy các field hiển thị giá trị ra như sau:

Hiển thị các custom field ra frontend bằng plugin mới có tích hợp Meta Box.

Vậy là bạn đã hoàn thiện việc tạo post type, custom fields và hiển thị chúng ra frontend bằng plugin mới có tích hợp Meta Box rồi đó.

Bạn có thể tham khảo toàn bộ source code trong bài viết này tại đây nhé.

https://github.com/wpmetabox/tutorials/tree/master/plugin-bundle-metabox

Lời cuối

Hy vọng với cách này, bạn đã có thêm một cách sử dụng Meta Box cho theme của bạn hoặc trên site của khách hàng mà không cần phải cài đặt hay hiển thị menu của Meta Box lên Admin Dashboard. Nếu bạn vẫn băn khoăn điều gì đó, hãy để lại comment nhé. Và đừng quên theo dõi thêm các bài hướng dẫn khác của mình nha.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *