WordPress循环中部分帖子被渲染到main标签外，如何修复？

从你提供的代码和浏览器渲染结果来看，核心问题是自定义模板文件里的HTML标签不匹配，导致浏览器解析DOM时出现错乱，把部分帖子容器挤出了<main>标签。

问题根源分析 #

看你的自定义模板文件（template-parts/content-custom.php）：

• 开头用了<article>标签：

  <article class="row entry-article col-sm-12 col-md-12 w-100" id="post-<?php the_ID(); ?>" <?php post_class( array('list-article', 'clearfix') ); ?>>
  

• 但结尾却用了</div>来闭合：

  </div><!-- entry content -->
  

这种标签不匹配会让浏览器无法正确识别DOM结构，自动修正时就会把后续的帖子内容“漏”到<main>标签外面，造成布局错乱。

具体修复步骤 #

1. 修正自定义模板的闭合标签

把自定义模板文件的最后一行，从：

</div><!-- entry content -->

改成：

</article><!-- entry content -->

这样<article>标签就能正确闭合，浏览器也能正确解析整个帖子的DOM结构，所有帖子就会被正确包裹在<main>标签内的容器里。

2. 优化主文件的容器嵌套（可选，但推荐）

你的主文件里，<main>标签内已经有一个<div class="container">，然后每个帖子又套了一层<div class="container">。Bootstrap的container类是用来创建固定宽度或流体宽度的内容容器，多层嵌套会导致不必要的内边距/外边距，可能影响布局。

建议把主文件里帖子外层的<div class="container">换成row或者其他合适的类，比如：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="row"> <!-- 替换原来的container -->
    <?php get_template_part( 'template-parts/content', 'custom' ); ?>
  </div>
<?php endwhile; the_posts_navigation(); else : get_template_part( 'template-parts/content', 'none' ); endif; ?>

3. 验证修复结果

修复后，打开浏览器开发者工具（按F12），切换到「Elements」标签，检查：

• 所有<article>标签都正确闭合
• 所有帖子内容都在<main class="site-main">标签内部的容器里

如果还有个别帖子位置不对，可以检查是否有分页相关的模板代码（比如the_posts_navigation()调用的模板）存在结构错误，或者是否有第三方插件输出了额外的HTML干扰DOM结构。

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