Ngày nay, nhiều người trong chúng ta nghĩ về các Meta Box trong WordPress giống như một thứ gì đó đã lỗi thời. Chà, bạn biết đấy, Gutenberg , Chỉnh sửa toàn bộ trang web và tất cả những thứ đó. Nhưng tôi có thể nói, rằng nó chưa phải là sự thật.
Cho dù Gutenberg trở nên vĩ đại đến đâu, cho dù có bao nhiêu plugin thú vị xuất hiện cho phép bạn quản lý các trường tùy chỉnh, thì việc biết cách tạo metabox từ đầu luôn hữu ích. Ít nhất hãy nhìn vào WooCommerce, loại bài đăng Sản phẩm hoạt động mà không cần Gutenberg ngay bây giờ. Và có thể đối với dự án cụ thể của bạn, bạn sẽ cần một loại bài đăng mà không cần chỉnh sửa trực quan. Đó là nơi mà các hộp meta phát huy tác dụng.
Meta Boxes chính xác là gì?
Hộp meta là các khối giao diện người dùng trong quản trị viên WordPress cho phép bạn quản lý siêu dữ liệu bài đăng.
Được rồi, siêu dữ liệu là gì?
Mọi loại nội dung trong WordPress như bài đăng, điều khoản, người dùng và nhận xét đều có bảng riêng trong cơ sở dữ liệu WordPress wp_posts, và theo đó wp_terms. Các bảng này nhằm mục đích lưu trữ một số dữ liệu mặc định, như tiêu đề bài đăng và ngày xuất bản cho bài đăng.wp_userswp_comments
Nhưng điều gì sẽ xảy ra nếu bạn cần lưu trữ một thứ gì đó siêu tùy chỉnh? Giống như một tiêu đề SEO cho bài viết hoặc độ tuổi cho người dùng hoặc… giá sản phẩm cho sản phẩm? Câu trả lời là – siêu dữ liệu. WordPress cũng có các bảng cơ sở dữ liệu cụ thể cho điều đó – wp_postmeta,, .wp_termmetawp_usermetawp_commentmeta
Đây là cách nó trông như thế nào trong phpMyAdmin:
Và các hộp meta cho phép quản lý dữ liệu này, ví dụ như trong WooCommerce. Bạn có thể thấy _sale_pricegiá trị trong bảng trên giống với giá trị trong trường Giá ưu đãi bên dưới.
Cách xóa hộp meta mặc định
Trên mỗi trang chỉnh sửa loại bài đăng, WordPress đã có các hộp meta được xác định trước, nếu bạn mở bất kỳ trang chỉnh sửa bài đăng nào có plugin “Trình chỉnh sửa cổ điển” đang hoạt động, bạn sẽ thấy chúng.
Có hai cách để loại bỏ một metabox mặc định – sử dụng remove_meta_box()chức năng hoặc với sự trợ giúp của remove_post_type_support().
remove_meta_box ()
Đi thẳng vào ví dụ. Giả sử rằng chúng ta phải xóa cả hai metabox – “Page Attributes” cho các trang và “Custom Fields” cho bài đăng. Mã sẽ là:
add_action( 'admin_menu', 'hwp_remove_meta_box' );
function hwp_remove_meta_box(){
// Custom Fields
remove_meta_box( 'postcustom', 'post', 'normal' );
// Page Attributes
remove_meta_box( 'pageparentdiv', 'page', 'normal' );
}Tham số đầu tiên của hàm là một ID hộp meta. Cách dễ nhất để tìm ra nó là kiểm tra mã trong trình duyệt của bạn, nhưng chỉ trong một trường hợp ở đây là danh sách các ID hộp meta mặc định.
commentstatusdiv– Discussion,slugdiv– Slug,commentsdiv– Comments,postexcerpt– Excerpt,authordiv– Author,revisionsdiv– Revisions,postcustom– Custom Fields,trackbacksdiv– Send Trackbacks,categorydiv– Categories,tagsdiv-post_tag– Tags,{Taxonomy name}div– Any taxonomy,postimagedivremove_meta_box()function, useremove_post_type_support()instead,pageparentdiv– Page Attributes,submitdiv– Publish.
Tham số thứ hai của remove_meta_box()hàm là loại bài đăng mà bạn muốn xóa.
remove_post_type_support ()
Hãy thử làm giống như những gì chúng ta đã làm khi sử dụng hàm remove_meta_box () trước đây. Về mặt kỹ thuật remove_post_type_support(), chức năng không loại bỏ một hộp meta, nó vô hiệu hóa một chức năng cụ thể cho một loại bài đăng.
Điều thú vị về remove_post_type_support()cách tiếp cận là nó hoạt động cho cả Gutenberg và Classic Editor.
add_action( 'init', 'hwp_remove_meta_box_2' );
function hwp_remove_meta_box_2() {
// Featured image
remove_post_type_support( 'page', 'thumbnail' );
// Page attributes
remove_post_type_support( 'page', 'page-attributes' );
}Như bạn có thể thấy mã tương tự.
Tôi nghĩ rằng cách chính xác nhất để loại bỏ các hộp meta WordPress mặc định là sử remove_post_type_support()dụng hàm, vì nó thực sự tắt một tính năng cụ thể cho một loại bài đăng cụ thể và remove_meta_box()hàm chỉ loại bỏ một hộp meta.
Tính năng / Hộp Meta:
thumbnail— Featured Image metaboxauthor— Author metaboxexcerpt— Excerpt metaboxtrackbacks— Send trackbacks metaboxcustom-fields— Custom Fields metaboxcomments— Comments metaboxrevisions— Revisions metaboxpage-attributes— Page Attributes metabox (Gutenberg only)
Bạn cũng có thể xóa các khu vực như trình chỉnh sửa tiêu đề hoặc nội dung:
titleeditor
unregister_taxonomy_for_object_type ()
Bạn có thể nhận thấy rằng trong chương trước không có đề cập đến việc loại bỏ các hộp meta phân loại. Đó là bởi vì không có cách nào để sử dụng remove_post_type_support()hàm cho các đơn vị phân loại cho dù nó có phải là một đơn vị phân loại tùy chỉnh hay không.
Nhưng có một cách khác:
add_action( 'init', 'misha_remove_taxonomy_meta_boxes' );
function misha_remove_taxonomy_meta_boxes() {
// for Post tags
unregister_taxonomy_for_object_type( 'post_tag', 'post' );
// for Categories
unregister_taxonomy_for_object_type( 'category', 'post' );
}Xin lưu ý rằng cách tiếp cận này hoàn toàn ngắt kết nối một phân loại cụ thể khỏi một loại bài đăng. Nếu bạn chỉ muốn xóa metabox của nó, tôi thực sự khuyên bạn nên sử dụng phương pháp này .
Thêm hộp Meta tùy chỉnh
Cuối cùng chúng ta đã đến phần của hướng dẫn, nơi tôi sẽ chỉ cho bạn cách tạo meta box trong WordPress, đây là ảnh chụp màn hình về những gì chúng ta sẽ tạo:
Hướng dẫn tạo Metabox cho Page
Bước 1. add_meta_box ()
Hàm add_meta_box()nên được gọi bên trong một action hook, có 3 tùy chọn:
admin_menuadd_meta_boxesadd_meta_boxes_{post_type}– ở đây bạn có thể chỉ định tên loại bài đăng cụ thể, ví dụadd_meta_boxes_page– vì vậy mã sẽ chỉ chạy khi chỉnh sửapageloại bài đăng.
add_action( 'admin_menu', 'hwp_add_metabox' );
// or add_action( 'add_meta_boxes', 'hwp_add_metabox' );
// or add_action( 'add_meta_boxes_{post_type}', 'hwp_add_metabox' );
function hwp_add_metabox() {
add_meta_box(
'hwp_metabox', // metabox ID
'Meta Box', // title
'hwp_metabox_callback', // callback function
'page', // add meta box to custom post type (or post types in array)
'normal', // position (normal, side, advanced)
'default' // priority (default, low, high, core)
);
}
// it is a callback function which actually displays the content of the meta box
function hwp_metabox_callback( $post ) {
echo 'hey';
}Sau khi bạn chèn mã này vào functions.phpchủ đề con của mình hoặc trong một plugin tùy chỉnh, hộp meta này sẽ xuất hiện:
add_meta_box()hàm.Như bạn có thể thấy, tất cả những gì chúng ta đã in bên trong hàm gọi lại hiện được hiển thị bên trong hộp meta.
Hãy đi sâu vào nó và điền vào metabox của chúng tôi với các trường.
Bước 2. Chức năng gọi lại với HTML hộp meta
Trong đoạn mã bên dưới, tôi đã điền vào hộp meta tùy chỉnh của chúng tôi với nhiều trường.
Trong đoạn mã trên:
function hwp_metabox_callback( $post ) {
$seo_title = get_post_meta( $post->ID, 'seo_title', true );
$seo_robots = get_post_meta( $post->ID, 'seo_robots', true );
// nonce, actually I think it is not necessary here
wp_nonce_field( 'somerandomstr', '_hwpnonce' );
echo '<table class="form-table">
<tbody>
<tr>
<th><label for="seo_title">SEO title</label></th>
<td><input type="text" id="seo_title" name="seo_title" value="' . esc_attr( $seo_title ) . '" class="regular-text"></td>
</tr>
<tr>
<th><label for="seo_tobots">SEO robots</label></th>
<td>
<select id="seo_robots" name="seo_robots">
<option value="">Select...</option>
<option value="index,follow"' . selected( 'index,follow', $seo_robots, false ) . '>Show for search engines</option>
<option value="noindex,nofollow"' . selected( 'noindex,nofollow', $seo_robots, false ) . '>Hide for search engines</option>
</select>
</td>
</tr>
</tbody>
</table>';
}- Tôi đã sử dụng hàm
get_post_meta()để lấy các giá trị trường meta hiện có và hiển thị chúng. wp_nonce_field()là cần thiết để bảo mật bổ sung, khi lưu dữ liệu hộp meta của mình, chúng tôi có thể kiểm tra giá trị nonce để đảm bảo rằng yêu cầu đến từ nơi thích hợp.selected()là một chức năng tích hợp sẵn của WordPress giúp đơn giản hóa các điều kiện và hiển thịselected="selected"tại hiện<select>trường.
Hiển thị:
Bước 3. Lưu dữ liệu hộp meta
Nếu bạn đang sử dụng metabox này trên màn hình chỉnh sửa trang hoặc cho một loại bài đăng tùy chỉnh, đừng quên xác định lại các loại bài đăng được hỗ trợ trên dòng 23, nếu không, dữ liệu metabox sẽ không được lưu.
Các hàm update_post_meta() và delete_post_meta()(dòng 27-36) phải được gọi cho mỗi trường đầu vào trong hộp meta của bạn.
add_action( 'save_post', 'hwp_save_meta', 10, 2 );
// or add_action( 'save_post_{post_type}', 'hwp_save_meta', 10, 2 );
function hwp_save_meta( $post_id, $post ) {
// nonce check
if ( ! isset( $_POST[ '_hwpnonce' ] ) || ! wp_verify_nonce( $_POST[ '_hwpnonce' ], 'somerandomstr' ) ) {
return $post_id;
}
// check current user permissions
$post_type = get_post_type_object( $post->post_type );
if ( ! current_user_can( $post_type->cap->edit_post, $post_id ) ) {
return $post_id;
}
// Do not save the data if autosave
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
return $post_id;
}
// define your own post type here
if( 'page' !== $post->post_type ) {
return $post_id;
}
if( isset( $_POST[ 'seo_title' ] ) ) {
update_post_meta( $post_id, 'seo_title', sanitize_text_field( $_POST[ 'seo_title' ] ) );
} else {
delete_post_meta( $post_id, 'seo_title' );
}
if( isset( $_POST[ 'seo_robots' ] ) ) {
update_post_meta( $post_id, 'seo_robots', sanitize_text_field( $_POST[ 'seo_robots' ] ) );
} else {
delete_post_meta( $post_id, 'seo_robots' );
}
return $post_id;
}Xin lưu ý rằng tùy thuộc vào loại trường của bạn mà bạn phải sử dụng sanitization, vì vậy trong ví dụ trên, tôi đang sử dụng sanitize_text_field()hàm, nhưng cũng có một số khác, như sanitize_textarea()đối với trường textarea, sanitize_email()v.v.
Ngoài ra, nó cũng không cần thiết để sử dụng delete_post_meta()cho một số trường hợp, ví dụ như cho các trường văn bản thông thường. Nhưng isset()hoặc empty()kiểm tra điều kiện vẫn được khuyến nghị vì bạn sẽ nhận được thông báo PHP nếu giá trị trường trống.
$seo_title = isset( $_POST[ 'seo_title' ] ) ? sanitize_text_field( $_POST[ 'seo_title' ] ) : '';
update_post_meta( $post_id, 'seo_title', $seo_title );Tương thích Gutenberg
Theo mặc định khi bạn thêm meta box, nó cũng sẽ xuất hiện trong trình soạn thảo Gutenberg, đôi khi điều đó không sao cả, nhưng bạn phải nhớ rằng nó chỉ là một phần của khả năng tương thích ngược và các hộp meta không nên được hiển thị trong Gutenberg.
Nếu không, bạn sẽ phải đối mặt với trình chỉnh sửa khối cồng kềnh:
Nhưng điều gì sẽ xảy ra nếu bạn không biết liệu khách hàng của mình sẽ sử dụng Gutenberg hay Classic Editor? Có hai cờ (tham số) mà bạn có thể chuyển cho add_meta_box()hàm có thể giúp chúng tôi làm điều đó.
__back_compat_meta_box– đặt nó thànhtruevà hộp meta của bạn sẽ chỉ được tải trong giao diện trình soạn thảo cổ điển.__block_editor_compatible_meta_box– đặt nó thànhfalsevà sau đó trong Gutenberg, metabox sẽ hiển thị thông báo rằng nó không tương thích với trình chỉnh sửa khối và thay vào đó bạn nên sử dụng nó với trình soạn thảo cổ điển.
Ví dụ về việc sử dụng __back_compat_meta_box:
add_meta_box(
'hwp_metabox',
'Meta Box',
'hwp_metabox_callback',
'page',
'normal',
'default',
array(
'__back_compat_meta_box' => true,
)
);Ví dụ về việc sử dụng __block_editor_compatible_meta_box:
add_meta_box(
'hwp_metabox',
'Meta Box',
'hwp_metabox_callback',
'page',
'normal',
'default',
array(
'__block_editor_compatible_meta_box' => false,
)
);Đó là thông điệp trong Gutenberg:
__block_editor_compatible_meta_boxđược đặt thành false.Trong bài viết này giới thiệu cho A/E chi tiết về metabox, thấy hay và ý nghĩa chia sẻ bài viết giúp mình, hoặc để lại comment các vấn đề liên quan mình có thể giúp đỡ…. Chúc A/E thành công!
Bài viết liên quan: