只需加多一个属性就能实现 WordPress 后台表单折叠展开效果

最近做了一个邮件模板功能,就是可以在后台定义各种情况下的发送邮件验证码的模板,如下图所示:

可以定义「注册账号」,「重置密码」,「验证邮箱」等各种情况下的邮件模板的标题和内容。使用 WPJAM Basic 的生成表单功能,实现是非常简单,具体的代码就是生成三个 fieldset 字段组,使用 foreach 简单就能处理:

$fields	= [];

foreach(['register'=>'注册账号', 'resetpass'=>'重置密码', 'verify'=>'验证邮箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',		'fields'=>[
		$type.'_subject'	=> ['title'=>'标题',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'内容',	'type'=>'textarea',	'rows'=>3],
	]];
}

但是感觉这样重复的界面非常占用空间,有没有什么好的优化方式,比如折叠起来,点击展开之后再设置?

我查了一下,无需 Javascript,只需用原来 HTML 的 summary / details 这两个标签就能实现。

所以我增强了一下 WPJAM Basic fieldset 组件的能力,fieldset 组件只需要设定 summary 属性,就能使用 summary / details 实现折叠展开效果,具体代码如下:

$fields	= [];

foreach(['register'=>'注册账号', 'resetpass'=>'重置密码', 'verify'=>'验证邮箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',	'summary'=>$title.'时邮件设置',	'fields'=>[
		$type.'_subject'	=> ['title'=>'标题',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'内容',	'type'=>'textarea',	'rows'=>3],
	]];
}

相比第一段代码,这段代码就是增加了 summary 属性设置,最后的效果如下:

默认情况都只显示摘要,点击摘要时候,就会展开字段组设置,如上图,我点击了第一个 fieldset 字段组的摘要,「注册账号」这个邮件模板就展开了,其他两个则还是没有折叠的状态。


该功能已经整合到 WPJAM Basic 插件中,并已免费提供下载,简单勾选或者设置下即可开启!



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

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