很多 WordPress 开发人员，会使用下面的 JavaScript 文件调用代码：
<script src="<?php site_url(); ?>/wp-conteht/themename/dist/main.js"></script>虽然这样很简单，也很容易理解。但是，Wordpress 官方推荐使用 wp_enqueue_script() 来加载 JavaScript 文件。
基础知识
要理解 wp_enqueue_script() 函数是如何工作的，我们先看看 wp_head() 和 wp_footer() 函数。它们被放置在 WordPress 主题的 header.php 和 footer.php 中，如下所示：
<!doctype html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<div class="main"></div>
<footer class="main-footer"></footer>
<?php wp_footer(); ?>
</body>我们可以通过 wp_head 和 wp_footer 钩子，在 使用 wp_head() 和 wp_footer() 函数的地方输出特定的内容。举个例子：
<?php
// functions.php
function hello_world_comment() {
echo "<!-- Hello world -->"
}
add_action( 'wp_head', 'hello_world_comment', 100 );会在调用 wp_head() 函数的地方显示<!-- Hello world --> 。
我们当然可以用这样的方法来调用 JavaScript 文件：
<?php
// functions.php
function main_js_to_wp_footer() {
echo '<script src="' . site_url(); . '/wp-conteht/themename/dist/main.js"></script>';
}
add_action( 'wp_footer', 'main_js_to_wp_footer', 100 );但是，官方推荐我们使用的方式是通过 wp_enqueue_script() 函数。
wp_enqueue_script()函数
wp_enqueue_script() 作为 wp_head 和 wp_footer 过滤器的附加层 。使用 wp_enqueue_script() 的主要好处是：
- 可以为加载的脚本设置依赖项，例如，可以将 jquery 添加为 main.js 的依赖项
- 可以使用 wp_localize_script 将数据从 PHP 传递到 JavaScript
wp_enqueue_script() 的工作方式如下：
<?php
// functions.php
function wpa_enqueue_scripts() {
wp_enqueue_script( 'wpa-main-js', get_theme_file_uri( 'dist/scripts/main.js' ), [], null, true );
}
add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts', 100 );它将类似这样的内容输出到 wp_footer() 中：
<script src="https://www.example.com/wp-conteht/themename/dist/main.js"></script>我们在这里使用 wp_enqueue_scripts 钩子，它将脚本加载到网站的主题中。 如果想将脚本加载到 wp-admin 后台，可以使用 admin_enqueue_scripts 钩子。
我们看到上述 wp_enqueue_script() 示例中，有两个参数分别为 'wpa-main-js' 和 true 。
第一个参数是句柄，可以将其视为要调用的 JavaScript 文件的文件名。当想添加一些依赖项时，可以使用这个参数。例如，如果要在文件中使用 jquery，则可以将 ['jquery']传入依赖项。或者，可以将带有句柄的文件排入队列'first'，然后将其用作第二个文件'second'的依赖项，如下所示：
<?php
// functions.php
function wpa_enqueue_scripts() {
wp_enqueue_script( 'first', get_theme_file_uri( 'dist/scripts/first.js' ), [], null, true );
wp_enqueue_script( 'second', get_theme_file_uri( 'dist/scripts/main.js' ), ['first'], null, true );
}
add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts', 100 );最后一个参数决定 JavaScript 文件是在放置在 wp_head() 还是 wp_footer() 中。False 表示在页头，true 表示在页脚。
小提示
JS文件时间戳
浏览器会缓存JavaScript文件，有时候更新了文件，但是浏览器依然加载缓存中的 JavaScript 文件。我们可以使用 js 文件的时间戳来避免这种情况的发生：
<?php
// functions.php
function wpa_enqueue_scripts() {
wp_enqueue_script( 'wpa-main-js', get_theme_file_uri( 'dist/scripts/main.js' ), [], filemtime( get_theme_file_path( 'dist/scripts/main.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts', 100 );css 文件也可使用 wp_enqueue_style() 函数
WordPress 还有一个与 wp_enqueue_script() 几乎相同的函数 wp_enqueue_style() ，它可以调用 CSS 样式表文件。例子：
<?php
// functions.php
function wpa_enqueue_styles() {
wp_enqueue_style( 'wpa-main-css', get_theme_file_uri( 'dist/styles/main.css' ), [], filemtime( get_theme_file_path( 'dist/styles/main.css' ) ) );
}
add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts', 100 );作者：牛奇网，本站文章均为辛苦原创，在此严正声明，本站内容严禁采集转载，面斥不雅请好自为之，本文网址：https://www.niuqi360.com/wordpress/loading-javascript-files-in-wordpress/
