开启Dynamic CSS时Divi自定义模块如何引入默认模块样式？

数据老陈

2026-10-5

问题原因

Divi 4.10+ 推出的Dynamic CSS机制除了会按需加载模块静态资源外，列宽、间距这类布局属性的CSS是根据页面内原生模块的配置参数动态生成的。你目前的写法只强制加载了Blog模块的基础静态CSS，没有触发动态布局样式的生成逻辑，自然会出现列宽失效的问题。同时你当前的过滤器写法存在缺陷，会覆盖页面其他模块的资源加载需求。

修复方案

第一步：修正资源加载过滤器的写法，不要直接覆盖资源数组，改为追加Blog模块资源：

// 强制加载Blog模块所需资源
function include_module_assets($assets_list) {
    $assets_list[] = 'et_pb_blog';
    return $assets_list;
}
add_filter( 'et_required_module_assets', 'include_module_assets' );

第二步：手动补全网格列宽的响应式规则，添加到你自定义模块的自定义CSS资源中即可：

/* Divi Blog模块网格布局核心列宽规则 */
.et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
    content: '3 .column.size-1of3';
}
.size-1of3 { width: 33.3333%; }

@media only screen and (max-width: 980px) {
    .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
        content: '2 .column.size-1of2';
    }
    .size-1of2 { width: 50%; }
}

@media only screen and (max-width: 767px) {
    .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
        content: '1 .column.size-1of1';
    }
    .size-1of1 { width: 100%; }
}

如果你的自定义模块支持自定义列数参数，只需根据模块配置值动态输出对应content属性和宽度规则即可。