Hướng dẫn cách tạo Custom MetaBox cực dễ trong WordPress

Mặc dù rất tệ Văn, phải công nhận là rất tệ, các đọc giả thường hay phàn nàn rằng “Sai chính tả kìa”. Nhưng không sao cả mình đang cố gắng từng ngày để chữa lỗi đây. Mọi người có thấy sai thì góp ý nhé.

Không dài dòng luyên thuyên nữa, nói xíu nữa là quên lối về luôn à. Thôi quay trở lại uống nước trà thôi.

Hãy COPY rồi PASTE bạn sẽ có cả Thế Giới

1. MetaBox là gì nhỉ ?

Meta là không phải là tên mới của Facebook đâu nhé :), còn Box là cái hộp chính xác là như vậy rồi.

Nhưng trong WP thì MetaBox là một khung chứa giúp tác giả nhập liệu hoặc tùy chỉnh liên quan đến bài viết, trang hoặc các Custom Post type. Xem hình bên dưới để hiểu rõ nhé. MetaBox hay còn gọi là Custom MetaBox.

Phải công nhận Metabox là một tiện ích không thể tuyệt vời hơn mà WP đã ban tặng cho chúng ta.

2. Làm sao để tạo Custom MetaBox trong WordPress?

Một câu hỏi khá thú vị mà tôi tự đặt ra rồi tự trả lời. Ai ơi đừng vội đừng vàng…Từ từ cháo nó cũng nhừ 🙂 Các bạn cứ làm theo các bước bên dưới, đảm bảo cũng xong nếu không thành công cũng có việc đi Fix lỗi thôi, đừng lo vì quá lo !!!

2.1  Thêm MetaBox

Thông qua action WP cung cấp hãy dùng nó như là ăn cơm bữa với món add_meta_boxes. Nhớ tất cả các đoạn code trong bài viết này đều khai báo trong file: functions.php nhé. Còn nếu ai chưa tìm thấy file này đâu, hãy quay lại học từ bài số 1 là vừa.

<?php
add_action( 'add_meta_boxes', 'wpshare247_add_new_metabox' );

Tiếp theo tạo hàm wpshare247_add_new_metabox php vừa khai báo ở trên. Các đoạn code tôi sẽ gom lại cho đầy đủ nhé, đừng thắc mắc vì sao mà hãy đọc lại toàn bộ code.

<?php
add_action( 'add_meta_boxes', 'wpshare247_add_new_metabox' );
function wpshare247_add_new_metabox(){
//Code ở đây nè...xem tiếp bên dưới
}

Khai báo các tham số cho MetaBox

<?php
add_action( 'add_meta_boxes', 'wpshare247_add_new_metabox' );
function wpshare247_add_new_metabox(){
    //MetaBox thứ 1 ---------------------------------------
    $id = 'wpshare247_add_new_metabox_1'; // Dùng để đánh dấu định danh chứ không có gì quan trọng
    $title = __( 'Tiêu đề METABOX 1', 'wpshare247' );
    $func_callback = 'wpshare247_add_new_metabox_callback1'; // Hàm callback để hiển thị Form nhập liệu MB
    $arr_post_type = array('post', 'page', 'product'); // Danh sách các loại Post mà bạn muốn MB xuất hiện khi thêm mới
    $context = 'normal'; // Gồm các giá trị: [ advanced ; side ; normal ]
    $priority = 'low'; // Thứ tự xuất hiện: low ; high; default
    add_meta_box( $id, $title, $func_callback, $arr_post_type, $context, $priority, $callback_args);
}

function wpshare247_add_new_metabox_callback1($post){
//Hiển thị Form của Metabox
?>
Các field meta xuất hiện tại đây
<?php
}

Tiếp theo bạn vào trong Admin, vào menu trái “Thêm mới bài viết” Hoặc “Thêm mới trang” bạn sẽ thấy xuất hiện hộp dữ liệu như hình bên dưới đây.

Giải thích:

• {$id}: Dùng để đánh dấu định danh chứ không có gì quan trọng
• {$title}: Tiêu đề của MB
• $func_callback: Hàm callback để hiển thị Form nhập liệu MB
• $arr_post_type: Danh sách các Post mà bạn muốn xuất hiện MB
• $context: Vị trí xuất hiện của MB
• $priority: Thứ tự xuất hiện của MB theo trục dọc từ trên xuống dưới theo giá trị high, default, low

