在 WordPress 后台集成了标签选择器（tag-input）和多选选择器（mu-select）

使用过 WPJAM Basic 的同学都知道，WPJAM Basic 集成了多个字段组件，这些组件都是后台定义一下，然后前段就能够渲染，并且提交的时候也会根据类型进行验证和处理，反正就是我通过前后端双修的模式将字段设置这块做到了最简洁了。😁

比如多个输入框（类型：mu-text），在「CDN 加速」里的「扩展名」字段：

甚至可以无限重复的一组字段（类型：mu-fields），在「缩略图设置」里面的：「未设置缩略图是，获取特色图片顺序」字段：

还有设置多个图片（类型：mu-img），还是在「缩略图设置」里面的「默认缩略图」字段：

这些字段都是后端配置的，自动渲染生成的，不用再多写一行前段 JS 代码：

「扩展名」字段：

[
	'exts'	=> [
		'type'		=> 'mu-text',
		'button_text'	=> '添加扩展名',
		'direction'	=> 'row',
		'sortable'	=> false,
		'description'	=> '镜像到云存储的静态文件扩展名'
	]
]

「获取顺序」字段：

[
	'post_thumbnail_orders'	=> [
		'title'		=> '文章缩略图',
		'type'		=> 'mu-fields',
		'group'		=> true,
		'max_items'	=> 5,
		'before'	=> '首先使用文章特色图片，如未设置，将按照下面的顺序获取：<br />',
		'fields'	=> [
			'type'	=> ['type'=>'select',	'options'=>[
				''			=> '请选择来源',
				'first'		=> '第一张图',
				'post_meta'	=> [
					'label'		=> '自定义字段',
					'fields'	=> ['post_meta'=>['type'=>'text',	'class'=>'all-options',	'placeholder'=>'请输入自定义字段的 meta_key']]
				],
				'term'		=>[
					'label'		=> '分类缩略图',
					'show_if'	=> ['term_thumbnail_type', 'IN', ['img','image']],
					'fields'	=> ['taxonomy'=>['options'=>[''=>'请选择分类模式']+$tax_options]]
				]
			]]
		]
	]
]

「默认缩略图」字段：

[
	'default'	=> [
		'title'		=> '默认缩略图',
		'type'		=> 'mu-img',
		'item_type'	=>'url'
	]
]

就是这样配置一下就好，剩下的程序会自动处理，厉害吧！这就是我前后端兼修的能力。😂

但是还是有些地方需要一些主键，比如在列表筛选的时候，用到上面这些多输入框的时候，界面就有点挤了，所以就有了「标签选择器」和「多选选择器」这两个字段组件。

「标签选择器」这个其实和上面的多输入框很类似，只是它每输入一个之后，就变成类似标签的样式：

支持自动完成，拖动排序，删除，按退格键（Backspace）不仅可以删除输入的文字，也可以删除前面的标签（为了防止误删，需要快速按两次）。这个可能更多的是样式的改进，但是更重要的是界面的节省。

使用也很简单，首先它的类型是：tag-inpug：

[
	'tags'	=> [
		'type'			=> 'tag-input',
		'data_type'		=> 'taxonomy',	// 数据类型
		'taxonomy'		=> 'post_tag',	// 文章标签
		'min_items'		=> 2,	// 至少 2 个
		'max_items'		=> 3,	// 最多 3 个
		'unique_items'	=> true // 不能重复，已选择的项目不会再次出现
	]
]

有时候被选择的项目数量是有限的，比如分类，但是要多选，如果使用 select 的话，只能单选，当然 select 有个 multiple 属性，但是显示的效果是这样的：

通过按着 CTRL 或者 Shift 然后点击进行多选，怎么用，怎么难受，并且高度太高，不好排版，如果强制设置为一行，都不知道选择了什么。

所以我们做了「多选选择器」这个组件，它默认显示选中的选项，通过逗号分割开：

点击「下拉选择框」（其实这个是个按钮，通过 CSS 改造和下拉选择框很类似）就可以看到所有选项，并且所有选项前面都有个复选框：

勾选之后，就会显示到上面「下拉选择框」中，并且同样也支持设置至少和最多的数量，选好之后点击人地方，这个下拉复选框就隐藏了，这样就能大大节省界面：

使用也很简单，首先它的类型是：mu-select，其实把上面标签选择器的代码复制下来，改下类型就好了

[
	'tags'	=> [
		'type'			=> 'mu-select',
		'data_type'		=> 'taxonomy',	// 数据类型
		'taxonomy'		=> 'category',	// 文章分类
		'min_items'		=> 2,	// 至少 2 个
		'max_items'		=> 3,	// 最多 3 个
	]
]

如果你基于 WPJAM Basic 进行二次开发，那么这两个字段组件可以帮到你很多。为了写这两个字段，我相当于又重修了一下 JavaScript 这门语言，还好现在有 DeepSeek，很多模棱两可的东西，都可以问题，然后也可以让它给到一些演示代码，然后在改就简单了很多。😁