如何将WordPress首页文章列表设置为两列布局

存在的问题 #

• CSS优先级不足：你使用的主题自带Bootstrap样式，你添加的.half类样式被更高优先级的Bootstrap类或主题自带样式覆盖，未能生效
• 结构冗余冲突：你在.half容器内嵌套了Bootstrap的container类，该类自带固定最大宽度和左右内边距，直接打乱了你设置的50%宽度规则；同时给article标签加了col-md-6类，相当于在50%宽度的外层容器内又套了一层50%宽度，最终单篇文章宽度仅为页面总宽度的25%，和预期不符
• 浮动逻辑错误：你写了.ng-row清除浮动的样式，但模板中完全没有调用该类，浮动元素未闭合会导致后续布局错乱
• 模板逻辑错误：你将get_footer()放在了else分支之前，无文章时会重复加载两次页脚，属于语法逻辑问题

修复方案 #

第一步：替换之前添加的CSS代码

用Flex布局替代老旧的浮动布局，无需处理闭合问题，兼容性更好：

/* 文章列表网格容器 */
.posts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
  box-sizing: border-box;
}
/* 单篇文章宽度，两列布局适配 */
.post-item {
  width: calc(50% - 10px);
  box-sizing: border-box;
}
/* 移动端自适应单列 */
@media (max-width: 768px) {
  .post-item {
    width: 100%;
  }
}

第二步：替换完整的index.php代码

删除冗余结构，修正语法逻辑：

<?php get_header(); ?>

<div class="posts-grid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post-item">
    <article class="post">
      <h3 class="entry-title widget-title text-center"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
      <br>
      <div class="col-md-4 text-center">
        <a href="<?php the_permalink() ?>"><img style="border-radius: 10px;" src="https://pngimg.com/uploads/washing_machine/washing_machine_PNG15618.png" width="500" height="750" class="img-responsive inblock main-poster"></a>
      </div>              
      <div class="col-md-8 text-justify">
        <table class="table table-condensed table-bordered table-hover">
          <tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
          <tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
          <tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
          <tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
          <tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
        </table>
      </div>  
    </article>  
  </div>
<?php endwhile; ?>
</div>
<?php else : ?>
  <p class="text-center">暂无发布的文章</p>
<?php endif; ?>
<?php get_footer(); ?>

修改完成后清空站点缓存和浏览器缓存即可正常显示两列布局。

内容的提问来源于stack exchange，提问作者D. Dragon