在WordPress中,使用 wp_enqueue_script()
和 wp_enqueue_style()
函数是管理前端脚本和样式表的推荐方式。以下是如何使用这些函数来加载自定义脚本和样式表的步骤:
加载自定义样式表
- 在主题的
functions.php
文件中添加以下代码:
function my_custom_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');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
在这个例子中,我们首先使用 wp_register_style()
函数注册了一个名为 my-custom-style
的样式表。这个函数需要以下参数:
- $handle: 样式表的唯一标识符。
- $src: 样式表的URL。
- $deps: 此样式表依赖的其他样式表的handle数组。
- $ver: 样式表的版本号。
- $media: 样式表应用到的媒体类型。
然后,我们使用 wp_enqueue_style()
函数将样式表添加到队列中,以便在页面加载时包含它。
- 确保你的样式表文件
my-custom-style.css
位于主题的css
目录中。
加载自定义脚本
- 在主题的
functions.php
文件中添加以下代码:
function my_custom_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');
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
在这个例子中,我们首先使用 wp_register_script()
函数注册了一个名为 my-custom-script
的脚本。这个函数需要以下参数:
- $handle: 脚本的唯一标识符。
- $src: 脚本的URL。
- $deps: 此脚本依赖的其他脚本的handle数组。
- $ver: 脚本的版本号。
- $in_footer: 是否在页面的底部加载脚本,
true
表示在底部加载。
然后,我们使用 wp_enqueue_script()
函数将脚本添加到队列中,以便在页面加载时包含它。
- 确保你的脚本文件
my-custom-script.js
位于主题的js
目录中。
注意事项
- 使用
wp_enqueue_script()
和wp_enqueue_style()
时,确保不要直接在主题文件中直接使用<script>
或<link>
标签来加载资源,这可能会导致脚本或样式表没有被正确地管理。 - 如果你的脚本依赖于其他脚本(如jQuery),确保在
$deps
参数中指定它们。 - 使用版本号(
$ver
)可以确保当脚本或样式表更新时,浏览器能够加载最新的版本。 - 使用
add_action('wp_enqueue_scripts', 'my_custom_scripts');
和add_action('wp_enqueue_scripts', 'my_custom_styles');
确保在WordPress的前端页面加载时执行这些函数。