在WordPress中,使用 wp_enqueue_script()
和 wp_enqueue_style()
函数来注册和加载自定义脚本和样式是管理前端资源的一种标准方式。以下是使用这些函数的步骤:
注册和加载自定义样式(CSS)
- 注册样式:使用
wp_register_style()
函数在WordPress中注册一个样式。这不会加载样式,只是告诉WordPress这个样式存在。
function my_custom_styles() {
// 注册样式
wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
- 加载样式:使用
wp_enqueue_style()
函数在WordPress中加载样式。
function my_custom_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_custom_styles');
注册和加载自定义脚本(JavaScript)
- 注册脚本:使用
wp_register_script()
函数在WordPress中注册一个脚本。这不会加载脚本,只是告诉WordPress这个脚本存在。
function my_custom_scripts() {
// 注册脚本
wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
- 加载脚本:使用
wp_enqueue_script()
函数在WordPress中加载脚本。
function my_custom_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');
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
在上述代码中:
'my-custom-style'
和'my-custom-script'
是脚本的唯一标识符。get_template_directory_uri() . '/css/my-style.css'
和get_template_directory_uri() . '/js/my-script.js'
是脚本文件的路径。array()
可以包含依赖关系,例如array('jquery')
表示这个脚本依赖于jQuery。'1.0.0'
是脚本的版本号。'all'
对于样式来说表示媒体类型,对于脚本来说,最后一个参数是布尔值,表示是否在页脚加载脚本(true
)或者在头部加载(false
)。
确保将上述函数添加到你的主题的 functions.php
文件中,或者在一个专门的插件中。这些函数将在WordPress加载前端脚本和样式时执行。