在 WordPress 中如何定义字段依赖显示

WPJAM Basic 插件作为我们「WordPree果酱」团队所有插件和项目的基础，其中表单字段的渲染就是其中最重要的一个能力，我们做到了只需配置就能使用，无需额外增加页面的 JavaScript 的交互代码。

比如插件的「缩略图设置」页面，只需写表单字段的配置代码和字段之间上的显示依赖关系，除了插件本身的基础的数据比较代码之外，其他都是通过配置定义的。

所以我才经常在 WPJAM Basic 群里面说，我们现在做项目，只需要需求清晰，一个晚上就能做好后台。

定义了字段依赖关系之后，表单渲染的时候，字段显示就需要进行数据比较是经常进行的操作，当然我们可以使用 PHP 和 JavaScript 的比较操作符进行操作的，但是如果需要进行回调操作的时候，那就要有点麻烦了，所以我定义两个 PHP 函数和一个 JavaScript 函数进行数据比较。

wpjam_compare

wpjam_compare($value, $operator, $compare_value);

wpjam_compare 函数用于对两个数据进行比较，具体说是对 value 和 compare_value 进行

wpjam_compare(10, '<=', 12);					// 返回 true
wpjam_compare('a', 'IN', array('a', 'b', 'c'));	// 返回 true
wpjam_compare(20, 'BETWEEN', array(30, 40));	// 返回 false

是不是很方便，只需要传递两个数据，和比较方法接口，特别说一下目前支持的比较方法有：'=', '!=', '>', '>=', '<', '<=', 'IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN' 共10种，基本可以符合常见的比较情况。

wpjam_compare 函数同样定义了 JavaScript 版本，参数和使用方法一样，不再重复了。

wpjam_show_if

wpjam_show_if($item, $args);

wpjam_compare 函数用于对两个数据进行比较，那么如果要比较数组和对象，这个时候可以用到 wpjam_show_if 函数，它有两个参数：

$item：要比较的对象或者数组。

args：可以指定要比较 item 中的哪个字段（key 指定），比较的方法（compare 指定），要比较的值（value 指定），说起来有点复杂，还是来看例子吧：

wpjam_show_if($post, array(
	'key'		=> 'post_type',
	'compare'	=> '=', 
	'value'		=> 'page'
));

上面这个例子的意思是比较 $post 的 post_type 是不是等于 page。这样看，是不是就很简单了，同样 compare 和 wpjam_compare 函数一样有 10 种比较方法。

如果一个比较还不能满足，wpjam_show_if 函数支持多重比较：

wpjam_show_if($post, array(
	array(
		'key'		=> 'post_type',
		'compare'	=> '=', 
		'value'		=> 'page'
	),
	array(
		'key'		=> 'post_status',
		'compare'	=> 'IN', 
		'value'		=> ['publish','draft']
	)
));

上面这个例子的意思是除了比较 $post 的 post_type 是不是等于 page，还比较它的 post_status 是不是等于 publish 或 draft。

这样是不是很实用。😁

定义字段依赖显示

看一段简化之后的缩略图设置的字段定义代码，其中 width 和 height 的字段都有 show_if 属性，它指定了只有 type 字段的值为空的时候才显示。

$show_if	= ['key'=>'type', 'compare'=>'!=', 'value'=>''];
$fields		= [
	'type'		=> [
		'type'		=>'select',
		'options'	=>[
			''		=> '关闭缩略图',
			'img'	=> '本地媒体模式',
			'image'	=> '输入图片链接模式'
		]
	],
	'width'		=> [
		'title'		=> '缩略图尺寸：',
		'type'		=> 'number',
		'show_if'	=> $show_if,
		'group'		=> 'term',
		'class'		=> 'small-text',
	],
	'height'	=> [
		'type'		=> 'number',
		'show_if'	=> $show_if,
		'group'		=> 'term',
		'class'		=> 'small-text',
	]
];

通过这样的方式来定义表单的字段和字段之间依赖显示关系，把复杂的事情变得异常简单，写代码也变得超级有趣。🤔