WordPress页面误点“Edit with Divi”后，如何移除Divi样式并恢复？

• 彻底清除Divi生成的包装代码
  进入页面编辑界面，切换回Gutenberg编辑器（能看到“Edit with Gutenberg”选项的话）。切换到代码编辑器模式（点击Gutenberg右上角三个点，选择“代码编辑器”），手动删掉所有以et-、et_开头的容器标签，比如<div id="et-boc" class="et_builder_outer_content">以及对应的闭合标签，保存页面后刷新前端查看效果。

• 禁用Divi对特定页面的自动包装
  安装激活Code Snippets插件（或者直接往主题的functions.php里添加代码），加入这段代码：

  add_filter('et_builder_enable_content_wrapper', '__return_false');
  add_filter('et_builder_enable_main_content_wrapper', '__return_false');
  

  要是只想针对单个页面生效，就把代码改成这样（把123替换成你的目标页面ID）：

  function disable_divi_wrapper_for_specific_page($enabled) {
      if (is_page(123)) {
          return false;
      }
      return $enabled;
  }
  add_filter('et_builder_enable_content_wrapper', 'disable_divi_wrapper_for_specific_page');
  add_filter('et_builder_enable_main_content_wrapper', 'disable_divi_wrapper_for_specific_page');
  

  保存代码后刷新目标页面，查看样式是否恢复。

• 修复样式冲突（不想删除包装器的话用这个方法）
  按F12打开浏览器开发者工具，定位到被破坏的元素，查看原来的CSS选择器被Divi包装器影响后的层级。然后进入主题的自定义CSS（路径：外观→自定义→额外CSS），调整选择器层级，比如原来的.my-class改成#et-boc .my-class，或者临时用!important覆盖样式（不建议长期使用），保存后刷新页面验证效果。

• 重置页面内容
  要是上面的方法都无效，就新建一个空白页面，切换到Gutenberg编辑器，把原页面的内容（从代码编辑器模式复制）粘贴进来，确保不携带任何Divi相关代码。设置新页面的 permalink、模板和原页面一致，之后替换原页面即可。

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