在WordPress中,使用wp_enqueue_script()
和wp_enqueue_style()
函数可以方便地注册和加载脚本和样式。以下是如何使用这些函数的步骤:
注册和加载样式(CSS)
- 注册样式 - 使用
wp_register_style()
函数注册一个样式文件,这样你可以在之后任何地方加载它。
function my_theme_enqueue_styles() {
wp_register_style('my-theme-style', get_stylesheet_uri(), array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
- 加载样式 - 使用
wp_enqueue_style()
函数实际加载样式文件。
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
注册和加载脚本(JavaScript)
- 注册脚本 - 使用
wp_register_script()
函数注册一个脚本文件。
function my_theme_enqueue_scripts() {
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
- 加载脚本 - 使用
wp_enqueue_script()
函数实际加载脚本文件。
function my_theme_enqueue_scripts() {
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
注意事项
wp_enqueue_scripts
是WordPress在页面上输出脚本和样式时使用的钩子。get_stylesheet_uri()
和get_template_directory_uri()
分别用于获取当前主题的样式表路径和模板目录路径。- 在
wp_enqueue_script()
和wp_enqueue_style()
中,第三个参数是一个依赖数组。例如,如果你的脚本依赖于jQuery,你应该在数组中包含'jquery'。 - 最后一个参数(对于脚本)是一个布尔值,表示脚本是否应该放在页面的底部(在
</body>
标签之前)。 - 版本号(第四个参数)用于缓存管理,当文件更新时,你应该更新这个版本号以强制浏览器加载新版本。
示例:完整的函数
function my_theme_enqueue_scripts() {
// 注册样式
wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), '1.0', 'all');
// 注册脚本
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
// 如果你的脚本需要一些本地化数据,你可以使用以下代码
$translation_array = array(
'some_string' => __('Some string', 'my-theme'),
'a_value' => '10'
);
wp_localize_script('my-theme-script', 'object_name', $translation_array);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
在这个示例中,我们注册并加载了主题样式和脚本,并使用wp_localize_script()
来传递一些PHP变量到JavaScript中。