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

WordPress 和 Divi 做了很多开箱即用的奇妙事情，使我们可以轻松构建网站。 但有时我们需要更高级的功能，而这些功能只能用 JavaScript 来完成。

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

JavaScript 和 jQuery 简述

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

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

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

使用文件准备功能

在大多数情况下，我建议在您的 jQuery 片段中使用$(document).ready() 。 在$(document).ready()添加的任何 JavaScript 将确保在执行 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 代码段中。

这就是它的样子……

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 代码段添加到单个页面

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

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

该代码将在页面上的任何位置工作，因此您可以将其放置在何处。

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

不要忘记通过用<script>标签包裹它来确保你的代码片段被正确编码，以便代码被识别为 JavaScript。 如果您使用 jQuery，请包含文档就绪函数，以便在文档准备就绪时加载它。 此外，您需要在代码片段中使用jQuery而不是简写$ 。

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

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

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

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

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

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

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

找出放置 JavaScript 代码段的位置

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

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

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

代码集成区域会将代码直接添加到您的页面，因此您需要使用<script>标记包装您的代码片段。

从单独的 JS 文件向 Divi 添加 JS 片段（使用子主题）

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

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

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

这是如何做到的。

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

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

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

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

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

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 开发人员也能欣赏的最佳实践。

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

干杯!