在 WordPress 主题中加载 CSS 和 JavaScript 文件,最规范的方式是使用 wp_enqueue_style 和 wp_enqueue_script 函数。这些函数确保了资源的正确加载顺序,并提供了依赖管理、版本控制和条件加载的能力。

使用 wp_enqueue_style 加载样式表

在主题的 functions.php 中,通过 wp_enqueue_scripts 钩子加载样式表。每个样式表都需要一个唯一的句柄,以及文件路径。你可以指定依赖关系,确保依赖的样式表先加载。版本号建议使用主题版本号或文件修改时间,以控制浏览器缓存。

使用 wp_enqueue_script 加载脚本

脚本的加载方式与样式表类似。你可以指定脚本的依赖关系,比如 jQuery,确保 jQuery 在脚本之前加载。你还可以设置在页脚加载,让脚本不影响页面渲染速度。

对于需要翻译的脚本,可以使用 wp_localize_script 将 PHP 数据传递给 JavaScript。这个函数会在脚本之前输出一个 JavaScript 对象,供前端脚本使用。

按需加载与条件加载

不是所有页面都需要加载所有资源。通过条件判断,你可以实现按需加载。例如,只在单篇文章页面加载评论相关的脚本,只在首页加载滑块脚本。这样可以减少不必要的 HTTP 请求,提高页面加载速度。

正确的加载时机

wp_enqueue_scripts 是加载前端资源的推荐钩子。不要在 wp_head 或 wp_footer 中直接输出样式或脚本标签,这会导致混乱和冲突。

版本控制与缓存更新

在开发过程中,给资源文件添加版本号可以确保浏览器获取最新版本。推荐使用文件修改时间作为版本号,这样每次文件更新后版本号自动变化,浏览器会自动刷新缓存。