Hướng dẫn tạo Meta Box trong WordPress

Mặc định trong Post, Page hay Custom Post Type của WordPress sẽ không có nhiều tùy chỉnh. Thông thường các trường tùy chỉnh sẽ không được thêm vào. Bạn sẽ phải tự tay thêm các Custom Meta Box theo ý của mình. Nếu như bạn đang tìm hiểu về Meta Box là gì thì bài viết này sẽ nói rõ cho bạn.

Meta Box WordPress là gì?

Meta Box cho phép bạn thêm một phần dữ liệu tùy chỉnh vào bài đăng hoặc trang trong WordPress.

Giả sử bạn đang làm một website bán hàng không sử dụng Woocommerce chẳng hạn. Trong Post, Custom Post Type sẽ không có chỗ để điền giá cả vào. Vậy sẽ làm như thế nào?

Lúc này chắc chắn sẽ phải tạo ra một Metabox và trong đó sẽ chứa các Custom Field để thêm dữ liệu vào.

Cách tạo Meta Box trong WordPress

Để thực hiện bạn thêm một đoạn mã vào Functions.php

add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );

Ý nghĩa:

  • $id: Đây là thuộc tính id của một hộp
  • $title: Tiêu đề của hộp
  • $callback:
  • $page: Là nơi bạn muốn hộp meta được hiển thị. Đây phải là một chuỗi có ‘post’ hoặc ‘page’ hoặc ‘custom_post_type’.
  • $context: Là nơi bạn muốn hộp meta hiển thị. Thông thượng nó sẽ ở bên dưới trình chỉnh sửa bài đăng.
  • $priority: Đây là thứ tự ưu tiên hiển thị gồm ‘high’, ‘default’ hoặc ‘low’. Lần lượt đặt hộp gần đầu hơn, ở vị trí bình thường hoặc xuống phía dưới.
  • $callback_args: Cho phép bạn truyền dữ liệu vào hàm $callback của mình dưới dạng một mảng.

Lấy ví dụ:

Bước 1: Thêm đoạn mã này vào bên dưới tập tin functions.php

add_action( 'add_meta_boxes', 'meta_box_new' );
function meta_box_new()
{
add_meta_box( 'metabox-id', Đây là một Meta Box', 'metabox_cb', 'post', 'normal', 'high' );
}

Sau đó load lại bài viết và kéo xuống bên dưới sẽ thấy

metabox

Bước 2: Tuy nhiên nó vẫn chưa có gì cả. Lúc này cần tạo một hàm mới sử dụng $callback để gọi lại hàm đã tạo trước đó.

Ở ví dụ này $callback đó chính là metabox_cb

function metabox_cb() { 
echo 'Nội dung khu vực Metabox'; 
}

Load lại bài viết xem thế nào

metabox-1

Bước 3: Bây giờ thêm Custom Field cho Metabox

function metabox_cb()
{
?>
<label for="metabox_text">Nhập văn bản</label>
<input type="text" name="metabox_text" id="metabox_text" />
<?php
}

Thay toàn bộ mã đã thực hiện ở bước 2 bằng đoạn này.

Được một ô nhập văn bản rồi nhé!

metabox-2

Bước 4: Lưu dữ liệu

Để lưu lại thông tin đã đưa vào cần dùng tới save_post.

Và update_post_meta($post_id, $meta_key, $meta_value, $prev_value);

function custom_metabox_save( $post_id ) {
$textbox_content = $_POST['metabox_text'];

update_post_meta( $post_id, 'metabox_out', $textbox_content );
}

add_action( 'save_post', 'custom_metabox_save' );

Bước 5: Đưa dữ liệu ra ngoài theme

Sử dụng đoạn mã

<?php echo get_post_meta( $post->ID, 'metabox_out', true );?>

Để hiển thị dữ liệu bên ngoài Theme của bạn.

Kết luận: Bài viết hướng dẫn cách tạo Metabox ở trong Wordpres không quá khó và phức tạp như bạn nghĩ đúng không nào. Qua đây bạn sẽ sử dụng nó dễ dàng để phát triển Theme tốt hơn.

Hãy để lại bình luận:

Mình rất vui khi bạn đã để lại một bình luận. Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *