每个页面的专用代码空间
HTML 小部件中停止填充脚本或将它们散射到全局文件中, 此扩展名在 中添加了一个专用的 Custom JS 字段 Page Settings > Advanced tab。你在这里写的任何代码都只运行在这个特定的页面或帖子上。它是处理一次性脚本、A/B测试跟踪或独特交互元素的有组织的方式。
- Clean Separation:将特定于页面的脚本与您的全站代码隔离。没有破坏其他页面的风险。
- 易于访问:在页面设置中立即找到您的代码—不要通过小部件面板进行挖掘。
- 内置最佳实践:该字段自动处理
$(document).ready()为你,所以你可以直接写出你的核心逻辑。
页面级和元素级 JavaScript
Page-level代码, 生活在页面设置, 高级,自定义JS, 并且只在该页面上运行, 元素级代码生活在任何小部件, 列,部分或容器的高级选项卡中, 在元素级代码中, 该词 selector CSS 类交换该元素,因此脚本只触及该元素。
- 无 <script> 标签,也没有文档就绪包装:代码被包装在里面
jQuery(document).ready为你,并且$作品。 - 内容加载后,脚本会在页脚中打印。
- 代码在实时页面上运行,而不是在 Elementor 编辑器预览内运行,因此在保存后检查已发布的页面。
- Word 选择器的每个实例在元素级代码中被替换。用
$('selector')而不是document.querySelector在那里。
如何在 Elementor 中添加自定义 JavaScript
这些步骤假设 Master Addons Pro 处于活动状态,并且您的 WordPress 角色可以发布未过滤的 HTML,管理员默认情况下可以发布这些 HTML。
- 在仪表板中,转到主插件,打开"扩展"选项卡,打开"自定义 JS"并保存。
- 使用 Elementor 编辑页面。
- 对于整个页面,打开"页面设置",然后打开"高级",然后打开"自定义 JS"。对于一个元素,选择它并打开其"高级"选项卡。
- 贴您的代码,而无需 <script> 标签。
- 更新页面并在实时 URL 上进行测试。
三个 Elementor 自定义 JS 示例
将其中任何一个粘贴到自定义 JS 字段中,然后更改类名称以匹配您的页面。
1、滚动后在页眉添加一个类(页面级别)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2、点击元素时切换类(元素级别)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3。在点击按钮时发送Google分析事件(页面级别)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});在 Elementor 中添加 JavaScript 的方法进行了比较
3种常见的路线,正确的取决于脚本需要运行的地方,如果你还需要一个元素范围的样式,那就免费了 自定义 CSS 扩展 以同样的方式工作。
| HTML 小部件 | Elementor Pro 自定义代码 | 主插件自定义 JS | |
|---|---|---|---|
| 计划 | 自由元素器 | 元素专业版 | 硕士插件专业版 |
| 范围 | 小部件所在的页面 | 全站,有显示条件 | 一页,或一个元素 |
| 你写在哪里 | 画布上的小部件内部 | 仪表板中的自定义代码屏幕 | "页面设置 ", 或元素的"高级"选项卡 |
| 脚本标签 | 需要 | 需要 | 不需要 |
| 目标一个元素 | 自己编写选择器 | 自己编写选择器 | 使用选择器关键字 |
自定义 JS 的常见问题
我应该何时使用它而不是 HTML 小部件或我的主题函数。php?
HTML小部件也行,但是脚本最终散布在画布上,之后很容易错过,像是计算器、滚动效果或者点击事件,对于每个页面都需要的代码,一个全站选项比如你的主题或者代码片段插件,是更好的家用HTML小部件。
是否针对性能对代码进行了最小化或优化?
No。代码是你写的时候添加的,所以保持简短整洁 Master Addons 唯一做的改变就是将元素级别代码中的选择器关键字交换为该元素的 CSS 类。
JavaScript写坏了会怎样,会不会把我的整个页面都坏掉?
It can。语法错误可以阻止该页面上的其他脚本运行。首先在浏览器控制台中测试代码,如果页面很重要,请在暂存站点上尝试。
我可以将此与动态数据或元素变量一起使用吗?
JS 字段本身之外直接写入,但是,你可以编写与页面上由动态数据填充的元素交互的 JavaScript,例如,你可以编写一个从动态填充的标题中读取文本的脚本,你会使用普通的 JavaScript 选择器来针对那些元素。
