Plugin Meta Box là gì? Cách dùng nó để thêm custom field trong WordPress?

Chúng ta đã nói đến tầm quan trọng cũng như là cách tạo meta box và custom field trong WordPress ở các bài viết trước. Chúng được sử dụng rất nhiều trong quá trình bạn phát triển một con theme hay plugin để cung cấp thêm tính năng cho người dùng. Rồi một lúc nào đó, bạn cũng sẽ nhận ra rằng có rất nhiều dự án có liên quan đến custom field sử dụng những đoạn code giống nhau. Khi đó, bạn sẽ cần tổng hợp chúng lại thành một thư viện riêng để tiện sử dụng nhiều lần, lặp đi lặp lại.

Đó chính là những bước nền móng đầu tiên cho việc cần phải xây dựng nên một framework để bạn có thể tạo các meta box một cách thuận tiện hơn. Tuy nhiên, bạn sẽ phải giải quyết rất nhiều các vấn đề phát sinh trong quá trình xây dựng một framework cho riêng mình. Bạn sẽ cần phải tham gia vào nhiều dự án, gặp nhiều khúc mắc. Đó sẽ là lúc bạn cần copy các đoạn code ở các dự án trước, đưa vào thư viện, tích lũy dần các phương án cho riêng mình. Về cơ bản, bạn vẫn cần phải tự mình giải quyết các trở ngại trong quá trình đó.

Tuy nhiên, cộng đồng WordPress có thể sẽ trợ giúp bạn giải quyết một số vấn đề mà bạn đang gặp phải bằng cách sử dụng một framework khác (chính là một plugin nào đó). Sự trợ giúp này sẽ giúp bạn tiết kiệm thời gian và công sức, giúp bạn có thêm thời gian để sắp xếp lại cũng như là xử lý các vấn đề về UI và UX khác có liên quan đến việc cải thiện trải nghiệm cho người dùng.

Và hôm nay, chúng ta sẽ cùng tìm hiểu về một plugin như vậy. Nó có tên là Meta Box.

Meta Box là gì?

Meta Box là một plugin mạnh mẽ nhưng lại khá tối giản giúp các developer tạo custom meta box và custom field trong WordPress một cách nhanh chóng và dễ dàng.

Plugin này cho phép bạn định rõ các custom meta box và custom field thông qua các mảng và quản lý cũng như xử lý mọi thứ phía sau một cách tự động cho bạn. Nó hỗ trợ một số lượng lớn các loại field, thiết lập cho field. Meta Box không chỉ hỗ trợ post meta, mà còn hỗ trợ cả term meta, user meta, comment meta, settings page (trang thiết lập), và custom table.

Meta Box giúp đơn giản hóa quá trình làm việc với custom field. Với plugin này, bạn sẽ không cần phải gọi các hàm, xử lý các hook, hay lọc dữ liệu trước khi lưu vào database một cách thủ công nữa. Với một số loại field như group chẳng hạn, bạn sẽ không cần phải viết lại code JavaScript để xử lý phần UI nữa. Tất cả những gì bạn cần lúc này chỉ là khai báo thông tin các field mà bạn cần thôi. Plugin Meta Box sẽ giúp bạn làm mọi thứ.

Bây giờ, chúng ta sẽ cùng xem làm thế nào để tạo meta box và custom field với plugin Meta Box này nhé.

Lưu ý một chút là plugin Meta Box mà chúng ta đang nói đến chỉ là một plugin WordPress thôi nhé. Nó không phải meta box (box chứa các custom field) hiểu theo nghĩa chung mà chúng ta nói ở bài Custom field là gì? đâu. Bạn muốn tìm hiểu meta box theo nghĩa chung là gì thì đọc ở bài kia nha.

Cài đặt plugin Meta Box

Cài đặt plugin này rất đơn giản.

Nó miễn phí và có trên WordPress.org, nên bạn có thể cài đặt nó trực tiếp từ Admin Dashboard. Bạn tìm đến mục Plugins > Add New và tìm với từ khóa “Meta Box” trong ô tìm kiếm. Bạn chỉ việc nhấn tiếp Install > Activate.

Cách thêm một meta box vào website WordPress sử dụng plugin Meta Box

Để thêm một meta box vào website, với plugin Meta Box, bạn có 3 cách như sau:

  1. Sử dụng công cụ Online Generator (miễn phí) của Meta Box;
  2. Tự code;
  3. Dùng extension Meta Box Builder của Meta Box để tạo meta box và custom field thông qua một UI ngay trong backend;

Cả cách 1 và 2 đều là sử dụng một giao diện UI trực quan và dễ dùng. Tuy nhiên, vì Meta Box Builder là phiên bản cao cấp của Online Generator nên có thêm nhiều tính năng hơn và cung cấp UI cho bạn ngay trong backend nên khá tiện.

Vì là code được sinh ra bởi cộng cụ Online Generator chỉ sử dụng được khi bạn đã cài plugin Meta Box, mà đoạn code này cũng giống hệt code mà bạn tự code, nên mình sẽ hướng dẫn cách viết code thủ công trước nhé. Ngoài ra, bạn cũng có thể nhúng code này vào 1 plugin, nên mình cũng sẽ hướng dẫn tạo một plugin đơn giản và nhúng code vào đó luôn. Việc dùng Online Generator và Meta Box Builder thì đơn giản hơn nên mình sẽ nói sau.

Tạo một plugin đơn giản và tạo meta box

Tạo một plugin

