WordPress divi主题

在 Divi 中使用外部 JavaScript 片段的最佳实践

by | May 10, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

WordPress 和 Divi 做了很多开箱即用的奇妙事情,让我们可以轻松地建立网站。 但有时我们需要更高级的功能,而这些功能只能通过 JavaScript 来实现。

google广告开户

使用 Divi,即使您没有设置子主题,您也可以轻松地将 JavaScript 或 jQuery 片段(代码块)添加到您的主题或网页中,而无需插件。 在本教程中,我们将介绍一些在 Divi 中使用外部 JavaScript 片段的最佳实践。

JavaScript 和 jQuery 快速入门

JavaScript 是您在网站上看到的动态功能背后的魔力。 它是一种为 Web 构建的客户端编码语言,可以访问您的所有主题文件并通过浏览器执行所有类型的功能,这些功能单独使用 HTML 或 CSS 是不可能的。

JQuery(最流行的 JavaScript 库之一)使得向您的网站添加 JavaScript 片段变得非常容易,这些片段将在不同的浏览器类型中运行。 这就是为什么今天在网站上看到很多 jQuery 的原因。 JQuery 也内置在 WordPress 中,因此如果格式正确,您添加到 Divi 的任何 jQuery 代码都可以工作。

Divi/WordPress 中正确的 JQuery 代码段格式

使用文档就绪功能

在大多数情况下,我建议使用 $(document).ready() 在您的 jQuery 代码段中。 添加的任何 JavaScript $(document).ready() 将确保在执行 JavaScript 之前加载并准备好文档(或 DOM)。 这避免了当页面还没有准备好被安全操作时 JavaScript 可能执行的某些情况。

在 Divi 中,函数应该是这样的……

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

在 WordPress 中使用 jQuery 时使用“jQuery”而不是“$”

由于 WordPress 已经带有兼容模式的 jQuery 版本,标准 $ 对于 jQuery 不起作用。 这是为了防止它与您可能在 WordPress 中使用或不使用的其他 JavaScript 库发生冲突。 相反,您将需要使用 jQuery 代替 $ 捷径。

所以这…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

需要变成这个……

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

但是,如果您想保持代码不那么臃肿并保留那些 $ 快捷方式,您可以使用 $ 代替 jQuery 如果你添加 $ 作为传递给文档就绪函数的参数。 这将允许您将 $ 保留在该函数中包含的 jQuery 代码段中。

WordPress divi主题

这就是它的样子……

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

或者你可以通过 $ 在为 jQuery 使用像这样的简单功能以及文档准备功能……

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

现在我们了解了一些关于如何格式化 JavaScript 片段的最佳实践,让我们探索如何正确地将它们添加到您的 Divi 网站。

使用代码模块将 JavaScript 片段添加到单个页面

如果您希望在 Divi 中将 javascript(或 jquery)片段添加到单个页面,您可以使用代码模块。 这将确保 JS 不会不必要地加载到每个页面上,从而导致页面加载时间在甚至不需要它的页面上略有增加。

这是如何做到的。 首先,在编辑需要 JS 片段的页面时激活 divi builder。 然后,将代码模块添加到您的页面。

divi javascript 片段

该代码将在页面上的任何位置工作,因此您可以自行决定将其放在哪里。

添加代码模块后,粘贴 JavaScript 代码段。 确保将代码包装在 <script> 标记,以便将代码识别为 JavaScript。

divi javascript 片段

不要忘记通过用 <script> 标记,以便将代码识别为 JavaScript。 如果您使用 jQuery,请包含文档就绪功能,以便在文档准备好时加载它。 此外,您将需要使用 jQuery 在您的代码段中而不是速记中 $.

fiverr建站WordPress程序员

就是这样! 您的代码段应按预期在页面上运行。

注意: <script> 标签通常要求您指定脚本的媒体类型,如下所示……

<script type="text/javascript">
</script>

但是,由于“text/javascript”是默认类型,因此在将其用于 JavaScript 代码片段时可以省略它。

使用 Divi 主题选项将 JavaScript 片段添加到所有页面/帖子(不需要子主题)

