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

edqdpe6u  于 2022-12-26  发布在  WordPress
关注(0)|答案(1)|浏览(121)

我想添加正确的代码,让我的最新文章(来自while循环)在5列的部分。什么是最好的方法来做到这一点?

<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列的部分,但陷入了如何我可以循环它与我最近的职位。

vc9ivgsu

vc9ivgsu1#

您可以使用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 */
}

相关问题