在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个用于注册和加载JavaScript脚本和CSS样式表的函数。以下是使用这些函数的正确步骤:
加载JavaScript脚本
- 注册脚本(可选,但推荐):
使用wp_register_script()
函数注册脚本,这样可以在加载之前设置一些参数。
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
$handle
:脚本的唯一标识符。$src
:脚本文件的URL。$deps
(可选):此脚本依赖的其他脚本,以数组形式传递。$ver
(可选):脚本版本号,用于缓存。$in_footer
(可选):布尔值,指示是否在页面的底部加载脚本。
- 加载脚本:
使用wp_enqueue_script()
函数在页面上加载已注册的脚本。
wp_enqueue_script( $handle );
$handle
:注册脚本时使用的唯一标识符。
加载CSS样式表
- 注册样式表(可选,但推荐):
使用wp_register_style()
函数注册样式表。
wp_register_style( $handle, $src, $deps, $ver, $media );
$handle
:样式表的唯一标识符。$src
:样式表的URL。$deps
(可选):此样式表依赖的其他样式表,以数组形式传递。$ver
(可选):样式表版本号,用于缓存。$media
(可选):样式表适用的媒体类型,如 'all', 'screen', 'print' 等。
- 加载样式表:
使用wp_enqueue_style()
函数在页面上加载已注册的样式表。
wp_enqueue_style( $handle );
$handle
:注册样式表时使用的唯一标识符。
示例代码
以下是一个示例,展示了如何在WordPress中注册和加载一个JavaScript脚本和一个CSS样式表。
function my_theme_enqueue_scripts() {
// 注册一个JavaScript脚本
wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0.0', true );
// 注册一个CSS样式表
wp_register_style( 'my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all' );
// 加载JavaScript脚本
wp_enqueue_script( 'my-custom-script' );
// 加载CSS样式表
wp_enqueue_style( 'my-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
在这个示例中,my_theme_enqueue_scripts
函数被绑定到 wp_enqueue_scripts
动作钩子上,这个钩子在WordPress准备加载前端脚本和样式表时触发。确保你的脚本和样式表在正确的位置,并且使用正确的路径。