Có vẻ như một trong những chức năng phức tạp hơn cả trong WordPress là thêm metabox vào trang chỉnh sửa bài viết.

Tạo metabox tùy chỉnh cực kỳ đơn giản. Trong hướng dẫn này, mình sẽ hướng dẫn bạn chi tiết về tất cả mọi thứ bạn cần biết metabox:

Tạo hộp meta.
Sử dụng metabox với bất kỳ custom post type.
Sử lý dữ liệu
Lưu dữ liệu meta.
Lấy dữ liệu meta .

Lưu ý: thuật ngữ “post” xuyên suốt hướng dẫn này, mình đề cập đến một bài đăng của mọi post type, không chỉ là loại bài đăng blog mặc định trong WordPress.

Post Meta Box là gì

Một meta box là một hộp có thể kéo & thả được hiển thị trên trang chỉnh sửa bài đăng. Mục đích của nó là cho phép người dùng lựa chọn hoặc nhập thông tin thêm vào nội dung bài đăng (post) chính. Những thông tin này sẽ liên quan đến post một cách nào đó.

Nói chung, 2 loại dữ liệu được nhập vào meta box:

Metadata (ví dụ: các trường tùy chỉnh),
Taxonomy terms.

Tất nhiên, có thể có những công dụng khác, nhưng hai loại này là phổ biến nhất. Mục đích của hướng dẫn này, bạn sẽ học được cách phát triển meta box cho loại bài đăng tùy chỉnh (custom post type) để lưu dữ liệu meta.

Post Metadata là gì

Metadata (siêu dữ liệu) là dữ liệu được lưu trong bảng wp_postmeta trong cơ sở dữ liệu. Mỗi mục được lưu bao gồm 4 trường trong bảng này:

meta_id : Một ID duy nhất
post_id : post ID mà metadata này được gắn vào
meta_key : tên dữ liệu (bạn sẽ làm việc thường xuyên)
meta_value : Giá trị của dữ liệu

Trong hình bên dưới, bạn có thể xem qua cách dữ liệu meta được lưu trong cơ sở dữ liệu.

Bản chất metadata là các cặp giá trị (key/value) được lưu như các cài đặt bổ xung cho một post. Điều này cho phép bạn thêm tất cả các loại dữ liệu tùy chỉnh đến bài viết của bạn. Nó đặc biệt hữu ích khi bạn đang tạo custom post type.

Lưu ý: cùng một tên meta nhưng có thể có nhiều giá trị. Đây không phải là sử dụng chung.

Làm việc với Post Metadata

Có lẽ bây giờ bạn đang nóng lòng muốn xây dựng một số metabox tùy chỉnh. Tuy nhiên, để biết metabox hữu ích như thế nào, bạn phải hiểu làm thế nào để thêm, cập nhật, xóa, và lấy dữ liệu post metadata.

Trong bài viết này mình sẽ sử dụng các hàm sau đây để làm việc với dữ liệu meta trong WordPress.

add_post_meta(): Thêm post metadata
update_post_meta() : Cập nhật post metadata
delete_post_meta(): Xóa post metadata
get_post_meta(): Lấy post metadata

Cài đặt

Trước khi tạo metabox, bạn phải có một số ý tưởng về loại metadata bạn muốn sử dụng. Hướng dẫn này sẽ tập trung vào việc xây dựng một hộp meta để lưu post CSS class, và chúng có thể được sử dụng để tạo thêm style cho post.

Trong bài học này bạn sẽ học cách:

Thêm trường input để cho bạn nhập css class tùy chỉnh.
Lưu css class vào meta key có tên hoangweb_post_class .
Dùng Bộ lọc post_class để thêm class (css) cho post của bạn.

Ngoài ra, Bạn có thể làm nhiều thứ phức tạp hơn nữa với meta box, nhưng bạn cần phải học những điều cơ bản trước tiên.

Tất cả các đoạn mã PHP ở phần dưới đây bạn có thể viết vào một trong nơi: file plugin tùy chỉnh hoặc tệp functions.php của giao diện WordPress đang kích hoạt.

Xây dựng Post Meta Box tùy chỉnh

2 đoạn mã đầu tiên này là thiết lập mọi thứ cho tính năng cơ bản của hộp metabox.

Vì bạn chỉ muốn post meta box xuất hiện trên màn hình chỉnh sửa của bài đăng trong admin, chúng ta sẽ sử dụng hook load-post.php và load-post-new.php để khởi tạo hộp meta của bạn.

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'hoangweb_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'hoangweb_post_meta_boxes_setup' );

