wp_enqueue_style() 必须挂载到 wp_enqueue_scripts 钩子,且 $handle 唯一、$src 为可访问 url、$deps 和 $ver 显式传参,否则 css 不加载。

直接在 functions.php 顶层写 wp_enqueue_style(),或塞进 header.php 里手动加 <link>,CSS 就是不生效——不是代码写错了,是压根没进 WordPress 的资源调度流程。
wp_enqueue_style 必须挂到 wp_enqueue_scripts 钩子上
WordPress 只在这个钩子触发时才定义 wp_enqueue_style() 函数,且此时 还没输出,是唯一安全时机。
- ❌
wp_enqueue_style()直接写在functions.php文件最外层 → 报Fatal error: Call to undefined function wp_enqueue_style() - ❌ 塞进
header.php或模板文件 → 已开始输出 HTML,PHP 报headers already sent - ❌ 挂到
init、wp_head等钩子 → 太早函数未就绪,太晚无法插入<link> - ✅ 正确姿势:封装函数 +
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles') - ⚠️ 子主题必须在自己的
functions.php中显式挂载,父主题的钩子不会自动继承
handle 名称重复会导致样式静默失效
$handle 是全局唯一资源 ID,不是别名。两个地方用了相同名字(比如都叫 'style'),后注册的会彻底覆盖前一个——Network 面板看不到请求,控制台无报错,<link> 标签直接消失。
- ✅ 命名加前缀:
'mytheme-main-css'、'childtheme-header-fix' - ✅ 替换父主题默认样式(如
'twentytwentyfour-style'):先wp_dequeue_style('twentytwentyfour-style'),再wp_enqueue_style() - ✅ 检查是否已入队:
wp_style_is('mytheme-main-css', 'enqueued')返回true才算成功
$src 必须是可访问 URL,不是服务器路径
传 get_template_directory() . '/style.css' 或 __DIR__ . '/css/main.css' 进去,生成的是类似 file:///var/www/... 的链接,浏览器直接 404。
- ✅ 主题根目录下的
style.css:get_stylesheet_uri() - ✅ 父主题 CSS(子主题中引用):
get_template_directory_uri() . '/assets/css/main.css' - ✅ 子主题自定义 CSS:
get_stylesheet_directory_uri() . '/css/custom.css' - ✅ 插件内 CSS:
plugin_dir_url(__FILE__) . 'css/admin.css'(比plugins_url()更稳)
$deps 和 $ver 参数不可省略,类型要对
PHP 8+ 下,省略 $deps 或传 null/false 会触发 warning;更重要的是,不声明依赖会导致加载顺序错乱——比如你的 CSS 在 Bootstrap 之前加载,栅格全崩。
- ✅
$deps必须显式传数组:array('bootstrap-css')或array() - ✅
$ver推荐用文件时间戳防缓存:filemtime(get_template_directory() . '/assets/css/main.css') - ⚠️ 子主题若需依赖父主题样式,必须在
$deps中显式声明 handle,不能靠@import或手动<link>
最常被忽略的是 $handle 命名冲突和 $src 传了服务器路径——这两点不会报错,但 CSS 就是不加载,排查时容易绕远路。建议每次注册前先用 wp_style_is() 检查,再确认 URL 能在浏览器地址栏直接打开。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











