了解 WordPress 主题和插件的排队脚本-tutoriel php-php.cn

了解 WordPress 主题和插件的排队脚本

PHPz

Libérer： 2023-08-30 13:22:01

original

705 人浏览过

了解 WordPress 主题和插件的排队脚本

wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script 函数。如果您以前没有真正使用过它，那么可能会感到困惑...所以今天，我们将深入研究如何使用排队函数将脚本正确加载到您的主题或插件中。

技术和软件的后续更改

自最初发布以来，本教程中使用的应用程序或技术的某些方面已经发生了变化。这可能会让后续操作变得有点困难。我们建议您查看有关同一主题的最新教程：

如何在 WordPress 主题和插件中包含 JavaScript 和 CSS

为什么要使用入队函数？

如果您有基本的 HTML 背景，您可能习惯于直接将 Javascript 文件（包括从 jQuery 到插件脚本的任何内容）直接加载到文档的页眉或页脚中。当您处于像基本 HTML 页面这样的独立环境中时，这很好……但是一旦您引入了可能在 WordPress 安装上运行的无数其他脚本，执行我所说的“人群管理”就会变得更加棘手。使用您的脚本。

那么为什么不在页眉或页脚中加载 JavaScript呢？答案非常简单：通过像这样包含 JavaScript，您将面临在安装过程中与 JavaScript 发生冲突的风险（想想，多个插件试图加载相同的脚本或该脚本的不同版本）。此外，即使您不需要，您的 JavaScript 也会加载到每个页面上。这将导致页面的加载时间不必要地延长，并且可能会干扰其他 JavaScript，例如来自插件或仪表板内的 JavaScript……这在 WP 开发中是不可以的。

通过使用 wp_enqueue_script 函数。您将可以更好地控制加载 JavaScript 的方式和时间。您甚至可以决定是否加载到页眉或页脚中。

了解 wp_enqueue_script 函数

wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php 文件中使用它。

wp_enqueue_script 函数本身非常简单，所以让我们看一下它的结构。

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

$handle
- 这是要加载的脚本的句柄（名称）。应全部小写。
- 这是必需的
- 默认值：无
$scr
- 这是脚本的 URL。
- 如果您从服务器本地加载，则不应在服务器上对脚本的 URL 进行硬编码。主题最好使用 content_url、bloginfo("template_url") 或 get_template_directory_uri() （WordPress 函数参考推荐），插件最好使用 plugins_url。
  Copier après la connexion
- 如果您从另一台服务器加载脚本。例如，从 Google CDN 加载 jQuery 库。您只需输入要加载的文件的 URL 即可。
  Copier après la connexion
- 这是可选的
- 默认值：假
$deps
- 这是一个处理任何脚本依赖项的数组。例如，您的 fade.js 脚本需要 jQuery 才能运行。此参数会将您的脚本关联到 jQuery 库。
- 如果您不想使用此参数，但想使用其他参数，请使用“false”。
  Copier après la connexion
- 必须首先加载所需的脚本。
- 您使用数组所需的脚本句柄。
  Copier après la connexion
- 这是可选的
- 默认：数组()
$ver
- 这是您的脚本的版本。
- 版本作为查询字符串连接到路径的末尾。版本可以是版本号、false 或 NULL。
- 如果您使用 false 作为版本。将使用 WordPress 版本。
- 如果使用 NULL。什么都不会被用作版本。 WordPress 函数参考不建议这样做。
- 如果不使用$ver参数，则默认使用WordPress版本。
  Copier après la connexion
- 这是可选的
- 默认值：假
$in_footer
- 这将决定您的脚本在页面上的位置。
- 此参数是一个布尔值（“true”或“false”）
- 默认情况下，您的脚本将放置在中，但最好将其放置在标记结束之前。这是通过将“true”传递给参数来完成的。
  Copier après la connexion
- 这是可选的
- 默认值：假

如您所见，除了 $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr 参数。 WordPress 如何在没有 url 的情况下找到脚本？

这背后的原因是 WordPress 附带了内置脚本。例如，jQuery 是 WordPress 核心的一部分，WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script。

Copier après la connexion

有关内置 WordPress 脚本及其句柄的完整列表。请查看 WordPress 函数参考。

在您的 WordPress 主题中使用排队脚本

现在您已经了解了 wp_enqueue_script 的各个部分。让我们看看您如何在 WordPress 主题中实际使用它。

要事第一

在开始正确排列脚本之前，您还需要了解其他 WordPress 函数。

wp_register_script
- wp_register_script 函数用于向 WordPress 注册您的脚本。这意味着，您将能够为您的脚本使用 wp_enqueue_script ，就像 WordPress 附带的内置脚本一样
- wp_register_script 的参数结构与 wp_enqueue_script 结构完全相同，所以我不再赘述。如果需要，您可以参考上面的部分。
- 只需设置 wp_register_script，就像设置 wp_enqueue_script 一样。然后通过将句柄传递给 wp_enqueue_script 将脚本排队。
  Copier après la connexion
wp_deregister_script
- wp_deregister_script 删除已注册的脚本。
- 您所需要做的就是将句柄传递给它。
  Copier après la connexion
wp_deregister_script
- wp_dequeue_script 删除已注册的脚本。
- 您所需要做的就是将句柄传递给它。
  Copier après la connexion