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

13 0 0

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);          // 返回 truewpjam_compare('a', 'IN', array('a', 'b', 'c'));  // 返回 truewpjam_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',  ]];