如何编辑Divi主题的归档页面及博客模块HTML代码？

嘿，作为经常跟Divi打交道的开发者，我太懂你这种想跳出CSS层面、直接改模块输出HTML的需求了！首先得跟你说清楚：你找不到archive.php是因为页面构建器里的博客模块，和传统的归档页面模板archive.php是两套完全独立的逻辑——archive.php管的是WordPress默认的归档页面，而你在页面里添加的博客模块，是由Divi的模块系统单独渲染的，所以找它没用。

下面给你两种最安全且有效的方法，都是基于子主题操作（一定要用子主题，别直接改父主题，不然更新就白忙活了）：

方法一：用WordPress过滤器拦截并修改输出 #

这种方法不用动模块的核心文件，通过钩子来调整HTML，是最推荐的方式，灵活且安全。

1. 修改整个博客模块的输出 #

用et_pb_module_shortcode_output过滤器，可以拿到博客模块渲染后的完整HTML，然后按需修改：

add_filter( 'et_pb_module_shortcode_output', 'custom_tweak_blog_module_html', 10, 4 );
function custom_tweak_blog_module_html( $output, $render_slug, $module, $atts ) {
    // 只针对博客模块生效
    if ( 'et_pb_blog' !== $render_slug ) {
        return $output;
    }

    // 举个例子：把文章标题的<h2>改成<h3>，并加自定义类
    $output = str_replace( '<h2 class="entry-title">', '<h3 class="entry-title custom-blog-title">', $output );
    
    // 还可以做更多替换，比如调整容器类、移除不需要的元素
    $output = str_replace( '<div class="et_pb_post_content">', '<div class="et_pb_post_content custom-content-wrap">', $output );

    return $output;
}

2. 精细化修改单篇文章的输出 #

如果你想单独调整每一篇博客文章的结构，用et_pb_blog_post过滤器，它会返回单篇文章的HTML：

add_filter( 'et_pb_blog_post', 'custom_modify_single_blog_post', 10, 3 );
function custom_modify_single_blog_post( $post_html, $post, $args ) {
    // 在文章最外层加个自定义包裹容器
    $post_html = '<article class="custom-blog-post-item">' . $post_html . '</article>';
    
    // 也可以直接替换或删除元信息（比如去掉日期）
    $post_html = preg_replace( '/<p class="post-meta">.*?<\/p>/', '', $post_html );

    return $post_html;
}

把这些代码加到你子主题的functions.php里就行。

方法二：直接覆盖模块的模板文件（彻底定制） #

如果过滤器的替换满足不了你的需求，比如要彻底重构模块的HTML结构，那就用子主题覆盖Divi的模块模板：

1. 找到Divi父主题目录下的includes/builder/modules/blog/文件夹，里面的blog.php就是博客模块的核心渲染文件。
2. 在你的子主题里创建一个完全相同的路径：divi/modules/blog/。
3. 把父主题里的blog.php复制到子主题的这个文件夹里。
4. 现在就可以自由修改子主题里的blog.php了——比如调整文章的布局结构、增减元素、修改标签层级等等。Divi会优先加载子主题里的模块文件，完全不影响父主题的更新。

注意事项 #

• 不管用哪种方法，修改前一定要备份网站，或者先在本地测试环境调试。
• 如果用模板覆盖的方法，Divi版本更新后，可能会对模块的核心逻辑做调整，记得更新后检查子主题里的模板文件是否需要同步适配新的结构。

如果还有具体的HTML结构要调整，比如想改分页、元信息的排列方式，可以再细化这些操作~

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