如何使用 wp_enqueue_script() 在 WordPress 中加载 JavaScript 文件

如何使用 wp_enqueue_script() 在 WordPress 中加载 JavaScript 文件
如何使用 wp_enqueue_script() 在 WordPress 中加载 JavaScript 文件

很多 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/

发表评论

登录后才能评论