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

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

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

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

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

wpjam_compare

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

wpjam_compare 函数用于对两个数据进行比较,具体说是对 $value$compare_value 进行 $operator 比较操作,结果返回 true 或者 false,比如:

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

上面这个例子的意思是比较 $postpost_type 是不是等于 page。这样看,是不是就很简单了,同样 comparewpjam_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']
	)
));

上面这个例子的意思是除了比较 $postpost_type 是不是等于 page,还比较它的 post_status 是不是等于 publishdraft

这样是不是很实用。😁

定义字段依赖显示

看一段简化之后的缩略图设置的字段定义代码,其中 widthheight 的字段都有 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',
	]
];

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


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。