如何使用 while 循环和我在 Wordpress 的 frontpage.php 文件中的最新帖子制作一个 5 列部分

Question

我想知道是否有人可以帮助我找到以下问题的解决方案：我想添加正确的代码以在 5 列部分中包含我的最新帖子（来自 while 循环）。 谁能告诉我最好的方法吗？

亲切的问候，

乔里斯

<div class="container">
 <div class="container container--narrow page-section">
  <h2 class="headline headline--small-plus t-center">Laatste nieuws</h2>
 <?php 
 $homepagePosts = new WP_Query(array(
  'posts_per_page' => 5,
  'category_name' => 'Posts'
 ));
 while ($homepagePosts->have_posts()) {
  $homepagePosts->the_post(); ?>
 <div class="event-summary">
  <a class="event-summary__date event-summary__date--beige t-center" href="#">
   <span class="event-summary__month"><?php the_time('M'); ?></span>
   <span class="event-summary__day"><?php the_time('d'); ?></span>
  </a>
 <div class="event-summary__content">
  <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
  <p><?php echo wp_trim_words(get_the_content(), 18); ?><a href="<?php the_permalink(); ?>" class="nu gray">Lees meer</a></p>
 </div>
</div>
<?php } wp_reset_postdata();
?>

我试图制作一个 5 栏的部分，但被困在如何用我最近的帖子循环它。

Answer 1

您将使用 CSS 网格来创建该布局。 每个.event-summary应该占用网格容器的一列。 如果您想指定它们应该占用多少列，请使用grid-column: span...; 您希望它占用的列数。 请参见下面的示例。

.page-section {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

.page-section .headline {
   grid-column: 1 / -1;
}

.page-section .event-summary {
   grid-column: span 1; /* replace with column number you prefer */
}