在 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',

]

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

WordPress个人资料添加自定义字段input表单

前几天有人问wp自学笔记，怎么在我的个人资料这个页面添加其他的字段呢？例如：QQ号码、微信号码之类的input表单输入框。

WordPress默认的设置里是没有QQ号码、微信号码的，如果要添加我们只能使用代码添加自定义字段，有很多插件可以实现这个功能，但是能不用插件就不用插件嘛，今天wp自学笔记分享一篇免插件纯代码实现个人资料添加自定义字段的WordPress教程。

添加用户自定义字段

首先我们在我的个人资料编辑页面添加一行“微信号码”的自定义字段。

直接把下面的代码复制到主题的functions.php文件中，即可在用户资料编辑页面看到一个“QQ号码”的表单项。

add_action( \\\'show_user_profile\\\', \\\'wizhi_extra_user_profile_fields\\\' );add_action( \\\'edit_user_profile\\\', \\\'wizhi_extra_user_profile_fields\\\' );add_action( \\\'personal_options_update\\\', \\\'wizhi_save_extra_user_profile_fields\\\' );add_action( \\\'edit_user_profile_update\\\', \\\'wizhi_save_extra_user_profile_fields\\\' );function wizhi_save_extra_user_profile_fields( $user_id ){if ( !current_user_can( \\\'edit_user\\\', $user_id ) ) { return false; }    update_user_meta( $user_id, \\\'wx_username\\\', $_POST[\\\'wx_username\\\'] );}function wizhi_extra_user_profile_fields( $user ){ ?><h3>附加用户字段</h3><table >    <tr>        <th><label for=\\\"wx_username\\\">微博用户名</label></th>        <td>            <input type=\\\"text\\\" id=\\\"wx_username\\\" name=\\\"wx_username\\\" size=\\\"20\\\" value=\\\"<?php echo esc_attr( get_the_author_meta( \\\'wx_user_name\\\', $user->ID )); ?>\\\">            <span >请输入微博用户名。</span>        </td>    </tr></table><?php }?>

调用自定义字段

添加好用户自定义字段后，如何获取使用这个字段呢？获取的方法也很简单，示例代码如下：

<?php$current_user = wp_get_current_user();get_user_meta( $current_user->ID, \\\'wx_username\\\', true); ?>

把上面的调用自定义字段添加到想要显示用户字段内容的页面即可。

扫码关注wpwp自学笔记

精选优质免费WordPress主题模板，分享最新WordPress实用建站教程！

记住我们的网址：ztJun.com