在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个非常重要的函数,它们用于将JavaScript脚本和CSS样式表注册并加入到页面的头部或底部。以下是如何使用这两个函数的步骤和示例:
wp_enqueue_script()
这个函数用于注册并添加JavaScript脚本到WordPress页面。
- 注册脚本:在函数
wp_enqueue_scripts
钩子中注册脚本。 - 添加脚本:使用
wp_enqueue_script()
函数。
示例代码:
function my_theme_enqueue_scripts() {
// 注册一个脚本
wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true);
// 在页面上添加已注册的脚本
wp_enqueue_script('my-custom-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
在这个例子中:
'my-custom-script'
是脚本的唯一标识符。get_template_directory_uri() . '/js/my-script.js'
是脚本的URL。array('jquery')
表示这个脚本依赖于jQuery,jQuery必须在它之前加载。'1.0.0'
是脚本的版本号。true
表示脚本应该被添加到页面的底部。
wp_enqueue_style()
这个函数用于注册并添加CSS样式表到WordPress页面。
- 注册样式表:在函数
wp_enqueue_scripts
钩子中注册样式表。 - 添加样式表:使用
wp_enqueue_style()
函数。
示例代码:
function my_theme_enqueue_styles() {
// 注册一个样式表
wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all');
// 在页面上添加已注册的样式表
wp_enqueue_style('my-custom-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
在这个例子中:
'my-custom-style'
是样式表的唯一标识符。get_template_directory_uri() . '/css/my-style.css'
是样式表的URL。array()
是一个空数组,表示这个样式表不依赖于其他样式表。'1.0.0'
是样式表的版本号。'all'
表示样式表适用于所有媒体类型。
确保将上述代码片段添加到您的主题的 functions.php
文件中,或者在一个专门的插件中。这样,当WordPress加载页面时,它会自动调用这些函数,并将指定的脚本和样式表添加到页面上。