Hầu hết các nhà lập trình WordPress khá quen thuộc với cách dùng hook trong khi làm việc, vì vậy đây không phải là điều gì mới mẻ với bạn. Đoạn mã trên bạn sẽ gán cho hàm hoangweb_post_meta_boxes_setup. Bước tiếp theo là tạo ra hàm này.

Đoạn mã sau sẽ bổ sung thêm hàm tạo hộp meta với hook add_meta_boxes.

/* Meta box setup function. */
function hoangweb_post_meta_boxes_setup() {
  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'hoangweb_add_post_meta_boxes' );
}

Trong đoạn mã trên, bạn bổ sung thêm hàm hoangweb_add_post_meta_boxes() cho hook add_meta_boxes. Mục đích của nó là thêm hộp meta cho post.

Trong ví dụ tiếp theo, bạn sẽ tạo ra một meta box đơn giản bằng cách sử dụng hàm add_meta_box() bởi WordPress. Tuy nhiên, bạn có thể thêm bao nhiêu hộp meta tùy ý.

Trước khi tiếp tục, chúng ta hãy xem cú pháp hàm add_meta_box():

add_meta_box( $id, $title, $callback, $page, $context = 'advanced', $priority = 'default', $callback_args = null );

$id : ID (duy nhất) được gán cho hộp meta của bạn. Sử dụng một tiền tố độc đáo và mã HTML hợp lệ.
$title : Tiêu đề của hộp meta.
$callback : hàm callback sẽ hiển thị đầu ra của hộp metabox
$screen : ID Màn hình cho phép hiển thị box (vd với post type, link hoặc comment ). Chấp nhận giá trị là screen ID , đối tượng WP_Screen , hoặc mảng của nhiều screen ID. Mặc định là trang hiện tại.
$context : metabox xuất hiện ở đâu
Các tùy chọn sẵn có gồm normal , advanced và side
$priority : hiển thị hộp meta ở vị trí ưu tiên nào. Chọn: default , core , high và low .
$callback_args : mảng các đối số tùy chỉnh, bạn có thể truyền tham số vào hàm $callback cho tham số thứ hai

Đoạn mã sau đây sẽ thêm field ‘post class’ vào hộp meta trên trang chỉnh sửa bài đăng.

/* Create one or more meta boxes to be displayed on the post editor screen. */
function hoangweb_add_post_meta_boxes() {
  add_meta_box(
    'hoangweb-post-class',      // Unique ID
    esc_html__( 'Post Class', 'example' ),    // Title
    'hoangweb_post_class_meta_box',   // Callback function
    'post',         // Admin page (or post type)
    'side',         // Context
    'default'         // Priority
  );
}

Cuối cùng, Bạn cần hiển thị nội dung HTML cho metabox. Sử dụng hàm hoangweb_post_class_meta_box() trong tham số $callback ở trên.

<?php
/* Display the post meta box. */
function hoangweb_post_class_meta_box( $post ) { ?>

  <?php wp_nonce_field( basename( __FILE__ ), 'hoangweb_post_class_nonce' ); ?>

  <p>
    <label for="hoangweb-post-class"><?php _e( "Add a custom CSS class, which will be applied to WordPress' post class.", 'example' ); ?></label>
    
    <input class="widefat" type="text" name="hoangweb-post-class" id="hoangweb-post-class" value="<?php echo esc_attr( get_post_meta( $post->ID, 'hoangweb_post_class', true ) ); ?>" size="30" />
  </p>
<?php } ?>

Hàm trên có nhiệm vụ hiển thị kết quả HTML cho hộp meta của bạn. Nó thêm một trường input cho bạn nhập class tùy chỉnh, như hình bên dưới:

Như vậy chúng ta đã tạo form cho metabox. Trong phần tiếp theo bạn sẽ học cách lưu & sử dụng giá trị metadata.

Lưu dữ liệu trường tùy chỉnh trên MetaBox

Nhớ rằng hàm hoangweb_post_meta_boxes_setup() mà bạn đã tạo trước đó
Bây giờ cần phải sửa đổi một chút. Thêm đoạn mã sau vào nó.

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'hoangweb_save_post_class_meta', 10, 2 );

Code của hàm này sẽ là:

/* Meta box setup function. */
function hoangweb_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'hoangweb_add_post_meta_boxes' );

  /* Save post meta on the 'save_post' hook. */
  add_action( 'save_post', 'hoangweb_save_post_class_meta', 10, 2 );
}

