选择2

Select2 字段将可搜索的下拉添加到使用主插件构建的自定义小部件 小部件生成器。编辑器键入过滤列表,打开显示多重,他们可以一次选择几个选项。将其用于长选项列表或用于一个答案不够的标签式选择。

Select2是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.

Select2 字段的作用 #

• Elementor中为小部件的面板添加了一个带有搜索框的下拉。
• Show Multiple off,编辑器会选择一个选项,您的模板会获得该选项的密钥。
• 打开"显示多个"后,编辑器会选择任意数量的选项,显示为可移动标签,并且您的模板会获得您使用 a 打印的密钥列表 {% for %} 循环。
• 每个选项都有一个键和一个标签。编辑器会看到标签,您的 HTML 总是收到键。

如果您还没有构建小部件,请阅读 小部件生成器概述 first。for a short single-choice list without search, the plain 选择字段 更简单。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget Builder 中打开的一个小部件,本指南中的示例是一个 “Portfolio Card” 小部件,其中包含项目标题的文本字段和两个 Select2 字段:项目类型(一个选择)和项目标签(几个选择)。

如何添加 Select2 字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 上 内容 tab,如果还没有,则添加一个部分。
3. 类型 select 在左侧的字段搜索框中。选择并选择2。
4. 拖动 选择2 into the section。its settings open in the left sidebar。

新的 Select2 字段以"显示多个已打开"和三个示例选项开始(value-1 到 value-3)。在编写模板之前,将它们替换为您自己的。

Select2 字段选项进行了解释 #

这是项目类型字段,专为单一选择而设置:

• 标签 是 Elementor 中控件旁边的文本,例如 “项目类型”。
• 名字 是字段的唯一ID(仅字母、数字和下划线),它也是你在模板中使用的代币,所以 project_type 变成 {{project_type}}.
• 描述 elementor 中出现在控制之下。将其用于诸如“选择一类”之类的简短提示
• 显示多个? 择(否)和许多选择(是)之间切换,这会改变模板接收到的内容,因此在编写 HTML 之前先决定。
• 选项 是选择的列表,左边框是你的模板得到的键()branding, web),右边框是标签编辑器看到(品牌,网页设计),用加号图标加一行,红十字去掉一个。
• 默认值 is 首次将小部件添加到页面时所选的,在单模式下是正常的下拉,如果将其留空,则选择第一个选项。

Project Tags 使用相同的选项,并打开显示多个,默认值框成为标签选择器,因此您可以预选多个选项,将其留空,并预选第一个选项。

如果在编辑选项后默认值列表仍然显示旧的示例选项,请单击 保存设置 并再次打开场地。

在默认值以下,您将找到大多数字段共享的常见设置:显示标签、标签块、响应式控制、动态支持、可用前端、分离器、 条件 和控制类。标签块对于多个字段是值得打开的,因为控制然后为其标签获得完整的面板宽度。

在模板中使用 Select2 值 #

如何打印该值取决于显示倍数。

单模式:打印密钥 #

单个 Select2 的工作原理与任何其他令牌一样。 {{project_type}} prints 所选的键, 所以你可以把它当成文本使用, 或者从中构建一个 CSS 类:

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

选择品牌后,效果 type-branding 並 branding。也可以比较一下: {% if project_type == 'web' %}...{% endif %}.

多种模式:在按键上循环 #

多个 Select2 保存一个列表,并且 {{project_tags}} on its own 打印什么都没有。而是循环在上面:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

Loop每个选取的选项运行一次,按照编辑器选取它们的顺序,在里面, {{ tag }} 是一个键,以及诸如 {{ tag|upper }} 也工作。的 Twig 语法指南 列出模板引擎支持的所有内容。

代码编辑器旁边的文档面板列出了每个字段的令牌。复制 {{project_tags}} 从那里可以确定单个字段,但多个字段仍然需要循环。

单击 保存设置 当模板完成时。

在 Elementor 中使用 Select2 控件 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。两个 Select2 控件都出现在"内容"选项卡上,其默认值已选中。

多重控制中,单击加号按钮或标签后面的空白处开始打字,列表随着键入而变窄,Enter添加突出显示的选项,每个标签都有一个小十字,可以将其删除。

单控打开一个下拉,并带有自己的搜索框,选择一个选项,或者使用当前值旁边的十字来清除它。

Canvas 立即更新 请注意,面板显示标签(网页设计、社交媒体),而卡片则打印按键(web, social):

如果您需要页面上的标签文本,请使密钥足够可读以显示,或者将其映射到模板中:

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

常见用例 #

• 投资组合、案例研究和团队卡上的标签或服务。
• CSS类相加的类别或样式选择器,例如 type-web.
• 长列表,例如国家/地区、行业或图标集,其中搜索可以保存滚动。
• 定价或产品卡上的功能列表,循环到列表项目中。

Select2 字段的操作技巧 #

• Show Multiple 先决定。稍后切换意味着更改 {{field}} 到循环,或者反过来。
• 以小写写键,不带空格 (social, web)。它们最终会出现在类名和比较中。
• Widget 使用后不要重命名密钥,已经保存旧密钥的页面不会与新密钥匹配。
• 例如,使用键对输出进行样式处理 .type-web .card-type { ... }.
• 对于少数图标按钮而不是下拉按钮,请使用 选择字段.

常见问题 #

包裹起来 #

Select2 字段添加, 设置您的键和标签, 在您编写 HTML 之前, 在一个选择和许多选择之间进行选择。用 打印单个值 {{field_name}} 并循环多个 {% for %}。对于重复的字段组而不是选择列表,请查看 中继器场,并检查 定价 对于每个计划包含的内容。