我们在开发 WordPress 主题过程中，经常需要添加 CSS 和 JS 文件。WordPress 为开发者提供了一个完善的脚本及样式文件排队系统，这有助于防止插件之间的脚本冲突。本文主要介绍在 WordPress 中添加 JavaScript 文件与 CSS 文件的正确方法，对于刚开始学习 WordPress 主题和插件开发的用户尤其有用。
很多人习惯直接使用 <link>、<script> 标签将文件写入 HTML 中。实际上，WordPress 内置了更完善的脚本和样式引用函数与方法。
显然，使用 WordPress 内置的方法进行引用，更加专业且具有更好的可扩展性。
正确引入 JS 与 CSS 的方法
以下是一个在主题的 functions.php 文件中添加的标准示例代码，用于在非管理后台页面正确排队加载脚本和样式。
// WordPress 正确引入 JS 和 CSS 的方法
function my_theme_scripts() {
$theme_assets = get_template_directory_uri() . '/static';
if (!is_admin()) {
// 1. 引入 CSS 文件
wp_enqueue_style('main-style', get_stylesheet_uri(), array(), null, 'all');
wp_enqueue_style('uikit-css', $theme_assets . '/css/uikit.css', array(), null, 'all');
// 2. 引入 JS 文件
// 首先注销可能存在的旧版本 jQuery（谨慎操作）
wp_deregister_script('jquery');
// 注册并引入自定义 jQuery 版本
wp_enqueue_script('jquery', $theme_assets . '/js/jquery.min.js', array(), null, true);
// 引入其他 JS 文件，并设置依赖和加载位置（页脚）
wp_enqueue_script('uikit-js', $theme_assets . '/js/uikit.min.js', array('jquery'), null, true);
wp_enqueue_script('clipboard-js', $theme_assets . '/js/clipboard.min.js', array(), null, true);
wp_enqueue_script('theme-main-js', $theme_assets . '/js/index.js', array('jquery'), null, true);
}
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');代码说明与最佳实践
1. 函数钩子：使用 wp_enqueue_scripts 动作钩子来在前台加载资源，这是 WordPress 推荐的标准做法。
2. 核心函数：
wp_enqueue_style()：用于加载 CSS 文件。wp_enqueue_script()：用于加载 JavaScript 文件。
3. 函数参数详解（以 wp_enqueue_script 为例）：
- 第一个参数（句柄）：赋予脚本一个唯一名称，如
'jquery'。 - 第二个参数（路径）：脚本文件的完整 URL。
- 第三个参数（依赖）：数组，定义此脚本依赖的其他脚本句柄。例如
array('jquery')表示该脚本需要 jQuery 先加载。 - 第四个参数（版本号）：可指定文件版本，常用于缓存控制。传入
null会使用 WordPress 版本号，传入false则不添加版本号。 - 第五个参数（加载位置）：
true表示在</body>前（页脚）加载，false表示在<head>中加载。通常 JS 文件建议在页脚加载以提高页面加载速度。
4. 注意事项：
- 谨慎使用
wp_deregister_script('jquery')，除非你确定需要替换核心 jQuery 版本，因为这可能导致依赖它的插件出错。 - 为脚本和样式指定唯一的句柄名称，避免与其他插件冲突。
- 使用
get_template_directory_uri()获取父主题目录 URL，使用get_stylesheet_directory_uri()获取子主题目录 URL。 - CSS 文件的最后一个参数是媒体查询，如
'all'、'screen'等。
通过以上方法，你可以标准化、安全地在 WordPress 主题中引入 CSS 和 JavaScript 文件，并充分利用 WordPress 的依赖管理和排队系统。