Cách sử dụng meta boxes trong WordPress

Chào mọi người, công việc tùy chỉnh meta boxes là vấn đề quan trọng trong thiết kế WordPress Theme và phát triển Plugin WordPress, đó là một cách cho phép người soạn thảo bài viết cảm thấy tiện lợi hơn nhiều, cũng như bạn có thể thêm các thành phần khác vào trong post wordpress một cách thoải mái nhất.

Nói về meta boxes làm tôi liên tưởng đến phần Custom Fields WordPress mà mình đã đề cập ở các bài trước, nó cho phép bạn thêm vào trong bài viết một số thành phần dữ liệu khác, tuy nhiên trong meta box bạn sẽ có được một trình biên tập chuyên nghiệp với khách hàng ở sự trực quan của nó.

Bây giờ chắc đã hình dung ra vần đề rồi phải không nào, để làm việc với meta box chúng ta chia ra làm các phần:

  • Thêm vào các thuộc tính của meta box.
  • Hiển thị ra bên trong phần soạn thảo.
  • Lưu các CSDL các thông tin lấy được từ meta box.
  • Mang ra sử dụng.
1. Thêm vào WordPress meta box
Meta box

Meta box

Tương tự như các thành phần mình tùy chỉnh trước đến giờ, chúng ta đều tương tác vào file functions.php của theme, đầu tiên là hàm add_meta_box bạn tham khảo tại: http://codex.wordpress.org/Function_Reference/add_meta_box.

       add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
  • $id: Đây là mã chạy tự động, có lợi cho bạn khi định dạng CSS hay sử dụng Js…
  • $title: Tiêu đề sẽ hiển thị trên hộp Meta Pox
  • $callback: Đây là phần chính lát nữa sẽ nói đến trong phần xây đựng meta box
  • $context: Nơi phần chỉnh sửa sẽ được hiển thị có 3 dạng (‘normal’, ‘advanced’, or ‘side’)
  • $priority: Ưu tiên các meta box mà bạn muốn hiển thị bao gồm các dạng (‘high’, ‘core’, ‘default’ or ‘low’)
  • $callback_args: Đây là mảng lưu các thành phần sẽ gọi lại trong meta box tuy nhiên ở mức độ này mình không sử dụng, để mặc định.
Khai báo mảng chứa tất cả các thành phần trong meta box

Bây giờ mình sẽ làm tính năng thêm vào hình, thuộc tính tên sản phẩm, và xuất xứ. Như đã nói ở trên meta boxes trong WordPress có các thành phần như sau: id, title, page, context, priority. Bao gồm các thuộc tính sau: name ( tên hiển thị ), desc ( chi chú ), id ( mã truy xuất ), type ( kiểu control HTML ), std ( giá trị mặc định ).

<!--
$prefix = '';

$meta_box = array(
    'id' => 'my-meta-box',
    'title' => 'Meta Box Demo for BCDONLINE.NET',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
        array(
            'name' => 'Tên sản phẩm',
            'desc' => '',
            'id' => $prefix . 'ten_sanpham',
            'type' => 'text',
            'std' => ''
        ),
        array(
            'name' => 'Hình demo',
            'desc' => '',
            'id' => $prefix . 'hinh_demo',
            'type' => 'text',
            'std' => ''
        ),
        array(
            'name' => 'Xuất xứ',
            'desc' => '',
            'id' => $prefix . 'xuat_xu',
            'type' => 'text',
            'std' => ''
        )
    ));
-->

Đến đây chúng ta có thể add meta boxes và set hành động nó vào trong wordpress admin hàm add_meta_box dự vào mảng giá trị mà ta khai báo ở trên.

<!--
// Add meta box
function bcdonline_add_box() {
    global $meta_box;
    add_meta_box($meta_box['id'], $meta_box['title'], 'bcdonline_show_box', 'post', $meta_box['context'], $meta_box['priority']);
}
add_action('admin_menu', 'bcdonline_add_box');
-->

Lúc này bạn save lại tất cả và vào trong admin của WP tạo new post bạn sẽ thấy trong phần soạn thảo chúng ta có một mục Meta box với tiêu đề mà vừa khai báo lúc đầu.

Add meta boxes trong wordpress

Add meta boxes trong wordpress

2. Thêm vào meta box các control html như textbox, label, select …

Bây giờ mình sẽ thêm phần giao diện cho người dùng nhập vào chẳng hạn là text input, lúc này bạn tương tác với hàm bcdonline_show_box hàm này được đề cập trong phần add meta box phía trên.

<!-- 
// Function Callback

