ButterBean是一个WordPress自定义字段管理插件，可以帮我们更好的组织很多自定义字段为选项卡的方式在一个MetaBox中，当某个文章类型自定义字段特别多时，这个功能特别有用，可以帮助我们让自定义字段输入界面组织得更加有逻辑，操作更加方便。流行的WordPress电子商务插件WooCommerce就是以类似的方式实现的商品字段管理界面。ButterBean可以实现的效果如下图。

安装 ButterBean 插件

如果我们不是以标准插件的方式使用 ButterBean 的，我们需要复制 butterbean 文件夹到主题目录中，然后加载 butterbean.php 文件，如下。

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

注册 ButterBean 回调

安装了 ButterBean 插件后，我们就可以使用 butterbean_register 动作钩子注册自定义 managers, sections, controls, 和 settings 了，回调函数有 $butterbean 和 当前 $post_type 两个对象。

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

	// 在这里注册 managers, sections, controls, 和 settings
}

创建管理器 manager

在 ButterBean 中，Manager 是多个 Sections 和 Controls 的组合，一个 Manager 就是一个 Meta Box，我们可以同时注册多个 Manager，代码如下：

$butterbean->register_manager(
	'example',
	array(
		'label'     => esc_html__( '示例数据', 'your-textdomain' ),
		'post_type' => 'post',
		'context'   => 'normal',
		'priority'  => 'high'
	)
);

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

创建自定义区域 Sections

一个 Sections 是一些 Controls 的组合，显示出来就是一个选项卡，我们可以添加自定义标签、描述和图标到每个选项卡中。

$manager->register_section(
	'section_1',
	array(
		'label' => esc_html__( '数据集1', 'your-textdomain' ),
		'icon'  => 'dashicons-admin-generic'
	)
);

创建自定义控制器 Controls

一个 Controls 就是一个自定义字段输入表单项，控制器出现在选项卡中，用来输入自定义字段数据，Controls 有很多表单类型，从简单的文本框到 WordPress 媒体输入框，类型足够全面。

如果默认的 Controls 类型中要不到我们需要的，我们还可以通过扩展 ButterBean_Control 类创建自定义 Controls 类型。

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

创建自定义设置

设置 Settings 定义了数据保存的方式，默认情况下，Settings 名称为自定义字段 Key，我们可以在前端使用 WordPress 标准的 get_post_meta 函数获取保存的值，在保存数据之前，不要忘了使用 sanitize_callback 函数验证和净化数据。

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

如果你开发的是一个比较复杂的 WordPress主题或插件，有很多自定义字段需要管理，可以尝试使用 ButterBean 插件优化一下自定义字段输入界面，相信用户体验会有比较大的提升。