ButterBean 类似 WooCommerce 商品属性的可分组自定义字段管理插件

ButterBean 类似 WooCommerce 商品属性的可分组自定义字段管理插件

ButterBean 类似 WooCommerce 商品属性的可分组自定义字段管理插件

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

butterbean
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 插件优化一下自定义字段输入界面,相信用户体验会有比较大的提升。

本站提供 WordPress 主题定制开发服务

本站长期承接WordPress主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有7年 WordPress 开发经验, 如果你想用 WordPress 开发网站, 请联系 QQ: 470266798 或邮箱: 4626395@gmail.com 咨询。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*