在Divi子主题中引入非标准路径自定义CSS文件遇阻求助

核心思路 #

Divi通过et_divi_enqueue_stylesheet()函数自动加载父/子主题的style.css，要替换为自定义CSS，需先移除这个默认动作，再手动加载所需样式。

代码实现 #

根据需求选择以下方案：

方案1：保留Divi父主题核心样式，替换子主题自定义样式

适合需要依赖Divi基础样式的场景：

function enqueue_custom_divi_styles() {
    // 移除Divi默认的父/子主题样式加载动作
    remove_action( 'wp_enqueue_scripts', 'et_divi_enqueue_stylesheet' );

    // 加载Divi父主题核心样式
    wp_enqueue_style( 'divi-style', get_template_directory_uri() . '/style.css' );

    // 加载自定义CSS，将父主题样式设为依赖确保加载顺序正确
    wp_enqueue_style( 
        'custom-divi-style', 
        get_stylesheet_directory_uri() . '/assets/css/index.css', 
        array( 'divi-style' ), 
        wp_get_theme()->get('Version') // 版本号用于缓存刷新
    );
}
// 优先级设为11，确保在Divi默认动作（优先级10）之后执行，保证移除生效
add_action( 'wp_enqueue_scripts', 'enqueue_custom_divi_styles', 11 );

方案2：完全禁用Divi默认样式，仅加载自定义CSS

不推荐（会丢失Divi核心样式导致页面布局混乱），仅适用于完全自定义样式的场景：

function enqueue_custom_divi_styles() {
    // 移除Divi默认的样式加载动作
    remove_action( 'wp_enqueue_scripts', 'et_divi_enqueue_stylesheet' );

    // 加载自定义CSS
    wp_enqueue_style( 
        'custom-divi-style', 
        get_stylesheet_directory_uri() . '/assets/css/index.css', 
        array(), 
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_divi_styles', 11 );

排查问题要点 #

• 路径验证：确认子主题目录下存在/assets/css/index.css，注意Linux服务器区分文件名大小写
• 缓存清理：清除WordPress缓存、浏览器缓存、CDN缓存，避免旧样式干扰
• 页面源码检查：查看页面HTML源码，搜索custom-divi-style对应的<link>标签，若出现404错误，说明路径配置有误
• Handle冲突：确保custom-divi-style这个样式标识未被其他插件/主题占用

内容的提问来源于stack exchange，提问作者Alf Fonti