如何在不使用Bootstrap的情况下将WordPress文章显示为三列？

没问题，我来帮你搞定这个三列布局的问题！不用Bootstrap也能轻松实现，而且完全不会影响页面其他部分的样式，我给你分步拆解方案：

第一步：修正content-noticias.php的HTML结构 #

你提供的代码最后多了一个多余的</div>，会导致HTML结构错乱，先把它修正为：

<div class="noticias"> 
  <a href="<?php the_permalink(); ?>"> 
    <?php the_post_thumbnail(); ?> 
  </a> 
  <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> 
  <div><p><?php echo wp_trim_words( get_the_content(), 50 ); ?></p></div> 
</div>

第二步：替换Bootstrap风格的PHP查询代码 #

原来的query_posts方法不推荐使用（会干扰WordPress主查询），改用更安全的WP_Query，同时用自定义类代替Bootstrap的row和col：

<div class="posts-grid-container">
  <?php 
  $count = 0;
  // 初始化自定义文章查询
  $posts_query = new WP_Query(array(
    'posts_per_page' => 9,
    // 这里可以添加其他查询参数，比如分类、排序等
  ));
  
  while ($posts_query->have_posts()) : $posts_query->the_post(); 
  ?> 
    <article class="posts-grid-item">
      <?php get_template_part('content-noticias', get_post_format()); ?> 
    </article>
  <?php 
  endwhile; 
  wp_reset_postdata(); // 重置查询，避免影响后续页面内容
  ?> 
</div>

第三步：添加纯CSS实现三列布局 #

推荐用CSS Grid来实现，代码简洁且兼容性好，把以下代码加到你的主题style.css文件或者后台「外观-自定义-额外CSS」面板里：

/* 三列布局容器 */
.posts-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 平均分配三列宽度 */
  gap: 20px; /* 列与列、行与行之间的间距，可按需调整 */
  margin-top: -30px; /* 保留你原来的顶部负间距 */
}

/* 单个文章项样式（可选） */
.posts-grid-item {
  padding: 10px;
  /* 可以添加边框、背景色等自定义样式 */
}

/* 响应式适配：小屏幕自动切换为单列 */
@media (max-width: 768px) {
  .posts-grid-container {
    grid-template-columns: 1fr;
  }
}

如果你更习惯用Flexbox，也可以用下面的CSS代码：

.posts-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: -30px;
}

.posts-grid-item {
  flex: 1 1 calc(33.333% - 20px); /* 计算三列宽度，减去间距 */
  min-width: 280px; /* 小屏幕下最小宽度，避免内容过窄 */
  padding: 10px;
}

@media (max-width: 768px) {
  .posts-grid-item {
    flex: 1 1 100%;
  }
}

额外优化建议 #

• 可以给the_post_thumbnail()指定合适的尺寸，比如the_post_thumbnail('medium')，让图片在三列里显示更协调；
• 去掉h1标签内的行内样式，把margin-top:-30px移到CSS里，保持代码更整洁。

内容的提问来源于stack exchange，提问作者Pedro Henrique Quiste