Trang chủ » Hướng dẫn Meta Boxes

Hướng dẫn Meta Boxes

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' );
}

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,
postimagediv – You can not remove Featured image metabox using remove_meta_box() function, use remove_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' );
}

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 metabox
author — Author metabox
excerpt — Excerpt metabox
trackbacks — Send trackbacks metabox
custom-fields — Custom Fields metabox
comments — Comments metabox
revisions — Revisions metabox
page-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:

title
editor

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' );
	
}

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_menu
add_meta_boxes
add_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ửa pageloạ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';
	
}

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:

Metabox example — Ví dụ đơn giản về sử dụng `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 '&lt;table class="form-table">
		&lt;tbody>
			&lt;tr>
				&lt;th>&lt;label for="seo_title">SEO title&lt;/label>&lt;/th>
				&lt;td>&lt;input type="text" id="seo_title" name="seo_title" value="' . esc_attr( $seo_title ) . '" class="regular-text">&lt;/td>
			&lt;/tr>
			&lt;tr>
				&lt;th>&lt;label for="seo_tobots">SEO robots&lt;/label>&lt;/th>
				&lt;td>
					&lt;select id="seo_robots" name="seo_robots">
						&lt;option value="">Select...&lt;/option>
						&lt;option value="index,follow"' . selected( 'index,follow', $seo_robots, false ) . '>Show for search engines&lt;/option>
						&lt;option value="noindex,nofollow"' . selected( 'noindex,nofollow', $seo_robots, false ) . '>Hide for search engines&lt;/option>
					&lt;/select>
				&lt;/td>
			&lt;/tr>
		&lt;/tbody>
	&lt;/table>';

}

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>

</tr>

<tr>

<th><label for="seo_tobots">SEO robots</label></th>

<td>

<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&#91; '_hwpnonce' ] ) || ! wp_verify_nonce( $_POST&#91; '_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') &amp;&amp; DOING_AUTOSAVE ) {
		return $post_id;
	}

	// define your own post type here
	if( 'page' !== $post->post_type ) {
		return $post_id;
	}

	if( isset( $_POST&#91; 'seo_title' ] ) ) {
		update_post_meta( $post_id, 'seo_title', sanitize_text_field( $_POST&#91; 'seo_title' ] ) );
	} else {
		delete_post_meta( $post_id, 'seo_title' );
	}
	if( isset( $_POST&#91; 'seo_robots' ] ) ) {
		update_post_meta( $post_id, 'seo_robots', sanitize_text_field( $_POST&#91; 'seo_robots' ] ) );
	} else {
		delete_post_meta( $post_id, 'seo_robots' );
	}

	return $post_id;

}

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&#91; 'seo_title' ] ) ? sanitize_text_field( $_POST&#91; 'seo_title' ] ) : '';
update_post_meta( $post_id, 'seo_title', $seo_title );

1 2	$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ành truevà 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ành falsevà 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,
	)
);

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,
	)
);

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 — `__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!