OK tốt rồi đó. Giờ qua bước tiếp theo được rồi chứ.

2.2  Khai báo các trường dữ liệu

Bước này các bạn chỉ nên tập trung vào hàm wpshare247_add_new_metabox_callback1 thôi nhé, đừng lơ là mà “Rớt Tốt Nghiệp”

<?php
add_action( 'add_meta_boxes', 'wpshare247_add_new_metabox' );
function wpshare247_add_new_metabox(){
    //MetaBox thứ 1 ---------------------------------------
    $id = 'wpshare247_add_new_metabox_1'; // Dùng để đánh dấu định danh chứ không có gì quan trọng
    $title = __( 'Tiêu đề METABOX 1', 'wpshare247' );
    $func_callback = 'wpshare247_add_new_metabox_callback1';
    $arr_post_type = array('post', 'page', 'product'); // Danh sách các loại Post mà bạn muốn MB xuất hiện khi thêm mới
    $context = 'normal'; // advanced ; side ; normal
    $priority = 'low'; // Thứ tự xuất hiện: low ; high; default
    add_meta_box( $id, $title, $func_callback, $arr_post_type, $context, $priority, $callback_args);
}

function wpshare247_add_new_metabox_callback1($post){
    //Hiển thị Form của Metabox
    ?>
    
    <!-- Kiểu Select -->
    <div class="wpshare247-group-item">
    	<div><label for="wpshare247_field"><strong>Đây là mô tả Select</strong></label></div>
        <select name="wpshare247_field_select" id="wpshare247_field" class="postbox">
            <option value="">Công ty Dịch vụ TBAY có bao nhiêu Website nào?</option>
            <option value="tbay.vn">tbay.vn</option>
            <option value="website366.com">website366.com</option>
            <option value="wpshare247.com">wpshare247.com</option>
            <option value="raotin247.com">raotin247.com</option>
        </select>
    </div>
    
    <!-- Kiểu Text -->
    <div class="wpshare247-group-item">
    	<div><label for="wpshare247_field"><strong>Công ty Dịch vụ TBAY có đào tạo Lập trình Web WordPress hay không?</strong></label></div>
        <input style="width:100%" name="wpshare247_field_text" type="text" value="" placeholder="Công ty Dịch vụ TBAY có đào tạo Lập trình Web WordPress" />
    </div>
    
    <!-- Bạn cũng có thể khai báo thêm các kiểu khác như: Textarea, checkbox, radio.... -->
    <?php
}

WOW thật diệu kì đúng không? Đó chỉ là câu bất ngờ cho các bạn mới lần đầu biết tới MB, chứ nó cũng bình thường thôi.

SOS…….chưa xong đâu nhé, tới đây thì chưa dùng được đâu, còn bước bên dưới đây nữa !!!!

2.3 Lưu dữ liệu các trường khai báo

Chú ý hàm wpshare247_save_postdata 

<?php
//Step 1
add_action( 'add_meta_boxes', 'wpshare247_add_new_metabox' );
function wpshare247_add_new_metabox(){
    //MetaBox thứ 1 ---------------------------------------
    $id = 'wpshare247_add_new_metabox_1'; // Dùng để đánh dấu định danh chứ không có gì quan trọng
    $title = __( 'Tiêu đề METABOX 1', 'wpshare247' );
    $func_callback = 'wpshare247_add_new_metabox_callback1';
    $arr_post_type = array('post', 'page', 'product'); // Danh sách các loại Post mà bạn muốn MB xuất hiện khi thêm mới
    $context = 'normal'; // advanced ; side ; normal
    $priority = 'low'; // Thứ tự xuất hiện: low ; high; default
    add_meta_box( $id, $title, $func_callback, $arr_post_type, $context, $priority, $callback_args);
}

