ButterBean是一個(gè)WordPress自定義字段管理插件，可以幫我們更好的組織很多自定義字段為選項(xiàng)卡的方式在一個(gè)MetaBox中，當(dāng)某個(gè)文章類型自定義字段特別多時(shí)，這個(gè)功能特別有用，可以幫助我們讓自定義字段輸入界面組織得更加有邏輯，操作更加方便。流行的WordPress電子商務(wù)插件WooCommerce就是以類似的方式實(shí)現(xiàn)的商品字段管理界面。ButterBean可以實(shí)現(xiàn)的效果如下圖。

安裝 ButterBean 插件

如果我們不是以標(biāo)準(zhǔn)插件的方式使用 ButterBean 的，我們需要復(fù)制 butterbean 文件夾到主題目錄中，然后加載 butterbean.php 文件，如下。

add_action( 'plugins_loaded', 'th_load' );
function th_load() {
    require_once( 'path/to/butterbean/butterbean.php' );
}

注冊 ButterBean 回調(diào)

安裝了 ButterBean 插件后，我們就可以使用 butterbean_register 動作鉤子注冊自定義 managers, sections, controls, 和 settings 了，回調(diào)函數(shù)有 $butterbean 和 當(dāng)前 $post_type 兩個(gè)對象。

add_action( 'butterbean_register', 'th_register', 10, 2 );
function th_register( $butterbean, $post_type ) {
	// 如果不是我們需要的文章類型，不執(zhí)行
	if ( 'your_post_type' !== $post_type )
		return;

	// 在這里注冊 managers, sections, controls, 和 settings
}

創(chuàng)建管理器 manager

在 ButterBean 中，Manager 是多個(gè) Sections 和 Controls 的組合，一個(gè) Manager 就是一個(gè) Meta Box，我們可以同時(shí)注冊多個(gè) Manager，代碼如下：

$butterbean->register_manager(
	'example',
	array(
		'label'     => esc_html__( '示例數(shù)據(jù)', 'your-textdomain' ),
		'post_type' => 'post',
		'context'   => 'normal',
		'priority'  => 'high'
	)
);

$manager = $butterbean->get_manager( 'example' );

創(chuàng)建自定義區(qū)域 Sections

一個(gè) Sections 是一些 Controls 的組合，顯示出來就是一個(gè)選項(xiàng)卡，我們可以添加自定義標(biāo)簽、描述和圖標(biāo)到每個(gè)選項(xiàng)卡中。

$manager->register_section(
	'section_1',
	array(
		'label' => esc_html__( '數(shù)據(jù)集1', 'your-textdomain' ),
		'icon'  => 'dashicons-admin-generic'
	)
);

創(chuàng)建自定義控制器 Controls

一個(gè) Controls 就是一個(gè)自定義字段輸入表單項(xiàng)，控制器出現(xiàn)在選項(xiàng)卡中，用來輸入自定義字段數(shù)據(jù)，Controls 有很多表單類型，從簡單的文本框到 WordPress 媒體輸入框，類型足夠全面。

如果默認(rèn)的 Controls 類型中要不到我們需要的，我們還可以通過擴(kuò)展 ButterBean_Control 類創(chuàng)建自定義 Controls 類型。

$manager->register_control(
	'abc_xyz', // 和下面的 Settings 名稱相同
	array(
		'type'    => 'text',
		'section' => 'section_1',
		'label'   => esc_html__( '文本1', 'your-textdomain' ),
		'attr'    => array( 'class' => 'widefat' )
	)
);

創(chuàng)建自定義設(shè)置

設(shè)置 Settings 定義了數(shù)據(jù)保存的方式，默認(rèn)情況下，Settings 名稱為自定義字段 Key，我們可以在前端使用 WordPress 標(biāo)準(zhǔn)的 get_post_meta 函數(shù)獲取保存的值，在保存數(shù)據(jù)之前，不要忘了使用 sanitize_callback 函數(shù)驗(yàn)證和凈化數(shù)據(jù)。

$manager->register_setting(
	'abc_xyz', // 和上面的 Controls 名稱相同
	array(
		'sanitize_callback' => 'wp_filter_nohtml_kses'
	)
);

如果你開發(fā)的是一個(gè)比較復(fù)雜的 WordPress主題或插件，有很多自定義字段需要管理，可以嘗試使用 ButterBean 插件優(yōu)化一下自定義字段輸入界面，相信用戶體驗(yàn)會有比較大的提升。