代码

的 代码字段 将真正的代码编辑器放入自定义小部件的面板中。语法突出显示、等宽文本、行号,所有内容均由 Ace 编辑器提供。它存在于编辑器需要粘贴标记而不是写散文的情况:嵌入片段、模式块、徽章 HTML 来自第三方的主插件内部 小部件生成器、您选择突出显示语言以及编辑器在面板中的高度。

与每个 Widget Builder 字段一样,代码字段也支持 条件 为了面板可见性,其令牌通过打印 Twig-语法模板引擎 自动允许安全 HTML。请参阅指南了解设置和限制。

Output经过WordPress清理,该值用普通令牌打印,运行时通过 wp_kses_post,相同的过滤器wordpress适用于帖子内容。安全的html标签生存; <script> tags被剥离,那个默认保护站点免受任何粘贴到字段中的东西的影响。

Code 字段的作用 #

• Widget 的 Elementor 面板中渲染 Ace 代码编辑器,并为您选择的语言提供语法突出显示。
• 将粘贴的代码存储为字符串。
• 将该字符串打印通过 {{ your_field_name }},消毒后 wp_kses_post 因此,允许的 HTML 渲染和脚本将被删除。
• 提供a |raw 过滤器逃生舱口绕过了可信管理场景的消毒。
• 通过行选项设置其可见高度,因此长片段可以在面板中占有一席之地。

如果您从未与构建器一起构建过小部件,请阅读 小部件生成器概述 首先;字段页面假设了基础工作。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个信任徽章小部件,其中有一个名为的代码字段 badge_markup 接受支付和审核提供商颁发的徽章 HTML。

如何添加代码字段 #

拖动 代码 从字段面板到下面的部分 内容 tab。field的选项在它落地的那一刻在左边打开。

代码字段选项已解释 #

• 标签: elementor 中编辑器上方的文本,例如 “徽章标记”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 badge_markup.
• 默认: 启动小部件附带的代码,可用作该字段期望的填充示例。
• 语言: 语法突出显示模式、html、css、javascript 等常见模式,这只影响突出显示,而不影响可以键入的内容。
• 行: 面板中编辑器的可见高度。

将代码字段与其令牌连接起来 #

Code 字段是一个令牌字段, 打印粘贴好的标记应该落在 HTML 面板中的位置:

<div class="tb-badges">
  {{ badge_markup }}
</div>

在输出时,值会贯穿 wp_kses_post。在实践中这意味着WordPress允许的标签在帖子内容中, <div>, <a>, <img>, <span>剩下的,渲染为粘贴,而 <script> tag和事件处理程序属性被剥离,对于一个由普通标记构建的徽章或模式片段,默认的行为正是你想要的。

请记住,kses 会默默地剥离标签。如果粘贴的片段在页面上呈现半空状态,则不会出错;过滤器删除了一个不允许的标签,并保留了其余部分。在将小部件交给客户端之前,在分期页面上测试提供商片段一次,以便您知道哪些部分幸存下来。

当一个片段真正需要不受影响地生存时, |raw 过滤器绕过消毒:

{{ badge_markup|raw }}

小心: |raw options whathwhat was pasted, scripts included。comlet for it when everyone who can edit the widget is already trusted with unfiltered HTML, effectively admin-level users, and never on widgets that lower-prilege editors or clients can t

防空字段,就像您想要的任何可选值一样,因此未使用的代码字段不会留下杂散包装:

{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}

在 Elementor 中使用代码控件 #

Elementor 中的页面中添加自定义小部件,或者如果页面已经打开,则重新加载编辑器。代码字段显示为标签下的深色编辑器块,大小为您设置的行。

Paste 或键入片段,突出显示遵循您在构建器中选择的语言,这使得格式错误的标记更容易在它进入页面之前发现,并且随着字段的变化,预览会更新。

常见用例 #

• 徽章和认证标记 来自支付、安全和审查提供商。
• 架构和结构化数据片段 SEO 插件不涵盖。
• 嵌入代码 对于玩家和表格来说,经过清理的子集就足够了。
• 自定义表或列表标记 用个别田地重建会很痛苦。
• 广告或促销块 其 HTML 每个活动都会更改,而无需重新发布小部件。

使用代码字段的技巧 #

• 相信默认的消毒。 wp_kses_post 保持正常标记完整并悄悄去除危险部分。大多数“我的片段被破坏”报告都是剥离的 <script> 标签完成其工作。
• 储备 |raw 对于仅管理员小部件。 它完全禁用该令牌的安全网。
• 设置语言以匹配内容。 突出显示是一种校对辅助工具; HTML 模式使缺失的结束标签一目了然。
• 导出默认片段。 一个评论的示例向编辑器准确显示代码属于该字段的形状。
• 将令牌包装进去 {% if %} 当片段是可选的时,空字段不会呈现空容器。
• 使用所见即所得进行散文。 如果编辑者会写文本而不是粘贴标记,则 所见即所得领域 是更友好的控制。

常见问题 #

包裹起来 #

Widget Builder Code 字段将 “把你的片段粘贴在这里”变成一个适当的工作流程:面板中突出显示的编辑器,模板中一个令牌,粘贴和页面之间的 WordPress 级清理。将其用于标记,保留 |raw 对于罕见值得信赖的案例,并伸手去拿 所见即所得领域 当内容是散文而不是代码时。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。