在WordPress中,wp_enqueue_style()
和 wp_enqueue_script()
是用于注册和排队(enqueue)样式表和脚本的函数。以下是正确使用这些函数的步骤:
使用 wp_enqueue_style()
注册和排队样式表
- 在主题的
functions.php
文件中添加以下代码:
function my_theme_enqueue_styles() {
// 注册样式表
wp_register_style('my-theme-style', get_stylesheet_uri());
// 排队样式表
wp_enqueue_style('my-theme-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
这里,get_stylesheet_uri()
通常返回当前主题的样式表路径。wp_register_style()
用于注册样式表,而 wp_enqueue_style()
用于实际将样式表添加到页面上。
- 如果需要添加额外的样式表,可以这样做:
function my_theme_enqueue_styles() {
// 注册并排队主题样式表
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
// 注册并排队额外的样式表
wp_enqueue_style('additional-style', get_template_directory_uri() . '/css/additional-style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
在这里,get_template_directory_uri()
返回当前主题的路径,可以用来指定额外的样式表文件。
使用 wp_enqueue_script()
注册和排队脚本
- 在主题的
functions.php
文件中添加以下代码:
function my_theme_enqueue_scripts() {
// 注册脚本
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-theme.js', array('jquery'), null, true);
// 排队脚本
wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
在这里,get_template_directory_uri()
同样用于获取当前主题的路径,后面跟上脚本的相对路径。array('jquery')
表示这个脚本依赖于 jQuery,因此 jQuery 将在它之前加载。null
是脚本的版本号,可以用来强制浏览器加载最新版本的脚本。true
表示脚本应该被放在页面的底部。
- 如果脚本需要使用 WordPress 提供的本地化数据,可以这样添加:
function my_theme_enqueue_scripts() {
// 注册脚本
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-theme.js', array('jquery'), null, true);
// 本地化脚本
$translation_array = array(
'some_string' => __('Some string', 'my-theme'),
'a_value' => '10'
);
wp_localize_script('my-theme-script', 'my_theme_script_obj', $translation_array);
// 排队脚本
wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
在这里,wp_localize_script()
用于将 PHP 变量传递给 JavaScript。
注意事项:
- 确保
wp_enqueue_style()
和wp_enqueue_script()
在wp_enqueue_scripts
动作钩子下被调用。 - 如果你的脚本或样式依赖于其他脚本或样式,确保在注册时正确设置了依赖关系。
- 避免在主题中直接使用
<script>
或<link>
标签来加载脚本和样式表,因为这不符合 WordPress 的最佳实践。