如何全局修改WordPress Divi页面所有元素（含非Divi自定义短代码元素）的颜色？

针对你遇到的问题，我分享几个经过验证的可行方案，核心思路是把硬编码颜色和Divi的全局颜色系统绑定起来，这样后续改色只需在Divi自定义器里操作即可：

1. 将硬编码颜色替换为Divi全局CSS变量（最优方案） #

Divi的全局颜色本质是CSS变量，格式为var(--et-palette-color-N)（N从0开始，对应你在自定义器里设置的全局颜色顺序）。你可以把所有硬编码的颜色值（比如#ff0000、rgb(255,0,0)）替换成这些变量，这样就能和Divi全局颜色同步更新。

具体步骤： #

• 先在浏览器开发者工具里查看你的Divi全局颜色对应的变量：随便找一个用了全局颜色的Divi元素，查看它的样式，就能看到类似var(--et-palette-color-1)的变量。
• 批量替换所有出现硬编码颜色的地方：
  • 由于Divi会把代码模块、页面自定义CSS、主题构建器内容存在数据库的序列化字段里，普通搜索替换会失效，推荐用支持序列化数据的工具：
    • 用WP CLI的话，执行命令（一定要先备份数据库！）：

      wp search-replace '#ff0000' 'var(--et-palette-color-1)' --all-tables --serialized
      

      如果有多种颜色格式（比如#f00、rgb(255,0,0)），可以用正则匹配：

      wp search-replace '/#ff0000|#f00|rgb\(255,0,0\)/' 'var(--et-palette-color-1)' --all-tables --serialized --regex
      

    • 如果你不习惯命令行，可以用插件Serialize Search Replace，它专门处理WordPress数据库里的序列化数据替换，能解决Better Search Replace失效的问题。

2. 给自定义短代码元素添加全局样式绑定 #

如果你的自定义短代码生成的HTML有统一的类名（比如.custom-shortcode-box、.shortcode-text），可以直接在Divi自定义器的「额外CSS」里写全局样式，用Divi的全局颜色变量：

/* 自定义短代码文本颜色 */
.custom-shortcode-text {
  color: var(--et-palette-color-0);
}

/* 自定义短代码背景色 */
.custom-shortcode-box {
  background-color: var(--et-palette-color-2);
  border-color: var(--et-palette-color-3);
}

这样不用修改短代码本身，只要调整Divi全局颜色，这些元素的样式就会自动更新。

3. 给自定义短代码添加动态颜色替换过滤器（适合自己开发的短代码） #

如果这些自定义短代码是你自己开发的，可以在短代码输出时添加一个过滤器，动态把硬编码颜色替换成Divi全局变量。

示例代码（放在主题的functions.php里）：

// 自定义过滤器，替换短代码输出中的颜色
add_filter('my_custom_shortcode_output', 'swap_shortcode_colors_to_divi_global');
function swap_shortcode_colors_to_divi_global($content) {
  // 替换红色为Divi全局颜色1
  $content = str_replace('#ff0000', 'var(--et-palette-color-1)', $content);
  // 替换蓝色为Divi全局颜色2
  $content = str_replace('#0000ff', 'var(--et-palette-color-2)', $content);
  // 添加更多替换规则...
  return $content;
}

然后在你的短代码函数里，输出时应用这个过滤器：

function my_custom_shortcode() {
  $html = '<div class="custom-shortcode-text" style="color:#ff0000;">示例内容</div>';
  // 应用过滤器
  return apply_filters('my_custom_shortcode_output', $html);
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

这样每次短代码输出时，颜色都会自动替换成全局变量的值。

内容的提问来源于stack exchange，提问作者Marcel Dz