在使用WordPress时,wp_enqueue_script()
和 wp_enqueue_style()
是两个非常常用的函数,它们分别用于在WordPress页面中加载自定义的JavaScript脚本和CSS样式表。以下是如何使用这两个函数的步骤:
加载自定义样式(CSS)
-
注册样式表:
使用wp_register_style()
函数来注册你的样式表。这个步骤是可选的,但推荐使用,因为它允许你在注册之后修改样式表的属性。function my_theme_enqueue_styles() { wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), '1.0.0', 'all'); }
-
在WordPress中添加钩子:
使用add_action()
函数将你的样式表加载函数挂载到wp_enqueue_scripts
钩子上。add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
-
加载样式表:
在你注册样式表的函数中,使用wp_enqueue_style()
来实际加载样式表。function my_theme_enqueue_styles() { wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), '1.0.0', 'all'); wp_enqueue_style('my-custom-style'); }
加载自定义脚本(JavaScript)
-
注册脚本:
使用wp_register_script()
函数来注册你的JavaScript脚本。这个步骤也是可选的。function my_theme_enqueue_scripts() { wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array('jquery'), '1.0.0', true); }
-
在WordPress中添加钩子:
使用add_action()
函数将你的脚本加载函数挂载到wp_enqueue_scripts
钩子上。add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
-
加载脚本:
在你注册脚本的函数中,使用wp_enqueue_script()
来实际加载脚本。function my_theme_enqueue_scripts() { wp_register_script('my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array('jquery'), '1.0.0', true); wp_enqueue_script('my-custom-script'); }
注意事项:
wp_enqueue_script()
和wp_enqueue_style()
的第三个参数是依赖关系数组。如果你的脚本依赖于jQuery,你需要在数组中包含'jquery'
。- 第四个参数是脚本的版本号,对于样式表和脚本来说,这个参数用于缓存管理。
- 第五个参数(对于脚本)指定脚本是否应该被放置在页面的底部(在
</body>
标签之前)。对于大多数脚本,推荐设置为true
。
确保将上述代码片段放置在你的主题的 functions.php
文件中,或者在你的插件文件中。这样,当你访问你的WordPress站点时,自定义样式和脚本就会被加载。