在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
是两个非常关键的函数,用于在网站的前端加载JavaScript脚本和CSS样式表。以下是如何使用这些函数来管理脚本和样式的基本步骤:
1. 使用 wp_enqueue_script()
加载JavaScript脚本
要使用 wp_enqueue_script()
加载JavaScript脚本,你需要按照以下步骤操作:
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');
// 如果需要,你可以添加一些局部变量,这些变量可以在你的JavaScript脚本中使用
$translation_array = array(
'some_string' => __('Some string to translate', 'text-domain'),
'a_value' => '10'
);
wp_localize_script('my-custom-script', 'myLocalized', $translation_array);
}
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.0'
是脚本的版本号。true
表示脚本应该被放在页面的底部加载。wp_localize_script()
允许你将PHP变量传递到JavaScript中。
2. 使用 wp_enqueue_style()
加载CSS样式表
加载CSS样式表与加载JavaScript脚本类似:
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'
是样式表的路径。array()
可以包含这个样式表依赖的其他样式表的标识符。'1.0.0'
是样式表的版本号。'all'
表示样式表应用于所有媒体类型。
注意事项:
- 使用
wp_enqueue_script()
和wp_enqueue_style()
时,请确保你的脚本和样式表在WordPress的wp_enqueue_scripts
动作钩子中被调用。 - 如果你的脚本或样式表依赖于其他脚本或样式表,请在注册时指定依赖关系。
- 使用版本号可以帮助避免浏览器缓存旧版本的脚本或样式表。
- 通过
wp_localize_script()
可以安全地将PHP变量传递到JavaScript中,避免直接在JavaScript中插入PHP代码。