代码

Code 字段将一个小代码编辑器放入您使用主插件构建的自定义小部件中 小部件生成器。编辑粘贴一个片段,例如支付提供商发出的徽章HTML,并且该字段保持其可读性,行号和语法突出显示。这是标记的字段必须粘贴而不是作为散文输入。

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

Code 字段的作用 #

• Elementor中为您的小部件面板添加代码编辑器,其中包含行号和突出显示。
• 您选择的语言的亮点,从 HTML 和 CSS 到 JSON、SVG 和 PHP。
• 将粘贴的任何内容保存为文本。
• 通过诸如此类的令牌打印它 {{ badge_markup }}的,使用 WordPress 自己的帖子内容过滤器进行清理,因此允许的 HTML 渲染和脚本标签被删除。
• 有一个 raw 过滤器,适用于片段必须未触及的罕见情况。

建筑商的新手?阅读 小部件生成器概述 首先,然后打开小部件返回。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget 生成器中打开的一个小部件,本指南中的示例是一个 “信任徽章”小部件:标题的文本字段和名为的代码字段 badge_markup 这需要提供者的徽章 HTML。

如何添加代码字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 添加有关的部分 内容 tab,例如“徽章”。
3. 类型 code 在左侧的字段搜索框中。
4. 拖动 代码 into the section。点击字段上的铅笔, 打开它的设置。

代码字段选项已解释 #

• 标签: elementor 中编辑器上方的文本,例如 “徽章标记”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 badge_markup.
• 描述: elementor中编辑器下显示的提示。用它来说出字段的期望,例如“粘贴你的付款或审核提供商给你的html。”
• 语言: 高亮模式。该列表有 HTML、CSS、SASS、SCSS、JavaScript、JSON、LESS、Markdown、PHP、Python、MySQL、SQL、SVG、Text、Twig 和 Typescript。 HTML 是默认值。

Language 改变只突出显示,它不限制编辑器可以粘贴的内容,也不改变值打印的方式。

Panel 没有默认值,也没有此字段的高度设置,所以编辑器总是打开空,在其标准高度。打开 标签块 所以标签位于编辑器上方,而不是挤在编辑器旁边。

在"常用设置下您还会发现" 显示标签, 分离器 並 条件的,与其他领域的工作相同。离开 选择器 空:粘贴的片段不是 CSS 值。

在模板中打印代码 #

将令牌放在片段应降落的位置,并守护它,这样空白的字段就不会留下任何包装:

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

CSS面板中照常样式打包器,片段本身带来提供者给它的任何类,所以值得添加自己的包装器类来控制间距和对齐。

令牌带什么 #

WordPress 对帖子内容的相同过滤器使用该值。帖子中允许的标签以粘贴方式显示: div, span, a, img 和其余的。脚本标签和 iframe 被删除。

1个细节值得你在把小部件交给客户端之前先知道,在我们的测试中,一个粘贴的脚本标签被移除,但里面的JavaScript作为纯文本留在页面上,所以访问者在小部件中间看到了一行代码,没有任何警告你在草稿页面上测试一个提供商的片段一次,并告诉编辑器只粘贴标记。

原始过滤器 #

添加 raw to token 准确打印粘贴的内容, 包含脚本和 iframe:

{{ badge_markup|raw }}

在我们的测试中,该版本保留了 iframe 并运行了脚本。这对于您控制的嵌入非常有用,而且在其他地方都有风险,因为任何可以编辑该小部件的人都可以在页面上运行 JavaScript。只有当该页面的每个编辑器都已受到未过滤的 HTML 的信任时才使用它,并保留小部件客户端的普通令牌。

模板引擎也接受 trim, upper 並 lower 在令牌上,这对于简短的纯文本片段来说偶尔很方便。

在 Elementor 中使用代码控件 #

Widget 添加到页面,或者重新加载编辑器,如果页面已经打开。该字段显示为标签下的暗编辑器块,行号位于侧面。单击离开后立即粘贴片段和预览更新。

Editor是一个小窗口,所以里面滚动了一个长片段,粘贴就好了,阅读就少了;如果打算手工编辑的话,把片段写在更宽敞的地方。

这是前端的成品小部件,由三个粘贴的徽章块构建:

常见用例 #

• 提供商以 HTML 形式分发的付款、审核和信任徽章。
• Schema 或结构化数据块,编辑器需要粘贴每个页面。
• 粘贴作为标记的小型 SVG 图标或徽标。
• CSS 或 JSON 短片段,您的小部件的脚本会读取。

使用代码字段的技巧 #

• 说出要粘贴在说明中的内容。 编辑器无法从空编辑器中判断该字段的期望。
• 守卫令牌 {% if %}. 否则,未使用的字段会在页面上留下空包装纸。
• 测试一次真正的提供商片段。 这就是您找出哪些部件在过滤器中幸存下来的方法。
• 保持 raw 仅适用于值得信赖的编辑。 普通令牌是客户端站点的安全默认值。
• 格式化文本而不是标记? 使用 所见即所得领域 因此编辑器会得到一个可视化编辑器而不是代码。

常见问题 #

包裹起来 #

将代码字段放入内容部分,选择语言,编写说明要粘贴的内容的描述,并将令牌打印在内容部分中 {% if %} guard。保留客户端站点的普通令牌,并伸手去拿 raw 仅限值得信赖的编辑器。有关富文本而不是标记,请参阅 所见即所得领域,并检查 定价 对于每个计划包含的内容。