function bcdonline_show_box() {
    global $meta_box, $post;
    
    // Use nonce for verification
    echo '<input type="hidden" name="mytheme_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
    
    echo '<table class="form-table">';

    foreach ($meta_box['fields'] as $field) {
        // get current post meta data
        $meta = get_post_meta($post->ID, $field['id'], true);
        
        echo '<tr>',
                '<th style="width:15%"><label for="', $field['id'], '">', $field['name'], '</label></th>',
                '<td>';
        switch ($field['type']) {
            case 'text':
                echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', htmlspecialchars($meta) ? htmlspecialchars($meta) : htmlspecialchars($field['std']), '" size="30" style="width:97%" />', '<br />', $field['desc'];
                break;
            case 'textarea':
                echo '<textarea name="', $field['id'], '" id="', $field['id'], '" cols="60" rows="4" style="width:97%">', $meta ? $meta : $field['std'], '</textarea>', '<br />', $field['desc'];
                break;
            case 'select':
                echo '<select name="', $field['id'], '" id="', $field['id'], '">';
                foreach ($field['options'] as $option) {
                    echo '<option', $meta == $option ? ' selected="selected"' : '', '>', $option, '</option>';
                }
                echo '</select>';
                break;
            case 'radio':
                foreach ($field['options'] as $option) {
                    echo '<input type="radio" name="', $field['id'], '" value="', $option['value'], '"', $meta == $option['value'] ? ' checked="checked"' : '', ' />', $option['name'];
                }
                break;
            case 'checkbox':
                echo '<input type="checkbox" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
                break;
        }
        echo     '<td>',
            '</tr>';
    }
    
    echo '</table>';
}
-->

Ta có cấu trúc switch … case trong php bạn có thể xem lại ở mục php cơ bản nếu là text thì echo textbox, textarea thì echo textarea … và các thành phần lặp đúng như các phần tử trong mảng đã khai báo như trên!

Show box control trong meta box

Show box control trong meta box

Nhập liệu và save vào CSDL của wordpress

Sau khi đã hiện ra được các thành phần mình muốn thì bây giờ bắt đầu nhập liệu, khi bạn post thì dữ liệu sẽ lưu vào trong CSDL của wordpress dự vào postid và các thuộc tính của meta box. Khi xử lý bạn cần xét nhiều điều kiện như auto save, post type, update post meta và delete post meta.

<!--
// Save data from meta box
function bcdonline_save_data($post_id) {
    global $meta_box;
    
    // verify nonce
    if (!wp_verify_nonce($_POST['mytheme_meta_box_nonce'], basename(__FILE__))) {
        return $post_id;
    }

    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
    }

    // check permissions
    if ('page' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
            return $post_id;
        }
    } elseif (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }
    
    foreach ($meta_box['fields'] as $field) {
        $old = get_post_meta($post_id, $field['id'], true);
        $new = $_POST[$field['id']];
        
        if ($new && $new != $old) {
            update_post_meta($post_id, $field['id'], $new);
        } elseif ('' == $new && $old) {
            delete_post_meta($post_id, $field['id'], $old);
        }
    }
}
add_action('save_post', 'bcdonline_save_data');
-->
Hiển thị các thuộc tính của meta boxes trong WordPress

Đến đây khi các bạn đã tạo ra được meta box rồi và lưu vào CSDL rồi bây giờ chỉ việc gọi ra để sử dụng, các trang cần gọi như: index, single, category, search … tùy và chủ ý của bạn! Mình nhập dữ liệu mẫu như hình dưới đây:

Nhập liệu Meta Box trong wordpress

Nhập liệu Meta Box trong wordpress

Giả sử mình vào trang single.php trong vòng lặp wordpress bố trí bố cục như sau:

<!--
<?php if(have_posts()) : while(have_posts()) : the_post() ?>
<div class="post">
	<?php 
		$hinh =  get_post_meta($post->ID, "hinh_demo", true);
		$tensp =  get_post_meta($post->ID, "ten_sanpham", true);
		$xuatxu =  get_post_meta($post->ID, "xuat_xu", true);
	?>
	<h3><?php echo $tensp;?></h3>
	<div class="entry-thumb">
		<img src="<?php echo $hinh; ?>" alt="<?php the_title(); ?>" />
	</div>
	<p>Xuất Xứ: <strong><?php echo $xuatxu;?></strong></p>
	<?php //Content ?>
</div><!--End .post-item-->
-->

Khi vào trang chi tiết bài viết của wordress (single) bạn sẽ thấy được kết quả như thế này.

Demo hiển thị thuộc tính meta box wordpress

Demo hiển thị thuộc tính meta box wordpress

Kết luận: Vậy là mình đã hoàn thành tính năng meta boxes trong WordPress, ở ngoài trang chủ bạn hiển thị thumbnail vẫn code như thế, meta boxes trong WordPress rất tiện lợi cho người dùng, cho thấy sự chuyên nghiệp trong việc thiết kế theme wordpress của bạn. Còn rất nhiều điều để nói trong phần này các bạn ngâm cứu thêm nha! Chúc mọi người thành công!

FILE DEMO META BOX WORDPRESS

VN:F [1.9.22_1171]
Rating: 10.0/10 (8 votes cast)
Cách sử dụng meta boxes trong WordPress, 10.0 out of 10 based on 8 ratings
Share This