wp_enqueue_style() 必须挂载到 wp_enqueue_scripts 钩子上,不可在 functions.php 顶层或 header.php 中直接调用;handle 需唯一前缀,$src 必须为 url,$deps 应显式传数组,$ver 推荐用 filemtime 防缓存。

wp_enqueue_style 必须挂到 wp_enqueue_scripts 钩子上
直接在 functions.php 顶层写 wp_enqueue_style(),PHP 会报 Fatal error: Call to undefined function wp_enqueue_style();塞进 header.php 更糟, 已输出,PHP 报 “headers already sent”。WordPress 只在 wp_enqueue_scripts 钩子触发时才加载资源函数,且此时 尚未关闭。
✅ 正确写法只有一种:
- 封装调用逻辑到一个函数里(比如
my_theme_enqueue_styles()) - 用
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles')挂载 - 子主题必须在自己的
functions.php中挂载,不能依赖父主题钩子自动生效
handle 名称重复会导致样式静默失效
你写 wp_enqueue_style('style', ...),插件或父主题也用了 'style',后注册的那个会彻底覆盖前一个——不报错、不警告、Network 面板看不到请求,CSS 就是不生效。
✅ 避免踩坑的关键点:
- handle 加唯一前缀:
'mytheme-header-css'、'childtheme-print-fix' - 检查是否已加载:
wp_style_is('mytheme-header-css', 'enqueued')返回true表示已被引入 - 替换默认样式(如
'twentytwentyfour-style'):先wp_dequeue_style('twentytwentyfour-style'),再wp_enqueue_style()
$src 必须是 URL,不是服务器路径
传入 __DIR__ . '/css/main.css' 或 get_template_directory() . '/style.css',结果就是 404。WordPress 不解析服务器路径,只认浏览器能直接请求的 URL。
✅ 对应场景选对函数:
- 主题根目录
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 参数不可省略或传错类型
省略 $deps 或传 NULL、false,PHP 8+ 会触发 warning;更重要的是,不声明依赖会导致加载顺序错乱,比如你的 CSS 在 Bootstrap 之前加载,按钮栅格全乱。
✅ 实操建议:
-
$deps必须显式传数组,哪怕为空:array()或['bootstrap'] -
$ver推荐用文件修改时间防缓存:filemtime(get_stylesheet_directory() . '/style.css') - 版本号别用
microtime()——含小数点,部分浏览器缓存策略会拒绝 - 媒体类型
$media默认是'all',不填即可,填的话务必加引号
最常被忽略的是:子主题里想让自定义 CSS 等待父主题样式加载完成,光靠 wp_enqueue_style() 不够,必须把父主题 handle 显式写进 $deps 数组里——否则它们可能并行加载,顺序无法保证。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











