如何将Divi Accordion模块项标题从heading标签改为p标签展示

这个需求完全可以实现，不会破坏Divi手风琴原本的交互逻辑，你可以根据自己的需求选择下面两种方案：

方案1：轻量前端脚本适配（无需修改后端代码） #

• 适合不想改主题PHP文件、希望快速临时生效的场景，不需要安装任何额外插件
• 操作路径：进入Divi主题选项 > 集成 > 将代码添加到< head >，把下面的脚本粘贴进去保存即可
• 脚本逻辑：等页面DOM加载完成后，遍历所有手风琴的标题元素，完整保留原元素的类名、绑定属性、内容，把原来的h1-h6标签直接替换成p标签，不会影响展开/收起的交互触发
• 参考脚本：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配所有Divi手风琴的标题元素
  document.querySelectorAll('.et_pb_toggle_title').forEach(function(oldTitle) {
    // 保留原元素的所有属性和内容
    const oldAttrs = {};
    for (let attr of oldTitle.attributes) {
      oldAttrs[attr.name] = attr.value;
    }
    const oldContent = oldTitle.innerHTML;
    // 创建新的p标签
    const newTitle = document.createElement('p');
    // 复制所有原属性和内容到新p标签
    Object.keys(oldAttrs).forEach(attrName => newTitle.setAttribute(attrName, oldAttrs[attrName]));
    newTitle.innerHTML = oldContent;
    // 替换原标题元素
    oldTitle.parentNode.replaceChild(newTitle, oldTitle);
  });
});

• 注意：这个方案存在轻微的前端DOM替换延迟，网络不好时可能会短暂出现原heading标签加载后再被替换的视觉闪烁。

方案2：服务端渲染层直接替换（性能更优，无闪烁） #

• 适合对页面加载性能要求高、希望标签直接从服务端输出为p的场景，需要在当前使用的子主题的functions.php文件中添加自定义代码
• Divi原生预留了控制手风琴标题输出标签的过滤器，不需要写复杂的DOM操作，直接修改过滤器返回值即可
• 参考代码：

// 强制将手风琴条目标题的渲染标签替换为p
add_filter('et_pb_toggle_title_tag', 'change_accordion_title_to_p', 10, 2);
function change_accordion_title_to_p($default_tag, $module_settings) {
  return 'p';
}

• 灵活调整：如果你不需要全局替换所有手风琴的标题，可以在函数内增加模块ID判断，只针对指定ID的手风琴模块返回p标签，其他模块依然保留你在界面上设置的h1-h6层级。

通用说明 #

• 两种方案都不会改变手风琴标题原本的视觉样式，因为原标签的类名、内联样式都会被完整保留，和之前的展示效果完全一致
• 替换为p标签后，页面的SEO表现不受负面影响，只要保证页面上的h1-h6层级符合站点结构要求即可

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