在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个用于管理前端脚本和样式表的核心函数。以下是使用这两个函数的基本步骤:
wp_enqueue_script()
这个函数用于将JavaScript脚本文件添加到WordPress的前端页面。
- 注册脚本:首先,你需要注册你的脚本,这样WordPress就知道它存在。
function my_theme_enqueue_scripts() {
// 注册脚本
wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
-
参数解释:
'my-custom-script'
:脚本的唯一标识符。get_template_directory_uri() . '/js/my-script.js'
:脚本文件的路径。array('jquery')
:脚本依赖。在这个例子中,我们的脚本依赖于jQuery。'1.0'
:脚本的版本号。true
:表示脚本应该被放置在页面的底部(在</body>
标签之前)。
-
添加脚本:然后,你可以使用
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', true);
// 添加脚本
wp_enqueue_script('my-custom-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
wp_enqueue_style()
这个函数用于将CSS样式表添加到WordPress的前端页面。
- 注册样式表:首先,你需要注册你的样式表。
function my_theme_enqueue_styles() {
// 注册样式表
wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
-
参数解释:
'my-custom-style'
:样式表的唯一标识符。get_template_directory_uri() . '/css/my-style.css'
:样式表的路径。array()
:样式表依赖。如果没有依赖,可以留空。'1.0'
:样式表的版本号。'all'
:样式表的应用媒体类型。
-
添加样式表:然后,你可以使用
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', 'all');
// 添加样式表
wp_enqueue_style('my-custom-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
确保将上述代码放入你的主题的 functions.php
文件中,或者在你的插件中相应地使用这些函数。使用这些函数时,请确保遵循WordPress的最佳实践,例如只在需要的时候添加脚本和样式表,避免重复加载相同的文件。