Đoạn code mới được gán thêm một hàm sử lý vào hook save_post. Hàm này sẽ thực hiện công việc lưu, cập nhật hoặc xóa dữ liệu meta tùy chỉnh của bạn.

Khi lưu giá trị post meta, hàm sẽ phải thực hiện qua một số bước:

Xác nhận chuỗi nonce.
Kiểm tra xem người dùng hiện tại có quyền chỉnh sửa bài viết
Bắt các giá trị trên input từ biến $_POST .
Hướng sử lý dữ liệu meta như: thêm, cập nhật, hoặc xóa dựa trên giá trị mới và cũ.

Đây là đoạn mã sau cùng mà bạn sẽ dùng để lưu/sửa/xóa dữ liệu meta (post class).

/* Save the meta box’s post metadata. */
function hoangweb_save_post_class_meta( $post_id, $post ) {

  /* Verify the nonce before proceeding. */
  if ( !isset( $_POST['hoangweb_post_class_nonce'] ) || !wp_verify_nonce( $_POST['hoangweb_post_class_nonce'], basename( __FILE__ ) ) )
    return $post_id;

  /* Get the post type object. */
  $post_type = get_post_type_object( $post->post_type );

  /* Check if the current user has permission to edit the post. */
  if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

  /* Get the posted data and sanitize it for use as an HTML class. */
  $new_meta_value = ( isset( $_POST['hoangweb-post-class'] ) ? sanitize_html_class( $_POST['hoangweb-post-class'] ) : ’ );

  /* Get the meta key. */
  $meta_key = 'hoangweb_post_class';

  /* Get the meta value of the custom field key. */
  $meta_value = get_post_meta( $post_id, $meta_key, true );

  /* If a new meta value was added and there was no previous value, add it. */
  if ( $new_meta_value && ’ == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

  /* If the new meta value does not match the old value, update it. */
  elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

  /* If there is no new meta value but an old value exists, delete it. */
  elseif ( ’ == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

Lấy và sử dụng dữ liệu Metadata

Vì bạn đang xây dựng một metabox cho phép người dùng nhập vào một post class tùy chỉnh, bạn sẽ cần đến bộ lọc WordPress post_class để thêm class tùy chỉnh của bạn xuất hiện bên cạnh các post classes khác.

Chèn đoạn mã sau vào tệp functions.php

/* Filter the post class hook with our custom post class function. */
add_filter( 'post_class', 'hoangweb_post_class' );

function hoangweb_post_class( $classes ) {

  /* Get the current post ID. */
  $post_id = get_the_ID();

  /* If we have a post ID, proceed. */
  if ( !empty( $post_id ) ) {

    /* Get the custom post class. */
    $post_class = get_post_meta( $post_id, 'hoangweb_post_class', true );

    /* If a post class was input, sanitize it and add it to the post class array. */
    if ( !empty( $post_class ) )
      $classes[] = sanitize_html_class( $post_class );
  }

  return $classes;
}

Kết quả khi view-source trang bạn sẽ thấy một cái gì đó giống như hình bên dưới.

Rất đơn giản phải không Bạn có thể sử dụng class tùy chỉnh này để tạo phong cách riêng cho bài viết, tuy nhiên bạn cũng muốn thêm stylesheet/CSS trong giao diện wordpress của bạn.

Xem thêm: tạo class odd/even cho danh sách bài viết.

Mình hy vọng bạn thích bài hướng dẫn này. Nếu có bất kỳ câu hỏi nào về việc tạo hộp metabox hãy để lại ý kiến của bạn phần bình luận ở bên dưới.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Tạo Meta Box cho bài viết trong WordPress

Post Meta Box là gì

Post Metadata là gì

Làm việc với Post Metadata

Cài đặt

Xây dựng Post Meta Box tùy chỉnh

Lưu dữ liệu trường tùy chỉnh trên MetaBox

Lấy và sử dụng dữ liệu Metadata

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT

Post Meta Box là gì

Post Metadata là gì

Làm việc với Post Metadata

Cài đặt

Xây dựng Post Meta Box tùy chỉnh

Lưu dữ liệu trường tùy chỉnh trên MetaBox

Lấy và sử dụng dữ liệu Metadata

HOÀNG WEB

KẾT NỐI VỚI TÔI

SẢN PHẨM

LIÊN KẾT