JavaScript 片段也可以使用主题选项下的 Divi 代码集成选项卡添加到 Divi。 此方法适用于您想要加载到您网站的所有页面/帖子上的 JS 片段。 如果您没有子主题,或者如果您只有几个 JS 片段需要添加到您的 Divi 站点并且不想将它们包含在外部 JS 文件中,这也是一个不错的选择。

要查找代码集成部分,请导航到 Divi > 主题选项,然后单击集成选项卡。

独立站选品工具

divi javascript 片段

找出把你的 JavaScript 片段放在哪里

在那里,您将看到四个区域,您可以将自定义代码添加到您的 Divi 站点。 在大多数情况下,最好将 JS 片段添加到正文中。 这实际上会将您的代码段放在页面底部,以便它在其他所有内容之后加载,这对页面加载速度很有帮助。 在某些情况下,您可能希望将代码添加到头部,以便代码可以更快地加载(或者如果您的文档依赖于更快地运行的 JavaScript)。 因此,您必须测试并决定最佳选择,以实现性能、时间和功能的最佳平衡。

例如,您可能有一个 jQuery 代码片段,它为您的标题添加样式。 在这种情况下,您不希望将其加载到正文中(在页面末尾),因为在读取片段之前,标题最初会在没有该样式的情况下加载。 这会让你的首屏在短时间内对访客来说看起来很丑陋。 但是,如果您将其加载到头部,则样式不会出现延迟。

如果您的代码仅适用于博客文章,您也可以选择将 JS 片段添加到文章底部。 这将防止代码不必要地加载到其他页面上。

divi javascript 片段

高质量外链购买

代码集成区域会将代码直接添加到您的页面,因此您需要使用 <script> 标签。

divi javascript 片段

从单独的 JS 文件将 JS 片段添加到 Divi(使用子主题)

始终建议为您的 Divi 网站使用子主题。 一旦您正确设置了子主题,您还可以合并一个 JS 文件,该文件可用于保存您的自定义 JS 片段。
这绝对是在 WordPress 网站中处理 javascript 的首选方式,它也适用于 Divi。

在您的子主题中创建 JS 文件

设置 Divi 子主题总是一个好主意,特别是如果您打算更改主题文件。 创建 Divi 子主题后,您可以轻松地创建一个 JavaScript 文件,您可以在其中将所有 JS 片段放在一个地方。

这是如何做到的。

JasperAI 10000字免费额度试用

创建一个 JavaScript 文件并将其添加到您的子主题文件夹

使用代码编辑器创建一个新文件并将其保存为 JavaScript 文件。 例如,如果您将文件保存为名为“scripts”的“js”类型,则完整的文件名将是“scripts.js”。 这是您将要添加到 Divi 的所有 js 片段添加的地方。 您不需要将片段包装在 <script> 标记,因为文件保存为 js 文件。

divi javascript 片段

创建文件后,您需要将其添加到您的子主题文件夹中。 我喜欢创建一个 js 文件夹来保存我的自定义 js 文件以便更好地组织。 为此,只需在子主题文件夹的根目录下创建一个名为“js”的新文件夹,并将“scripts.js”文件添加到该文件夹​​。

divi javascript 片段

在子主题的 Functions.php 文件中排队脚本

现在我们需要将 js 文件排入队列,以便将其加载到 Divi 中。 如果你已经创建了一个子主题,你应该已经创建了一个 functions.php 文件,你已经将子主题的 style.css 文件排入队列,它应该看起来像这样……

WordPress备份工具updrafplus
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

现在您需要对新的 js 文件执行相同的操作。 为此,您需要将以下代码段添加到函数中。

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

将 style.css 和 scripts.js 文件排入队列所需的最终代码如下所示……

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

最后的想法

如果您是网页设计新手或刚开始使用 Divi,您可能不熟悉 JavaScript 或如何将其添加到您的网站。 希望这篇文章有助于为您指明正确的方向,并提供一些即使是经验丰富的 Web 开发人员也能欣赏的最佳实践。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题