在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个非常重要的函数,它们用于在主题或插件中注册、排队和加载JavaScript脚本和CSS样式表。以下是如何使用这两个函数来管理主题中的脚本和样式的基本步骤:
1. 注册脚本和样式
首先,你需要注册你的脚本和样式。这通常在 functions.php
文件中完成。
注册一个JavaScript脚本:
function my_theme_scripts() {
wp_register_script( 'my-theme-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
这里,my-theme-script
是脚本的唯一标识符,get_template_directory_uri() . '/js/my-script.js'
是脚本的路径,array( 'jquery' )
表示这个脚本依赖于jQuery,'1.0.0'
是脚本的版本号,true
表示脚本应该放在页面的底部。
注册一个CSS样式表:
function my_theme_styles() {
wp_register_style( 'my-theme-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
这里,my-theme-style
是样式表的唯一标识符,get_template_directory_uri() . '/css/my-style.css'
是样式表的路径,array()
表示这个样式表没有依赖,'1.0.0'
是样式表的版本号,'all'
表示样式适用于所有设备。
2. 排队脚本和样式
注册脚本和样式后,你可以使用 wp_enqueue_script()
和 wp_enqueue_style()
将它们排队到WordPress的前端。
排队JavaScript脚本:
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'my-theme-script' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
排队CSS样式表:
function my_theme_enqueue_styles() {
wp_enqueue_style( 'my-theme-style' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
3. 使用条件标签来排队特定页面的脚本和样式
有时你可能只想在某些页面上加载脚本或样式。你可以使用WordPress的条件标签来实现这一点。
function my_theme_enqueue_scripts() {
if ( is_page( 'about' ) ) {
wp_enqueue_script( 'my-theme-script' );
}
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
在这个例子中,my-theme-script
只会在“关于”页面上加载。
注意事项:
- 确保
wp_enqueue_script()
和wp_enqueue_style()
在wp_enqueue_scripts
动作钩子中被调用。 - 如果你的脚本或样式依赖于其他脚本或样式(例如jQuery),确保在注册时指定依赖关系。
- 使用版本号可以帮助浏览器缓存管理,当文件更新时,只需更改版本号即可刷新缓存。
通过以上步骤,你可以有效地管理WordPress主题中的脚本和样式。