直接写标签会导致样式在主题更新后丢失,因header.php被覆盖;应使用wp_enqueue_style()并传入$deps、$ver、$media参数;子主题需用get_template_directory_uri()获取URL路径;is_page()在插件中无效,须在wp_enqueue_scripts钩子内结合路由状态判断。

直接写 标签会导致样式在主题更新后丢失
主题更新时,header.php 会被新版本覆盖,你硬写的 就没了——没有警告,不会报错,只是某天刷新页面突然样式全崩。这不是“改错了”,是文件被替换了。
常见场景包括:在子主题里改了 header.php 加 CSS,结果父主题一升级,子主题的 header.php 没动,但父主题的结构变了,你的 可能被插到 外面,或者和 wp_head() 冲突导致重复加载。
- 主题作者不承诺保留你修改过的模板文件
- WordPress 自动更新可能跳过提示直接覆盖
- 多语言或缓存插件可能预编译 HTML,把你的
缓存成无效路径
wp_enqueue_style() 被忽略的三个关键参数
很多人写了 wp_enqueue_style() 却没生效,不是函数写错,而是漏了这三个必须显式传入的参数:
-
$deps:依赖数组,哪怕不依赖其他样式,也得写array()—— PHP 8+ 下传null或省略会触发警告,部分主机直接中断执行 -
$ver:版本号,推荐用filemtime(get_template_directory() . '/assets/css/custom.css'),避免浏览器缓存旧 CSS -
$media:虽可省略,默认为'all',但若你加了print或screen and (min-width: 768px),就必须明确传参,否则媒体查询失效
错误示例:wp_enqueue_style('my-css', $url); —— 缺少 $deps 和 $ver,在严格模式下静默失败。
子主题中引用父主题 CSS 的路径陷阱
子主题不能直接用 get_template_directory() 拼路径去加载父主题 CSS,因为该函数返回的是服务器绝对路径(如 /var/www/html/wp-content/themes/twentytwentyfour/),而 wp_enqueue_style() 的 $src 参数只认 URL。
正确方式分两种:
- 加载父主题的主样式表:
get_template_directory_uri() . '/style.css' - 加载父主题子目录下的 CSS:
get_template_directory_uri() . '/assets/css/main.css' - 加载子主题自己的 CSS:
get_stylesheet_directory_uri() . '/css/custom.css'
注意:get_stylesheet_directory() 返回的是子主题的服务器路径,绝不能直接拼进 $src,否则生成的 URL 是 http://yoursite.com//var/www/...,必然 404。
为什么 is_page() 在插件里判断不了前台页面
很多开发者想在插件里“只给某个页面加 CSS”,于是写 if (is_page('about')) { wp_enqueue_style(...); } —— 这在插件的 wp_enqueue_scripts 钩子里永远返回 false。
原因:插件加载早于 WordPress 的全局查询对象初始化,is_page() 依赖 $wp_query,此时为空。真正可用的判断依据是:
- 前台文章页:
is_singular('post')或is_tax('category') - 自定义页面模板:
get_page_template_slug() === 'template-about.php' - URL 路径匹配(慎用):
strpos($_SERVER['REQUEST_URI'], '/about/') !== false,但需配合!is_admin()
最稳妥的做法是:用 add_query_arg() 给链接加参数(如 ?page=about),再用 isset($_GET['page']) && $_GET['page'] === 'about' 判断。
真正的麻烦不在写法,而在时机——wp_enqueue_style() 必须在 wp_enqueue_scripts 钩子内运行,而这个钩子本身又依赖 WordPress 已完成路由解析。一旦你试图在钩子外做条件判断,或把逻辑塞进错误的作用域,CSS 就会消失得毫无痕迹。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











