WordPress子主题style.css不生效问题求助

1. 确认子主题style.css头部注释规范 #

子主题的style.css必须包含标准头部注释，WordPress才能正确识别。核心是Template字段要和父主题文件夹名称完全一致（大小写敏感），示例如下：

/*
 Theme Name:   Kerge Child
 Description:  Kerge主题的子主题
 Template:     kerge
 Version:      1.0.0
 Text Domain:  kerge-child
*/

2. 检查样式是否被正确加载 #

打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面后搜索style.css：

• 如果子主题的style.css未出现在列表中，检查get_stylesheet_directory_uri()是否正确指向子主题目录，可通过在函数中添加echo get_stylesheet_directory_uri();临时输出路径验证。
• 如果已加载但样式不生效，查看「元素」标签中对应元素的样式优先级，确认子主题样式是否被父主题或其他样式覆盖。

3. 修正父样式句柄的依赖关系 #

部分父主题不会使用parent-style作为样式句柄，需查看父主题functions.php中wp_enqueue_style的第一个参数（即父样式的句柄名称），替换到子主题代码中：

function kerge_child_theme_enqueue_styles() {
    // 替换为父主题实际的样式句柄，比如kerge-style
    $parent_style = 'kerge-style'; 
    
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'kerge_child_theme_enqueue_styles' );

4. 清除各类缓存 #

• 清空WordPress后台的缓存插件（如WP Rocket、W3 Total Cache）缓存；
• 用Ctrl+Shift+R强制刷新浏览器，避免加载本地缓存的旧样式文件。

5. 排查CSS语法错误 #

子主题style.css中的语法错误（如遗漏分号、未闭合括号）会导致后续样式失效。可通过浏览器开发者工具的「控制台」标签查看CSS报错信息，逐一修正。

内容的提问来源于stack exchange，提问作者Filippo Danesi