什么是 WP Enqueue 以及如何使用它？

已发表: 2017-10-28

当您第一次学习 HTML 时，您知道如何插入任何类型的交互的唯一方法是在页面的页眉或页脚中使用脚本标记来设置外部 JavaScript 文件的类型和来源。 （或者，如果你真的只是在学习，那么脚本标签之间的整个 JS 函数就在正文本身。这对学习来说很好，但是一旦你进入高级 WordPress 开发，这是非常糟糕的做法。输入enqueue函数。

一旦你跳过简单的单页网站，那些初学者的做法可能会产生一些非常棘手的情况。 随着您开始添加越来越多的 JavaScript，您的网站会变得越来越慢。 更新它需要更长的时间。 最终，您已经制作了一大堆 JavaScript-getti，无论您多么努力，这堆面条都不会解开。

幸运的是，您可以使用 WordPress 中的入队功能来添加 CMS 为您处理的样式和脚本。 所有的混乱都为你处理。 虽然它不像在每个页面的页眉或页脚中直接粘贴您想要的脚本或样式那么简单，但这是处理它的正确方法。 WordPress 并不是非常固执己见，绝对有一系列您应该了解的最佳实践

wp_enqueue_scripts处于这些实践的最前沿。

有什么大不了的？

您想要使用wp_enqueue 的主要原因是让您的网站平稳快速地运行。 页面速度很重要，一遍又一遍地使用相同的脚本和样式无济于事。 在所有。

幸运的是， wp_enqueue是函数式编程的一个例子。 这意味着您只需编写一段要执行的代码（您的 JavaScript 代码段），然后使用wp_enqueue调用它，而不必在每次需要时重写/粘贴整个代码。

那是。 惊人的。

更棒的是，使用 enqueue 方法使 WordPress 本身自动将 _script_ 标签插入到它们所属的页眉和页脚中，加载它们而无需在每个页面上单独输入它们。

WP 入队语法和参数

排队脚本真的不是那么困难。 如果您一开始就足够精通使用 JavaScript，那么您用于排队的 PHP 函数将是小菜一碟。

在典型的脚本标签中，您要么直接导入外部 .js 文件，要么在标签本身之间粘贴整个长代码片段。 （如果您将某些内容粘贴到 Divi 代码模块或 WP 自定义 HTML 或文本小部件中，这也是您正在执行的操作）。

您只需要了解一些基本参数和语法。

Codex 将此作为基本入队代码： 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

总而言之，按参数分解为可用位非常简单。

  • wp_enqueue_script()是将所有代码放入其所在页面的函数。
  • $handle是脚本本身的唯一名称。
  • $src表示您正在排队的实际 .js 文件的 URL。
  • $deps是这个需要的任何依赖项的$handle s。
  • $ver将是版本号。 如果没有指定，您将自动添加 WP 安装版本。
  • $in_footer或$in_header告诉 WordPress 将脚本放在哪里。

可以在 Codex 中查看将脚本排入队列的完整文档。

学生们注意：WP 注册现在开始！

除了 _wp_enqueue__ 之外，WP 还有一个方便的方法叫做 _wp_register__。 这两种方法都使用相同的参数和语法，所以你真的可以一对一地处理它们。 本质上，注册脚本与在 JavaScript 中命名函数相同。

虽然不是必需的，但注册您的脚本可以让您的生活更轻松，因为您以后不必将它们声明为依赖项。 他们已经被注册了。 因此……_wp_register__。 注册脚本后，您可以通过其$handle回调它，如下面的示例所示。

您将像这样注册您的代码： 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

然后，每当您再次需要它时，您都可以像这样调用它：

wp_enqueue_script( 'jquery' );

此外，注册意味着即使不需要脚本，您也不必加载它。 WPMU 有一个很棒的短代码创建示例：如果您将脚本注册到使用 _wp_enqueue__ 的短代码，它只会在使用短代码时使用。 但是，如果您仅通过排队来调用它，即使不使用短代码，它也会被加载。

您可以在 Codex 中阅读有关该方法的所有信息。

此外，如果插件作者想将脚本包含在 WordPress.org 存储库中，则需要将它们排入队列，因此，如果您愿意的话……最好加入队列。

把它放在一起

实现代码很容易。 只需将如下所示的代码片段放入您的functions.php 中。 其余的由 WordPress 处理。 我的意思是，这是调用 jQuery 的一个非常基本的片段，但是您可以看到这些东西是如何组合在一起的。

您通常会使用如下所示的内容： 

<script type="text/javascript" src="jquery.js"></script>

一旦你学会了如何使用enqueue_scripts_ ，你会看到更像这样的东西： 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

现在，请注意上面的代码中它如何使用add_scripts()_函数，该函数已经是 WordPress 的一部分，以概述接下来几个步骤的顺序。 首先， wp_register_函数获取指定的所有细节并将脚本放在页脚中，然后使用wp_enqueue在一切设置好后最终调用它。

包起来

这就是它的全部内容。 嗯，这不是真的——入队是 WP 的一个根深蒂固的部分。 但这些是让您在 WordPress 上做的事情比以前更多的基础知识。

我们在开始 Web 开发时都学到的关于放入脚本的基础知识仍然有效，但它们并不总是最好的做事方式。 建立在 PHP 上的 WordPress 的部分优点在于，您可以将这种逻辑带入您的工作中，同时仍然真正保持与您本来应该拥有的相同的基本结构和工作流程。

文章缩略图来自 hanss / shutterstock.com