//Step 2
function wpshare247_add_new_metabox_callback1($post){
    //Hiển thị Form của Metabox
    
    $wpshare247_field_select_val = get_post_meta($post->ID, 'wpshare247_field_select', true );
    ?>
    
    <!-- Kiểu Select -->
    <div class="wpshare247-group-item">
    	<div><label for="wpshare247_field"><strong>Đây là mô tả Select</strong></label></div>
        <select name="wpshare247_field_select" id="wpshare247_field" class="postbox">
            <option value="">Công ty Dịch vụ TBAY có bao nhiêu Website nào?</option>
            <option <?php selected( $wpshare247_field_select_val, 'tbay.vn' ); ?> value="tbay.vn">tbay.vn</option>
            <option <?php selected( $wpshare247_field_select_val, 'website366.com' ); ?> value="website366.com">website366.com</option>
            <option <?php selected( $wpshare247_field_select_val, 'wpshare247.com' ); ?> value="wpshare247.com">wpshare247.com</option>
            <option <?php selected( $wpshare247_field_select_val, 'raotin247.com' ); ?> value="raotin247.com">raotin247.com</option>
        </select>
    </div>
    
    <!-- Kiểu Text -->
    <?php $wpshare247_field_text_val = get_post_meta($post->ID, 'wpshare247_field_text', true ); ?>
    <div class="wpshare247-group-item">
    	<div><label for="wpshare247_field"><strong>Công ty Dịch vụ TBAY có đào tạo Lập trình Web WordPress hay không?</strong></label></div>
        <input style="width:100%" name="wpshare247_field_text" type="text" value="<?php echo $wpshare247_field_text_val;?>" placeholder="Công ty Dịch vụ TBAY có đào tạo Lập trình Web WordPress" />
    </div>
    
    <!-- Bạn cũng có thể khai báo thêm các kiểu khác như: Textarea, checkbox, radio.... -->
    <?php
}

//Step 3
function wpshare247_save_postdata( $post_id ) {
    //Lưu trường số 1
    if ( array_key_exists( 'wpshare247_field_select', $_POST ) ) {
        update_post_meta(
            $post_id,
            'wpshare247_field_select',
            $_POST['wpshare247_field_select']
        );
    }
    
    //Lưu trường số 2
    if ( array_key_exists( 'wpshare247_field_text', $_POST ) ) {
        update_post_meta(
            $post_id,
            'wpshare247_field_text',
            $_POST['wpshare247_field_text']
        );
    }
}
add_action( 'save_post', 'wpshare247_save_postdata' );

Đến đây đã hoàn thành khai báo Metabox rối đấy. Copy đoạn code trên là vừa đủ dùng còn muốn nâng cao thì xem tiếp các phần tiếp theo.

3. Cách gọi dữ liệu từ các trường Metabox

Trong ví dụ trên tôi khai báo 2 trường có tên là wpshare247_field_select và wpshare247_field_text. Để gọi dữ liệu hiển thị chúng ta có thể gọi trực tiếp trong Template hoặc có thể gọi trong functions.php nếu cần thiết nếu chúng ta có $post_id

Gọi từ template: header.php, footer.php…

<?php
$wpshare247_field_select_val = get_post_meta( get_the_ID(), 'wpshare247_field_select', true );
echo '<br/>Giá trị của tôi là: ' . $wpshare247_field_select_val;

$wpshare247_field_text = get_post_meta( get_the_ID(), 'wpshare247_field_text', true );
echo '<br/>Giá trị của tôi là: ' . $wpshare247_field_text;

4. Cấu hình nâng cao

4.1 Vị trí xuất hiện của Metabox custom

Trước khi tùy chỉnh thông số này, mình xin giải thích tí tẹo về vị trí chỗ này.

Quay trở lại biến $context khai báo ở trên. Nếu bạn muốn vị trí Metabox nằm phên phải khu vực Side, bạn cần khai báo như sau: $context = 'side';

4.2 Thứ tự xuất hiện của Metabox

Để hiểu rõ hơn phần thứ tự bạn vui lòng xem qua hình minh họa nhé. Mỗi khu vực mục 4.1 đều có các thứ tự như sau: high -> default -> low

Lúc này bạn cần thay đổi giá trị $priority như sau:

//Sử dụng 1 trong 3 giá trị như sau:
$priority = 'low';
$priority = 'high';
$priority = 'default';

Như vậy tôi vừa giới thiệu chi tiết các bước tạo một MetaBox trong WordPress, có phải quá dễ hiểu không? Nếu chưa hiểu thị có thể liên hệ kiếm tôi nhé. Tôi trang trốn trong nhóm Zalo bên góc phải màn hình đấy.

Xin chào và hẹn gặp lại ở những bài tiếp theo !!!!