用wp_enqueue_style和wp_enqueue_script加载CSS和JS

时间：2024-03-17

在制作WordPress主题时，一般我们都是直接在header.php中写入link标签加载CSS样式表，但是，如果我们使用wp_enqueue_style加载样式表的话，可以避免重复加载，也就是说wp_enqueue_style会判断之前有没有加载过同样的样式表，如果已经加载过了就不再重复加载。另外，wp_enqueue_style的依赖功能也非常实用。

wp_enqueue_script和wp_enqueue_style的用法基本相同，加载原理也相同。

先来看一个例子：

function bzg_scripts() {
	wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'bzg-style', get_stylesheet_uri(), array( 'normalize', 'dashicons' ) );
	wp_enqueue_script( 'bzg-js', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bzg_scripts' );

第一行我加载了主题目录下的css/normalize.css样式表；

第二行加载了主题目录下的style.css样式表，同时，指明这个样式表依赖于normalize.css样式表和WordPress的Dashicons图标样式表，这样，WordPress就会为我们先加载normalize.css样式表，再加载Dashicons图标样式表，最后才加载style.css。

第三行加载了主题目录下的js/theme.js文件，同时，指明这个js需要依赖于jQuery库，因此，WordPress会为我们先加载jQuery库，再加载我们的JS文件。

需要说明的是，Dashicons图标样式表和jQuery库都是WordPress自带的，只是使用WordPress的jQuery库，我们需要在JS代码中把$替换为jQuery，例如：

jQuery(document).ready(function(){
	
});

wp_enqueue_style 函数介绍

函数用法：

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

参数解释：

$handle：用于区别CSS的名称，即标识字串；
$src：CSS 的文件 URL；
$deps：非必需，加载的CSS所依赖的其他CSS标识字串数组，即其他CSS的$handle；
$ver：非必需，CSS文件的版本号，留空则使用当前WordPress版本号；
$media：非必需，link标签的media属性值。

wp_enqueue_script函数介绍

函数用法：

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

参数解释：

$handle：用于区别JS的名称，即标识字串；
$src：JS的文件URL；
$deps：非必需，加载的JS所依赖的其他JS标识字串数组，即其他JS的$handle；
$ver：非必需，JS的版本号，留空则使用当前WordPress版本号；
$in_footer：非必需，如果为true，则该JS文件会在页脚加载而不是头部，但WordPress自带的jQuery库仍然会在头部加载。

提示：加载到头部，需要header.php中包含wp_head函数，即：

<?php wp_head(); ?>

同理，加载到页脚需要footer.php包含wp_footer函数。

欢迎咨询/Welcome to inquire

tel/vx:18842938855
qq:1685522781
email:1685522781@qq.com