使用入队将脚本和样式正确添加到 WordPress

我们中的许多人使用样式来改变我们网站的外观，并使用脚本来增强功能。 然而，重要的是要注意，将这些脚本添加到 WordPress 的方式与这些文件的内容一样重要。 我们需要使用 WordPress 的排队功能，而不是将它们放入页眉或页脚文件中。

在本文中，我将向您展示如何将脚本和样式添加到您的主题和插件中，无论您是在前端还是在后端创建内容。

我们将介绍：

• 什么是排队
• 排队：底线
• 正确入队资产
• 详细排队
• 资产登记
• 删除脚本和样式

什么是入队？

Enqueueing 是一种向 WordPress 网站添加脚本和样式的 CMS 友好方式。 您拥有的多个插件可能会使用 jQuery 和其他共享脚本。 如果每个插件都单独链接到这些资产，就会出现混乱，你的所有 JavaScript 都可能停止工作。

通过将脚本排入队列，您可以告诉 WordPress 您要添加的资产，它会负责在页眉和页脚中实际链接到它们。 您甚至可以指定脚本和样式的依赖关系，WordPress 会以正确的顺序添加它们。

它从核心、主题和插件所需的内容中获取所有信息，创建所需的脚本和样式列表，并将它们输出到正确的位置。

排队：底线

无论您如何附加资产，最终结果都将是 <script> 或一个 <link> 在您网站的 HTML 中的某处标记。 下面的示例显示了在网站上加载的三个脚本和两种样式：

在功能方面，这非常好，但我们不要忘记 WordPress 的任务比我上面展示的要多一点。 可能还有其他一些脚本和样式。 由于您包含脚本和样式的顺序很重要，如果您只是开始将它们放在主题的页眉或页脚中，您可能很快就会迷失方向。

此外，这些脚本中的大多数在您的主题的 PHP 代码中不可见。 WordPress 和其他插件需要的所有脚本都通过 wp_head() 和 wp_footer() 职能。

正确地将资产入队

入队是一种让 WordPress 了解您的脚本及其依赖项的方法。 基于此，WordPress 会为您确定脚本的位置。 由于这一切都是由代码完成的，因此当您需要添加新脚本时，您不必担心重新排列脚本。 让我们浏览上一节中的脚本，通过入队添加它们：

这段代码应该放在 functions.php 我们的主题、子主题或插件文件的文件。 请注意，脚本和样式都通过将函数附加到 wp_enqueue_scripts 钩。

我排队的前两件事是我们的风格。 我首先定义了我们的主题风格，尽管它取决于重置风格。 这不是问题，因为我在第三个参数中定义了这个依赖关系。 第一个参数是资产的唯一名称，第二个参数是它的位置。

我添加的第三个资产是出色的 Owl Carousel。 在第三个参数中，我将 jQuery 指定为依赖项。 我不需要自己排队，因为它是内置在 WordPress 中的。 查看 WordPress Codex 以获取包含的脚本列表。

最后，我包含了主题脚本。 我们的脚本依赖于 jQuery 和 Owl Carousel。 实际上，您只需将 Owl Carousel 定义为依赖项即可。 由于 jQuery 是 Owl Carousel 的依赖项，因此无论如何它都会被包含在它之前。 也就是说，我喜欢完整地陈述我的依赖关系，它在查看代码时为我提供了更多信息。

最后一个难题是确保我们的主题脚本加载到页脚中。 这可以通过将第五个参数定义为 true. 第四个参数是可选的版本号，我设置为 1.0。

详细排队

现在您已经看到了一个示例，让我们动手看看所有可用的函数和参数。

我们使用了两个函数： wp_enqueue_script() 和 wp_enqueue_style(). 它们都采用五个参数，共享前四个：

• 处理： 这是您的脚本或样式的名称。 最好只使用小写字母和破折号，并确保使用唯一的名称。
• 资源： 您的脚本或样式的 URL。 确保使用 get_template_directory_uri() 或 plugins_uri() 等函数。
• 依赖项： 您的脚本或样式所依赖的资产句柄数组。 这些将在您的排队脚本之前加载。
• 版本： 将附加到查询的版本号。 这可确保用户接收到正确的版本，而不管缓存如何。
• in_footer： 此参数仅适用于脚本。 如果设置为 true，脚本将通过页面底部的 wp_footer() 加载。
• 媒体： 此参数用于样式，它允许您指定应显示样式的媒体类型。 例如：屏幕、打印、手持等。

希望参数的解释使我们在上一节中的示例更加清晰。 您现在可以开始使用自己的样式和脚本。

资产登记

添加资产实际上有两个步骤，但入队功能可以一次性完成。 从技术上讲，脚本和样式首先被注册，然后入队。 注册让 WordPress 了解您的资产，而排队实际上将它们添加到页面中。 这是添加 Owl Carousel 的另一种方法：

那么，当一个就足够时，为什么要分两步进行呢？ 答案是，在某些情况下，您不会在将脚本加入队列的同一位置注册脚本。 一个很好的例子是短代码。 假设您创建的短代码需要一些 Javascript。 如果您通过将其附加到 wp_enqueue_scripts 钩子它将在每个请求上加载，即使不使用短代码。

答案是使用 wp_enqueue_scripts 钩子，但将其排入短代码函数中。 只有在实际使用短代码时才会加载它。 如果多次使用短代码，则脚本只会包含一次，因此我们已经涵盖了所有基础。

这 wp_register_scripts() 和 wp_register_styles() 函数与其排队的兄弟共享相同的参数。 唯一的区别是入队函数只允许您指定句柄，只要该句柄已注册。

删除脚本和样式

WordPress 为脚本和样式提供出列和取消注册功能。

• wp_deregister_script()
• wp_deregister_style()
• wp_dequeue_script()
• wp_dequeue_style()

这些功能允许我们模块化地移除资产。 以下示例显示了如何轻松删除 jQuery 并将其替换为更新的版本。

话虽如此，用新版本替换 jQuery 几乎从来都不是一个好主意。 WordPress 的构建是为了尽可能顺利地使用默认添加的版本。 更换它不应该掉以轻心。

加起来

希望您现在明白为什么入队是一个如此重要的过程。 它减轻了依赖项维护的负担，并允许您以模块化和可管理的方式添加脚本。

所有 WordPress 插件和主题都需要排队。 没有它，您的产品（免费或高级）将不会被 WordPress 存储库和许多高级市场接受。 它构成了“与他人相处融洽”的基础，每个开发者都应该遵循。