Learn about queuing scripts for WordPress themes and plugins

The

wp_enqueue_script function is the best solution for loading JavaScript files into your WordPress site. If you are developing a theme that uses JavaScript or a JavaScript library, you can use the wp_enqueue_script function. It can be confusing if you haven't really used it before... so today we're going to dig into how to use queued functions to properly load scripts into your theme or plugin.

Subsequent changes to technology and software

Some aspects of the applications or techniques used in this tutorial have changed since the original publication. This may make subsequent steps a little difficult. We recommend you check out the latest tutorials on the same topic:

• How to include JavaScript and CSS in WordPress themes and plugins

Why use the enqueue function?

If you have a basic HTML background, you're probably used to loading Javascript files (including anything from jQuery to plugin scripts) directly into the header or footer of your document. This is fine when you're in a standalone environment like a basic HTML page... but once you introduce the myriad of other scripts that may be running on your WordPress installation, it becomes trickier to perform what I call "crowd management" . Use your script.

So why not load JavaScript in the header or footer? The answer is very simple: by including JavaScript like this, you run the risk of conflicting with the JavaScript during installation (think, multiple plugins trying to load the same script or different versions of that script). Additionally, your JavaScript will be loaded on every page even if you don't need it. This will cause the page to take longer to load unnecessarily and may interfere with other JavaScript, such as from plugins or within the dashboard... which is a no-no in WP development.

By using the wp_enqueue_script function. You'll have more control over how and when JavaScript is loaded. You can even decide whether to load into the header or footer.

---

Understanding wp_enqueue_script Function

The

wp_enqueue_script function is used to load a script into your WordPress site. You would typically use this in the functions.php file.

wp_enqueue_script The function itself is very simple, so let's take a look at its structure.

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

• $handle
  • This is the handle (name) of the script to load. Should be all lowercase.
  • This is required
  • Default value: None
• $scr
  • This is the URL of the script.
  • If you are loading locally from the server, you should not hardcode the script's URL on the server. It is best to use content_url, bloginfo("template_url") or get_template_directory_uri() (WordPress function reference recommendation) for themes, and for plugins 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 ?>
    

  • If you load the script from another server. For example, load the jQuery library from Google CDN. All you need to do is enter the URL of the file you want to load.

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

  • This is optional
  • Default value: false
• $deps
  • This is an array that handles any script dependencies. For example, your fade.js script requires jQuery to run. This parameter links your script to the jQuery library.
  • If you don't want to use this parameter, but want to use other parameters, use "false".

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

  • The required scripts must be loaded first.
  • The script handle you need to use the array.

    <?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'));
    ?>
    

  • This is optional
  • Default: array()
• $ver
  • This is the version of your script.
  • The version is concatenated to the end of the path as the query string. version can be a version number, false, or NULL.
  • If you use false as version. The WordPress version will be used.
  • If using NULL. Nothing will be used as a version. The WordPress Function Reference does not recommend this.
  • If the $ver parameter is not used, the WordPress version will be used by default.

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

  • This is optional
  • Default value: false
• $in_footer
  • This will determine the position of your script on the page.
  • This parameter is a boolean value ("true" or "false")
  • By default your script will be placed in , but it is best to place it before the end of the tag. This is done by passing "true" to the parameter.

    <?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
    ?>
    

  • This is optional
  • Default value: false

As you can see, all parameters except $handle are optional. This may seem strange at first glance. Especially the $scr parameter. How does WordPress find a script without a 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出队脚本

The above is the detailed content of Learn about queuing scripts for WordPress themes and plugins. For more information, please follow other related articles on the PHP Chinese website!