在 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'
));
上面这个例子的意思是比较 $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',
]
];
通过这样的方式来定义表单的字段和字段之间依赖显示关系,把复杂的事情变得异常简单,写代码也变得超级有趣。🤔