Đầu tiên, chúng ta tạo một plugin có tên là Hotel Price như sau:

  1. Tạo một folder tên là hotel-price trong thư mục wp-content/plugins;
  2. Tạo một file tên là hotel-price.php trong thư mục trên với nội dung như sau:
<?php
/*
Plugin Name: Hotel Price
Plugin URI: https://metabox.io
Description: A quick demo for Meta Box
Version: 1.0
Author: MetaBox.io
Author URI: https://metabox.io
License: GPL2
*/

Tạo meta box và custom field sử dụng plugin vừa tạo

Để tạo một meta box, bạn sẽ cần hook vào hàm rwmb_meta_boxes. Hàm này chỉ có một tham số duy nhất là một mảng chứa các thông số của meta box. Bạn có thể thay đổi (thêm, chỉnh sửa, xóa) các yếu tố của mảng và trả về các thông tin này.

Mỗi yếu tố của mảng được sử dụng để mô tả cho meta box. Có khá nhiều thông số cho cái này, bạn có thể xem thêm ở phần Field Settings này nhé.

add_filter( 'rwmb_meta_boxes', 'hp_metaboxs' );
function hp_metaboxs( $meta_boxes ) {
    $meta_boxes[] = array(
        'title' => 'Hotel Price',
        'fields' => array(
            array(
                'id' => 'price',
                'name' => 'Price',
                'type' => 'number',
            ),
            array(
                'id' => 'availability',
                'name' => 'Availability',
                'type' => 'radio',
                'options' => array(
                    'Available' => 'Available',
                    'Unavailable' => 'Unavailable',
                ),
            ),
        ),
    );
    return $meta_boxes;
}

Bây giờ, bạn vào chỉnh sửa một bài viết bất kỳ, bạn sẽ thấy một meta box mới xuất hiện ngay phía dưới phần nội dung bài viết.

Một meta box mới sẽ thị ngay bên dưới phần nội dung bài viết trong WordPress.

Hiển thị các giá trị của custom field

Vì Meta Box sử dụng API theo chuẩn của WordPress, nên bạn có thể dùng lại các hàm đã được nói đến ở bài tạo custom field không sử dụng plugin để hiển thị các giá trị của custom field. Bạn có thể tham khảo bài viết này (tiếng Anh) để biết cách thêm API cho WordPress.

Tuy nhiên, bạn nên sử dụng các hàm hỗ trợ được cung cấp bởi Meta Box để giúp bạn code tiện hơn và tương thích với các extension của Meta Box.

Mình tạo một trang demo dưới đây sử dụng theme Twentyseventeen, nên mình sẽ vào file twentyseventeen/template-parts/post/content.php để thêm đoạn code như sau:

    <ul>
        <li>
            <strong>Price</strong>: <?php echo rwmb_meta( 'price' ) ?>
        </li>
        <li>
            <strong>Availability</strong>: <?php echo rwmb_meta( 'availability' ) ?>
        </li>
    </ul>

Bây giờ, quay trở lại bài viết lúc này, bạn sẽ thấy các giá trị của custom field sẽ hiển thị ra như sau:

Các giá trị của custom field sẽ được hiển thị ra trên bài viết.

Sử dụng công cụ Online Generator để tạo meta box và custom field

Công cụ Online Generator là một ứng dụng đặt trên web của Meta Box giúp bạn tạo meta box và custom field một cách thuận tiện nhất (không dùng code). Thay vì phải lục lọi trong các tài liệu hướng dẫn về tất cả các lựa chọn và viết lại từng dòng code, thì với Online Generator bạn chỉ cần nhập vài giá trị của field là xong. Các thuộc tính riêng biệt của field sẽ được hiển ở dạng một form.

Bạn hãy xóa toàn bộ nội dung của plugin mà chúng ta tạo ở trên đi, và chỉ để lại phần khai báo đầu tiên của file hotel-price.php. Sau đó đến trang Online Generator và thực hiện các bước như trong video hướng dẫn sau:

Sử dụng Meta Box Builder để tạo meta box và custom field

Như đã nói ở trên, Meta Box Builder là phiên bản cao cấp của Online Generator. Nó cũng là một extension cao cấp (có trả phí) của plugin Meta Box. Bạn có thể mua riêng lẻ extension này hoặc mua cả một gói nhiều extension nhé.

Để tạo và thiết lập các custom field bằng extension này, mình đã có một bài viết riêng để hướng dẫn chi tiết. Bạn có thể tham khảo tại đó nhé.

Lời cuối

Trên đây là một ví dụ đơn giản về cách mà Meta Box giúp chúng ta giảm thời gian cho việc viết code để tạo custom field. Với cách làm cũ, việc phải thực hiện code hoặc copy chúng lặp đi lặp lại sẽ làm bạn lãng phí khá nhiều thời gian, thậm chí gây khó cho bạn sau này khi cần lần lại và sửa chữa. Nhưng với Meta Box, mọi thứ sẽ trở nên dễ dàng hơn và nhanh hơn.

Meta Box không phải là kiểu plugin được tích hợp hết tất cả các tính năng, bao gồm cả những cái bạn cần và không cần. Mà nó được thiết kế theo kiểu được chia các tính năng ra thành nhiều plugin con riêng lẻ. Mỗi plugin con này được gọi là một extension và sẽ cung cấp cho bạn một loại tính năng riêng. Thậm chí bạn cũng có thể tự tạo một extension riêng như vậy đấy. Meta Box có open source code, bạn có thể tùy ý sử dụng để tạo extension và đóng góp thêm cho plugin. Nếu có ý tưởng, bạn hãy thử nhé.

Để lại bình luận

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 *