必须使用 wp_enqueue_style,硬写 <link> 会导致主题更新后样式丢失、插件样式冲突、子主题加载错序;该函数须挂载到 wp_enqueue_scripts 钩子,依赖项不可省略,子主题需通过父主题 handle 显式声明依赖。

必须用 wp_enqueue_style,硬写 <link> 会出问题——主题更新后样式消失、插件样式冲突、子主题父主题加载错序,都是常见后果。
为什么直接在 header.php 里写 <link> 不行
WordPress 的样式加载不是简单拼 HTML,它有一套依赖管理机制。你手动加的 <link href="style.css"> 完全绕过这套机制:
- 主题更新时,
header.php被覆盖,你的<link>就没了 - 插件也调用
wp_enqueue_style注册 Bootstrap 或 FontAwesome,但你的硬编码 CSS 可能比它们早或晚加载,导致按钮样式错乱、图标不显示 - 子主题里用
@import加载父主题 CSS,会阻塞渲染,且无法把父主题设为自定义 CSS 的依赖项
wp_enqueue_style 必须挂到 wp_enqueue_scripts 钩子
wp_enqueue_style 函数只在前端请求流程中、wp_enqueue_scripts 钩子触发后才可用。在 functions.php 顶层直接调用会报错:PHP Fatal error: Call to undefined function wp_enqueue_style()。
正确写法是:
立即学习“前端免费学习笔记(深入)”;
function my_theme_enqueue_styles() {
wp_enqueue_style(
'my-custom-css',
get_template_directory_uri() . '/assets/css/custom.css',
array(), // 必须显式传空数组,PHP 8+ 下省略会警告
filemtime(get_template_directory() . '/assets/css/custom.css') // 用文件修改时间作版本号,防缓存
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
注意几个关键点:
-
'my-custom-css'是 handle,全局唯一,后续要用它取消或重排样式 - 路径用
get_template_directory_uri()(父主题)或get_stylesheet_directory_uri()(子主题),别拼字符串 - 依赖项参数不能省略,哪怕没依赖也要写
array()
怎么只为某个页面加载 CSS
用条件函数包裹 wp_enqueue_style 即可,比如只在“关于我们”页面加载:
function my_theme_enqueue_styles() {
if (is_page('about-us')) {
wp_enqueue_style(
'aboutus-css',
get_template_directory_uri() . '/assets/css/aboutus.css',
array('my-theme-style'), // 依赖主样式,确保顺序正确
'1.0'
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
常用判断条件包括:
-
is_page('slug')或is_page(123)(ID) -
is_single()、is_category('news') -
is_admin()不适用——那是后台,得用admin_enqueue_scripts钩子
子主题里安全加载父主题 + 自定义 CSS
子主题不能靠 @import 或手动 <link> 加载父主题样式。正确做法是把父主题已注册的 handle 当作依赖:
function my_child_theme_enqueue_styles() {
$parent_style = 'twentytwentyfour-style'; // 查父主题 functions.php,找它注册时用的 handle
wp_enqueue_style(
$parent_style,
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-custom',
get_stylesheet_directory_uri() . '/custom.css',
array($parent_style), // 明确声明:这个 CSS 必须在父主题之后加载
filemtime(get_stylesheet_directory() . '/custom.css')
);
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
容易忽略的一点:父主题的 handle 名称不是固定的,得去父主题的 functions.php 里翻,不是所有主题都叫 parent-style;如果找不到,临时用 wp_print_styles 钩子 dump 出当前已注册的所有 handle。


















