在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个非常重要的函数,它们用于将JavaScript脚本和CSS样式表注册并加入到页面的头部或底部。以下是如何使用这两个函数的步骤和示例:
wp_enqueue_script()
这个函数用于将JavaScript脚本文件添加到WordPress页面中。
- 注册脚本:
在注册脚本时,通常在wp_enqueue_scripts
动作钩子中调用wp_register_script()
。
function my_theme_enqueue_scripts() {
// 注册脚本
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
- 引入脚本:
使用wp_enqueue_script()
来引入已注册的脚本。
function my_theme_enqueue_scripts() {
// 注册脚本
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
// 引入脚本
wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
参数说明:
$handle
: 脚本的唯一标识符。$src
: 脚本的URL。$deps
: 依赖的脚本数组,例如jQuery。$ver
: 脚本版本号,可以设置为文件修改时间戳或版本号。$in_footer
: 是否在页面的底部加载脚本,布尔值。
wp_enqueue_style()
这个函数用于将CSS样式表添加到WordPress页面中。
- 注册样式表:
在注册样式表时,同样在wp_enqueue_scripts
动作钩子中调用wp_register_style()
。
function my_theme_enqueue_styles() {
// 注册样式表
wp_register_style('my-theme-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
- 引入样式表:
使用wp_enqueue_style()
来引入已注册的样式表。
function my_theme_enqueue_styles() {
// 注册样式表
wp_register_style('my-theme-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all');
// 引入样式表
wp_enqueue_style('my-theme-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
参数说明:
$handle
: 样式表的唯一标识符。$src
: 样式表的URL。$deps
: 依赖的样式表数组。$ver
: 样式表版本号。$media
: 样式表适用的媒体类型,例如all
、screen
、print
等。
注意事项
- 确保
wp_enqueue_script()
和wp_enqueue_style()
在wp_enqueue_scripts
动作钩子中调用。 - 使用版本号可以帮助浏览器缓存文件,当文件更新时,只需更改版本号即可让浏览器加载新文件。
- 如果有多个脚本或样式表,确保正确设置依赖关系(
$deps
参数)。 - 如果脚本需要在页面的底部加载,确保将
$in_footer
参数设置为true
。