必须用add_action('wp_enqueue_scripts', 'function_name')挂载wp_enqueue_style();handle需唯一前缀;$src必须为url;$deps和$ver不可省略,须传空数组和filemtime版本号。

直接写 <link> 标签引入 CSS,样式看似能用,但主题一更新就丢、插件样式会冲突、子主题父样式加载顺序错乱——这不是“能用”,是埋雷。
wp_enqueue_style 必须挂到 wp_enqueue_scripts 钩子上
把 wp_enqueue_style() 直接写在 functions.php 顶层,或者塞进 header.php,函数根本不会执行。浏览器里看不到对应 <link> 标签,控制台也无报错。
- 早于
wp_enqueue_scripts(比如init):WordPress 核心函数尚未加载,PHP 报Fatal error: Call to undefined function wp_enqueue_style() - 晚于它(比如
wp_head):已输出,PHP 报 “headers already sent” - ✅ 正确做法:封装函数 +
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles') - ⚠️ 子主题必须在自己的
functions.php中挂载,父主题的钩子不会自动继承
handle 名称重复会导致样式静默失效
wp_enqueue_style() 第一个参数 $handle 是全局唯一 ID,不是随便起的别名。两个地方用了相同 $handle(比如都叫 'style' 或 'bootstrap'),后注册的那个会彻底覆盖前一个。
- 没有警告,不报错,
<link>标签就是不出现 - ✅ 解决办法:加唯一前缀,如
'mytheme-header-css'、'childtheme-print-override' - ✅ 检查是否已加载:
wp_style_is('mytheme-header-css', 'enqueued')返回true表示已被引入 - ✅ 替换父主题默认样式(如
'twentytwentyfour-style'):先wp_dequeue_style('twentytwentyfour-style'),再wp_enqueue_style()
$src 必须是 URL,不是服务器路径
传 get_template_directory() . '/style.css' 或 __DIR__ . '/css/main.css' 进去,生成的链接类似 http://yoursite.com//var/www/html/wp-content/themes/mytheme/style.css,必 404。
-
wp_enqueue_style()的$src参数只认浏览器可直接访问的 URL - 子主题加载自己 CSS:
get_stylesheet_directory_uri() . '/css/custom.css' - 子主题加载父主题 CSS:
get_template_directory_uri() . '/style.css' - ❌ 绝不能用
get_template_directory()或get_stylesheet_directory()拼$src,它们返回的是服务器绝对路径
$deps 和 $ver 参数漏掉会静默失败
很多人写了 wp_enqueue_style() 却没生效,不是函数写错,而是漏了这两个关键参数:
-
$deps:依赖数组,哪怕不依赖其他样式,也得写array()—— PHP 8+ 下传null或省略会触发警告,部分主机直接中断执行 -
$ver:版本号,推荐用filemtime(get_stylesheet_directory() . '/css/custom.css'),避免浏览器缓存旧 CSS - 错误示例:
wp_enqueue_style('my-css', $url)—— 缺$deps和$ver,在严格模式下静默失败 -
$media虽可省略(默认为'all'),但若你用了print或screen and (min-width: 768px),就必须显式传参,否则媒体查询失效
最常被忽略的其实是时机与作用域:钩子没挂对、子主题没独立注册、handle 没加前缀、路径当 URL 用——这些错误都不会报红,只是你的 CSS 不见了。排查时优先看 Network 面板有没有那个 <link> 请求,没有就说明根本没进 WordPress 的资源调度系统。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











