在WordPress中,wp_enqueue_script()
和 wp_enqueue_style()
函数用于注册和加载脚本和样式表。以下是如何使用这些函数的步骤:
注册和加载脚本(JavaScript)
-
注册脚本:
使用wp_register_script()
函数来注册脚本。这不会将脚本添加到页面上,只是告诉WordPress脚本的存在。function my_theme_enqueue_scripts() { wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
在这个例子中,
my-custom-script
是脚本的句柄,get_template_directory_uri() . '/js/my-script.js'
是脚本的URL,array('jquery')
表示这个脚本依赖于jQuery,'1.0'
是脚本的版本号,true
表示脚本应该被放在页面的底部。 -
加载脚本:
使用wp_enqueue_script()
函数来加载脚本。function my_theme_enqueue_scripts() { wp_enqueue_script('my-custom-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()
而不需要再次注册。
注册和加载样式表(CSS)
-
注册样式表:
使用wp_register_style()
函数来注册样式表。function my_theme_enqueue_styles() { wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all'); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
在这个例子中,
my-custom-style
是样式表的句柄,get_template_directory_uri() . '/css/my-style.css'
是样式表的URL,array()
表示没有依赖的样式表,'1.0'
是样式表的版本号,'all'
表示样式适用于所有设备。 -
加载样式表:
使用wp_enqueue_style()
函数来加载样式表。function my_theme_enqueue_styles() { wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all'); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
同样地,如果样式表已经注册过,你可以直接使用
wp_enqueue_style()
而不需要再次注册。
注意事项
- 确保
wp_enqueue_script()
和wp_enqueue_style()
函数在wp_enqueue_scripts
动作钩子中被调用。 - 如果你的脚本或样式依赖于其他脚本或样式(例如jQuery),请在注册或加载时指定依赖关系。
- 使用版本号可以帮助避免缓存问题。
- 将脚本放在页面底部(
wp_enqueue_script
的第五个参数设置为true
)可以提高页面加载速度,因为脚本会在页面内容加载完毕后执行。
通过以上步骤,你可以有效地在WordPress中注册和加载自定义脚本和样式表。