了解 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 函数用于将脚本加载到您的 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。

    <?php wp_enqueue_script('myscript', content_url('/myTheme/js/myScript.js'__FILE__)); // content_url ?>
    
    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__); // bloginfo("template_url") ?>
    
    <?php wp_enqueue_script('myscript', get_template_directory_uri().'/js/myScript.js'__FILE__); // get_template_directory_uri() ?>
    
    <?php wp_enqueue_script('myscript', plugins_url('/myPlugin/js/myScript.js'__FILE__)); // plugins_url ?>
    

  • 如果您从另一台服务器加载脚本。例如，从 Google CDN 加载 jQuery 库。您只需输入要加载的文件的 URL 即可。

    <?php wp_enqueue_script('myscript', 'https://www.url/of/file/script.js'__FILE__); ?>
    

  • 这是可选的
  • 默认值：假
• $deps
  • 这是一个处理任何脚本依赖项的数组。例如，您的 fade.js 脚本需要 jQuery 才能运行。此参数会将您的脚本关联到 jQuery 库。
  • 如果您不想使用此参数，但想使用其他参数，请使用“false”。

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '3.1' ); ?>
    

  • 必须首先加载所需的脚本。
  • 您使用数组所需的脚本句柄。

    <?php 
    wp_enqueue_script('jquerylib', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquerylib'));
    ?>
    

  • 这是可选的
  • 默认：数组()
• $ver
  • 这是您的脚本的版本。
  • 版本作为查询字符串连接到路径的末尾。版本可以是版本号、false 或 NULL。
  • 如果您使用 false 作为版本。将使用 WordPress 版本。
  • 如果使用 NULL。什么都不会被用作版本。 WordPress 函数参考不建议这样做。
  • 如果不使用$ver参数，则默认使用WordPress版本。

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
    

  • 这是可选的
  • 默认值：假
• $in_footer
  • 这将决定您的脚本在页面上的位置。
  • 此参数是一个布尔值（“true”或“false”）
  • 默认情况下，您的脚本将放置在 中，但最好将其放置在 标记结束之前。这是通过将“true”传递给参数来完成的。

    <?php
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false ); // placed in the head
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', true ); // placed before body close tag
    ?>
    

  • 这是可选的
  • 默认值：假

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

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

<?php wp_enqueue_script('jquery'); ?>

有关内置 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 将脚本排队。

    <?php
    wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false );
    wp_enqueue_script('myscript');
    ?>
    

• wp_deregister_script
  • wp_deregister_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

    <?php wp_deregister_script('myscript'); ?>
    

• wp_deregister_script
  • wp_dequeue_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

    <?php wp_dequeue_script('myscript'); ?>
    

加载脚本

加载脚本的最简单方法是将 wp_enqueue_script 放置在页面上您想要的任何位置。

<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>

足够简单，只是不太优雅。更好的方法是使用 function.php 文件来加载脚本。为此，您需要创建一个自定义函数。然后使用 add_action 来初始化您的函数。

<?php 
function load_my_scripts() {
	wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0', true );
	wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>

• 第 2 行创建一个名为 load_my_scripts 的函数
• 第 3 行注册脚本 myscript
• 第 4 行将脚本 myscript 排入队列
• 第 6 行初始化函数 load_my_scripts

我们刚刚加载的脚本需要当前版本的 jQuery 才能运行，因此让我们注销 WordPress 附带的默认版本，并将新版本添加到我们的函数中。

<?php 
function load_my_scripts() {
	wp_deregister_script( 'jquery' );
	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
	wp_enqueue_script('jquery');
	wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array("jquery"), '1.0', true );
	wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>

• 第 2 行取消注册 WordPress 附带的默认 jQuery
• 第 3 行注册另一个版本的 jQuery
• 第 4 行将脚本 myscript 排入队列

好的，WordPress 编码的良好实践表明我们需要在运行函数之前检查它是否存在。这样就完成了。

<?php 
if (function_exists('functionName')) {
}
?>

这会检查您的函数是否已存在。如果不存在，它将运行您的函数。

让我们将其添加到我们的 load_my_scripts 函数

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    }
}
add_action('init', 'load_my_scripts');
?>

现在，如果您转到管理页面，您不希望加载脚本。它可能会导致冲突并破坏管理页面。一般的经验法则是您不希望自定义脚本加载到管理页面中。插件脚本则是另一回事。我稍后会再讨论这个问题。

我们将使用 !is_admin() 检查加载的页面是否不是管理页面。如果不是，我们的脚本将加载。

<?php 
if (!is_admin()) {
}
?>

现在函数看起来像这样。

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
    	if (!is_admin()) {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    	}
    }
}
add_action('init', 'load_my_scripts');
?>

给你。一个很好的模板，供您使用来将脚本排入队列

---

为您的插件使用排队脚本

好的，既然你已经记下来了。让我们添加一个仅在插件的管理页面上加载的脚本。

其实很简单。只需在插件文件中编写脚本函数，就像我们在上一节中所做的那样。只是现在不要在 add_action 中使用“init”，而是使用“admin_init”。

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
    	if (!is_admin()) {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    	}
    }
}
add_action('admin_init', 'load_my_scripts');
?>

就是这样，现在您的脚本只会在您进入插件的管理页面时加载。

---

结论

我希望这将帮助您更好地理解 WordPress 中的入队脚本，因此现在您可以走出去并加载一些您自己的脚本！

如果有任何不明白或想继续阅读的内容。我建议访问 WordPress Codex。这里还列出了一些其他相关的法典链接：

• 函数参考/wp 入队脚本
• 函数参考/wp注册脚本
• 函数参考/wp注销脚本
• 函数参考/wp出队脚本

以上是了解 WordPress 主题和插件的排队脚本的详细内容。更多信息请关注PHP中文网其他相关文章！