在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个用于注册和加载脚本和样式的函数。以下是使用这两个函数的正确步骤:
加载样式(CSS)
- 注册样式:首先,你需要注册你的样式文件,这样WordPress才知道要加载哪个文件。
function my_theme_enqueue_styles() {
wp_register_style('my-theme-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
- 加载样式:然后,在
wp_enqueue_scripts
动作钩子中,你可以使用wp_enqueue_style()
来加载之前注册的样式。
function my_theme_enqueue_styles() {
wp_register_style('my-theme-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('my-theme-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
加载脚本(JavaScript)
- 注册脚本:首先,你需要注册你的脚本文件。
function my_theme_enqueue_scripts() {
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
- 加载脚本:然后,在
wp_enqueue_scripts
动作钩子中,你可以使用wp_enqueue_script()
来加载之前注册的脚本。
function my_theme_enqueue_scripts() {
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);
wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
注意事项:
- 依赖关系:在注册和加载脚本时,你可以指定依赖关系。例如,如果你的脚本依赖于jQuery,你应该在数组中包含
'jquery'
。 - 版本号:版本号是可选的,但它可以帮助浏览器确定是否需要重新加载文件。
- 在footer中加载:如果你想在页面的底部加载脚本,你应该将
wp_enqueue_script()
的最后一个参数设置为true
。 - 条件加载:在某些情况下,你可能只希望在特定页面上加载脚本或样式。你可以使用条件语句来检查当前页面的信息,然后决定是否加载。
以下是一个完整的示例,展示了如何在WordPress中同时加载样式和脚本:
function my_theme_enqueue_styles_and_scripts() {
// 注册样式
wp_register_style('my-theme-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all');
// 加载样式
wp_enqueue_style('my-theme-style');
// 注册脚本
wp_register_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);
// 加载脚本
wp_enqueue_script('my-theme-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_and_scripts');
将上述代码放入你的主题的 functions.php
文件中,它将在前端加载指定的样式和脚本。