Metabox là gì? Cách tạo hoặc xoá metabox không cần thiết
Sơ đồ trang
Metabox trong WordPress là gì
Meta box trong WordPress là một thành phần giao diện trong trang quản trị, cho phép người dùng thêm thông tin hoặc chỉnh sửa dữ liệu liên quan đến bài viết, trang, hoặc bất kỳ loại nội dung nào. Meta box xuất hiện trong trang chỉnh sửa bài viết (post edit screen), giúp cung cấp thêm các trường thông tin bổ sung mà người dùng có thể điền hoặc chọn.
Ví dụ: Khi bạn viết một bài viết mới, ngoài tiêu đề và nội dung bài viết chính, bạn có thể thấy các meta box như Categories, “Thẻ” (Tags), “Ảnh đại diện” (Featured Image) hoặc các meta box khác được thêm bởi plugin như SEO meta box của Rank Math hoặc Yoast SEO. Đây là những meta box phổ biến có sẵn trong WordPress.
Cách hoạt động của Meta Box
- Hiển thị dữ liệu: Meta box hiển thị các trường để người dùng có thể nhập dữ liệu bổ sung cho bài viết, trang, hoặc các loại nội dung khác.
- Lưu trữ dữ liệu: Dữ liệu nhập vào meta box sẽ được lưu trữ trong cơ sở dữ liệu WordPress dưới dạng post meta, liên kết với bài viết cụ thể.
- Tuỳ chỉnh: Các lập trình viên có thể tạo meta box tùy chỉnh để phù hợp với nhu cầu riêng, ví dụ như thêm trường thông tin cho giá sản phẩm, đánh giá hoặc bất kỳ nội dung nào mà người dùng yêu cầu.
- Ví dụ thực tế: Nếu bạn muốn thêm một trường để nhập thông tin “Giá sản phẩm” cho mỗi bài viết trong WordPress, bạn có thể tạo một meta box tùy chỉnh để hiển thị trường nhập liệu này trên trang chỉnh sửa bài viết (post).
Meta box là một công cụ mạnh mẽ giúp quản trị viên website dễ dàng quản lý và bổ sung thông tin cho các bài viết hoặc trang.
Hình ảnh ví dụ về metabox
Cách để khai báo 1 metabox cơ bản
Để khai báo một meta box cơ bản trong WordPress, bạn có thể sử dụng hook add_meta_boxes và hàm add_meta_box() để thêm một meta box tùy chỉnh vào trang chỉnh sửa bài viết. Dưới đây là hướng dẫn cơ bản để tạo một meta box và lưu trữ dữ liệu từ nó.
Bước 1: Thêm meta box
Trước hết, bạn cần sử dụng hàm add_meta_box() để khai báo một meta box. Bạn có thể thêm đoạn mã này vào file functions.php của theme hoặc tạo plugin riêng.
// Hàm thêm meta box
function my_custom_meta_box() {
add_meta_box(
'my_meta_box_id', // ID của meta box
'Thông tin bổ sung', // Tiêu đề của meta box
'my_meta_box_callback', // Hàm callback để hiển thị nội dung meta box
'post', // Loại bài viết (post, page, hoặc custom post type)
'side', // Vị trí (normal, side, hoặc advanced)
'high' // Độ ưu tiên (high, low)
);
}
add_action('add_meta_boxes', 'my_custom_meta_box');
Bước 2: Tạo hàm callback để hiển thị nội dung meta box
Bài viết liên quan
Hàm callback này sẽ xác định các trường thông tin hiển thị trong meta box, ví dụ như một trường nhập liệu (input field).
// Hàm callback hiển thị nội dung meta box
function my_meta_box_callback($post) {
// Lấy giá trị đã lưu trữ, nếu có
$value = get_post_meta($post->ID, '_my_meta_key', true);
// Hiển thị trường nhập liệu
echo '<label for="my_meta_field">Nhập nội dung:</label>';
echo '<input type="text" id="my_meta_field" name="my_meta_field" value="' . esc_attr($value) . '" />';
}
Bước 3: Lưu dữ liệu từ meta box
Để lưu trữ dữ liệu từ meta box, bạn cần sử dụng hook save_post để lưu giá trị của trường nhập liệu vào cơ sở dữ liệu.
// Hàm lưu dữ liệu meta box
function my_save_meta_box_data($post_id) {
// Kiểm tra nếu người dùng có quyền chỉnh sửa bài viết
if (!current_user_can('edit_post', $post_id)) {
return;
}
// Kiểm tra nếu dữ liệu có tồn tại
if (isset($_POST['my_meta_field'])) {
// Xử lý dữ liệu nhập vào trước khi lưu
$my_data = sanitize_text_field($_POST['my_meta_field']);
// Lưu dữ liệu vào cơ sở dữ liệu
update_post_meta($post_id, '_my_meta_key', $my_data);
}
}
add_action('save_post', 'my_save_meta_box_data');
Code ở trên có ý nghĩa như sau:
add_meta_box() : Thêm một meta box vào trang chỉnh sửa bài viết.
- my_meta_box_id: ID duy nhất của meta box.
- Thông tin bổ sung: Tiêu đề hiển thị của meta box.
- my_meta_box_callback: Hàm callback dùng để hiển thị nội dung trong meta box.
- ‘post’: Chỉ định loại bài viết (post, page, hoặc custom post type) mà meta box sẽ xuất hiện.
- ‘side’: Vị trí hiển thị của meta box (bên cạnh, phía dưới, hoặc ở trên cùng).
- ‘high’: Độ ưu tiên để xác định vị trí hiển thị của meta box.
- my_meta_box_callback(): Hàm callback này hiển thị một trường nhập liệu text (input field) bên trong meta box.
save_post: Hook này được gọi mỗi khi một bài viết được lưu trữ. Hàm my_save_meta_box_data() lưu trữ dữ liệu từ meta box vào bảng wp_postmeta trong cơ sở dữ liệu.
Khi bạn truy cập vào trang chỉnh sửa bài viết, bạn sẽ thấy một meta box mới với tiêu đề “Thông tin bổ sung” và một trường để nhập thông tin. Dữ liệu được nhập vào sẽ được lưu trữ và có thể được lấy ra bằng cách sử dụng get_post_meta() nơi mà bạn cần hiển thị.
Trong ví dụ này, giả dụ bạn muốn lấy thông tin mà bạn đã nhập vào metabox thì bạn có thể sử dụng code với khoá đã khai báo như sau:
Ví dụ ở trên có khóa _my_meta_key, bạn có thể sử dụng hàm get_post_meta() để lấy giá trị của meta box và hiển thị nó trong bài viết như sau: (Ví dụ cho code cho vào file single.php)
<?php
// Lấy giá trị meta box từ bài viết hiện tại
$meta_value = get_post_meta(get_the_ID(), '_my_meta_key', true);
// Kiểm tra nếu giá trị tồn tại, sau đó hiển thị
if (!empty($meta_value)) {
echo '<p><strong>Thông tin bổ sung:</strong> ' . esc_html($meta_value) . '</p>';
}
?>
Khi người dùng truy cập một bài viết trên trang front-end, nếu bài viết đó có thông tin được nhập vào meta box, thông tin này sẽ được hiển thị ở vị trí mà bạn đã chỉ định trong template.
Meta box có những trường dữ liệu nào?
Ở ví dụ trên là trường cơ bản nhất đó là text, ngoài ra còn nhiều trường dữ liệu khác mà bạn có thể sử dụng như: textarea hoặc phức tạp hơn như select, checkbox hoặc custom fields như file upload hoặc color picker.
1. Text Field (Trường nhập văn bản)
Là kiểu dữ liệu cơ bản nhất, người dùng có thể nhập một chuỗi văn bản ngắn.
echo '<label for="my_meta_field">Nhập nội dung:</label>'; echo '<input type="text" id="my_meta_field" name="my_meta_field" value="' . esc_attr($value) . '" />';
2. Textarea (Ô nhập văn bản dài)
Sử dụng khi bạn cần người dùng nhập một đoạn văn bản dài hơn, thường dùng cho mô tả hoặc ghi chú.
echo '<label for="my_meta_textarea">Nhập mô tả:</label>'; echo '<textarea id="my_meta_textarea" name="my_meta_textarea">' . esc_textarea($value) . '</textarea>';
3. Checkbox
Cho phép người dùng chọn hoặc bỏ chọn một tùy chọn. Dữ liệu lưu trữ thường là giá trị 1 hoặc 0.
$checked = ( $value == '1' ) ? 'checked' : ''; echo '<label for="my_meta_checkbox">Chọn tùy chọn:</label>'; echo '<input type="checkbox" id="my_meta_checkbox" name="my_meta_checkbox" value="1" ' . $checked . '/>';
4. Radio Button (Nút chọn)
Người dùng chọn một tùy chọn duy nhất từ một nhóm các lựa chọn.
echo '<label>Chọn tùy chọn:</label><br>'; echo '<input type="radio" name="my_meta_radio" value="option1" ' . checked( $value, 'option1', false ) . '> Lựa chọn 1<br>'; echo '<input type="radio" name="my_meta_radio" value="option2" ' . checked( $value, 'option2', false ) . '> Lựa chọn 2<br>';
5. Select (Danh sách thả xuống)
Cho phép người dùng chọn một giá trị từ danh sách các tùy chọn.
echo '<label for="my_meta_select">Chọn tùy chọn:</label>';
echo '<select id="my_meta_select" name="my_meta_select">';
echo '<option value="option1" ' . selected( $value, 'option1', false ) . '>Lựa chọn 1</option>';
echo '<option value="option2" ' . selected( $value, 'option2', false ) . '>Lựa chọn 2</option>';
echo '</select>';
6. File Upload (Tải tệp lên)
Cho phép người dùng tải lên một tệp (ví dụ: hình ảnh, PDF).
echo '<label for="my_meta_file">Tải tệp lên:</label>'; echo '<input type="file" id="my_meta_file" name="my_meta_file" />';
7. Date Picker (Chọn ngày)
Sử dụng input type date hoặc thêm thư viện jQuery UI để tạo giao diện chọn ngày.
echo '<label for="my_meta_date">Chọn ngày:</label>'; echo '<input type="date" id="my_meta_date" name="my_meta_date" value="' . esc_attr($value) . '" />';
8. Color Picker (Chọn màu)
Dùng cho việc chọn màu sắc, có thể sử dụng input type color hoặc thư viện như WordPress color picker.
echo '<label for="my_meta_color">Chọn màu:</label>'; echo '<input type="color" id="my_meta_color" name="my_meta_color" value="' . esc_attr($value) . '" />';
9. Number (Trường nhập số)
Sử dụng khi bạn muốn người dùng chỉ được phép nhập dữ liệu dạng số.
echo '<label for="my_meta_number">Nhập số lượng:</label>'; echo '<input type="number" id="my_meta_number" name="my_meta_number" value="' . esc_attr($value) . '" min="1" max="100" />';
10. Hidden Field (Trường ẩn)
Sử dụng để lưu dữ liệu không cần hiển thị cho người dùng, nhưng vẫn có thể được lưu vào cơ sở dữ liệu.
echo '<input type="hidden" id="my_meta_hidden" name="my_meta_hidden" value="some_value" />';
Tùy chỉnh các trường khác
Bạn có thể tùy chỉnh hoặc kết hợp nhiều loại trường khác nhau, tùy thuộc vào yêu cầu cụ thể của bạn. Nếu muốn tạo giao diện phức tạp hơn, có thể tích hợp thêm các thư viện JavaScript như jQuery UI, TinyMCE (editor) hoặc sử dụng plugin ACF (Advanced Custom Fields) để quản lý dữ liệu meta một cách linh hoạt và trực quan hơn.
Ví dụ: Meta box với nhiều loại trường
function my_custom_meta_box_callback($post) {
// Lấy giá trị đã lưu
$text_value = get_post_meta($post->ID, '_my_text_meta_key', true);
$textarea_value = get_post_meta($post->ID, '_my_textarea_meta_key', true);
$checkbox_value = get_post_meta($post->ID, '_my_checkbox_meta_key', true);
// Hiển thị các trường
echo '<label for="my_meta_text">Nhập văn bản:</label>';
echo '<input type="text" id="my_meta_text" name="my_meta_text" value="' . esc_attr($text_value) . '" /><br><br>';
echo '<label for="my_meta_textarea">Nhập mô tả:</label>';
echo '<textarea id="my_meta_textarea" name="my_meta_textarea">' . esc_textarea($textarea_value) . '</textarea><br><br>';
$checked = ( $checkbox_value == '1' ) ? 'checked' : '';
echo '<label for="my_meta_checkbox">Chọn tùy chọn:</label>';
echo '<input type="checkbox" id="my_meta_checkbox" name="my_meta_checkbox" value="1" ' . $checked . '/>';
}
Lưu ý:
Luôn sử dụng các hàm như esc_attr(), esc_textarea(), sanitize_text_field(), v.v. để đảm bảo dữ liệu được an toàn trước khi hiển thị và lưu trữ.
Tùy thuộc vào yêu cầu cụ thể của bạn, bạn có thể sử dụng các loại input khác nhau để phù hợp với dữ liệu bạn muốn người dùng nhập.
Các kiểu dữ liệu này rất linh hoạt và có thể tùy chỉnh theo nhu cầu của bạn khi phát triển website WordPress.
Cách xoá các metabox không cần thiết trong WordPress
Qua nội dung trên chắc hẳn bạn thấy được sức mạnh của metabox như thế nào rồi chứ, tuy nhiên nhiều khi dev lạm dụng việc tạo metabox hoặc có quá nhiều metabox chiếm không gian hiển thị nên dưới đây là cách để ẩn đi 1 số metabox
Xoá metabox trong phần Tuỳ chỉnh màn hình (Screen Options)
Lúc chỉnh sửa bài viết hoặc xem danh mục … bạn sẽ thấy góc phải màn hình có chữ Tuỳ chỉnh màn hình (Screen Options), bạn hãy click vào đấy và bỏ chọn những metabox mà bạn cho là không cần thiết hoặc tạm ẩn để chúng không làm chắn tầm nhìn.
Xoá các metabox không có tuỳ chọn ẩn
Ví dụ bạn có thể xoá các metabox mặc định trong WordPress sẽ như sau, lưu ý là bạn nên tắt những mục nào bạn cho là không cần thiết nếu không nó không hiển thị metabox để bạn lựa chọn nhé.
function remove_my_metaboxes() {
remove_meta_box( 'categorydiv','post','normal' ); // Categories Metabox
remove_meta_box( 'submitdiv','post','normal' ); // Categories Metabox
remove_meta_box( 'postcustom','page','normal' ); // Custom Fields Metabox
remove_meta_box( 'postcustom','post','normal' ); // Custom Fields Metabox
remove_meta_box( 'commentstatusdiv','page','normal' ); // Comments Metabox
remove_meta_box( 'commentsdiv','post','normal' ); // Comments Metabox
remove_meta_box( 'trackbacksdiv','page','normal' ); // Talkback Metabox
remove_meta_box( 'authordiv','page','normal' ); // Author Metabox
remove_meta_box( 'authordiv','post','normal' ); // Author Metabox
remove_meta_box( 'postexcerpt','post','normal' ); // Excerpt Metabox
remove_meta_box( 'postexcerpt','page','normal' ); // Excerpt Metabox
remove_meta_box( 'revisionsdiv','post','normal' ); // Revisions Metabox
remove_meta_box( 'slugdiv','page','normal' ); // Slug Metabox
remove_meta_box( 'slugdiv','post','normal' ); // Slug Metabox
remove_meta_box( 'formatdiv','post','normal' ); // Formats Metabox
remove_meta_box( 'postimagediv','post','normal' ); // Featured Image Metabox
remove_meta_box( 'tagsdiv-post_tag','post','normal' ); // Tags Metabox
remove_meta_box( 'commentstatusdiv','post','normal' ); // Comments Status Metabox
}
add_action('admin_menu','remove_my_metaboxes');
Xoá metabox bằng code
Ngoài metabox mặc định như trên thì sẽ có nhiều metabox khác do plugin tạo ra, nếu bạn muốn xoá thì có thể sử dụng code dưới đây để xoá nhé.
Bạn cần xác định được metabox id để xoá
Ví dụ mình sẽ xác định được cái ID của metabox là: wpcode-metabox-snippets (metabox của plugin WPCode Lite thêm vào cuối mỗi bài viết, vì sử dụng phiên bản thường nên chúng không có ý nghĩa gì nên mình sẽ xoá nó đi cho đỡ chướng mắt)
/* Remove metabox not need
*===============================================================*/
function vutruso_remove_meta_box(){
$post_types = get_post_types();
foreach ($post_types as $post_type) {
remove_meta_box( 'wpcode-metabox-snippets', $post_type, 'normal' );
}
}
add_action('add_meta_boxes', 'vutruso_remove_meta_box', 11);
Trên đoạn code này có 2 mục bạn cần lưu ý là: normal hoặc side nhé.
- side là metabox hiện ở cột phải lúc bạn soạn thảo bài viết
- normal là vị trí metabox hiện cuối mỗi bài viết
Cách xác định ID vô cùng đơn giản như trên thôi, nếu bạn thấy metabox nào ngứa mắt bạn có thể add thêm vào code bên trên nhé, cụ thể thay THAY_ID_METABOX_VAO_DAY bằng ID của metabox là được.
remove_meta_box( 'THAY_ID_METABOX_VAO_DAY', $post_type, 'normal' );
1 đống ID của metabox mình thường xoá đó là:
- aiosp_tabbed , normal – All In One SEO Pack metabox
- slugdiv , normal – WP slug metabox
- trackbacksdiv , normal – WP post trackback metabox
- commentsdiv , normal – WP comment metabox
- wpseo_meta , normal – Yoast SEO metabox
- wc-jetpack-purchase_data , normal – Booster for WC
- rocket_post_exclude , side – WP Rocket metabox
- mymetabox_revslider_0 , normal – Revolutions Slider Option metabox
- woocommerce-product-images , side – WooCommerce default Product Gallery metabox
- tagsdiv-product_tag , side – WC default product tag metabox
Tổng kết
Bài trên hy vọng sẽ cho bạn cái nhìn tổng quát nhất về Metabox trong WordPress, giờ bạn có thể thêm metabox vào WP 1 cách dễ dàng hoặc cũng có thể xoá chúng đi nếu cảm thấy không cần thiết.
Cảm ơn bạn đã đọc tới đoạn cuối này 😀
Bài viết liên quan
