提问人：Jklerks 提问时间：12/25/2022 最后编辑：PandaJklerks 更新时间：12/25/2022 访问量：27
如何使用 while 循环制作一个 5 列部分，其中包含我在 Wordpress 的首页 .php 文件中的最新帖子
How to make a 5 column section using a while loop with my latest posts in my frontpage.php file for Wordpress
问：
我想添加正确的代码，以将我的最新帖子（来自 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 列部分，但卡住了如何用我最近的帖子循环它。
答：
0赞
JayDev95
12/25/2022
#1
您将使用 CSS 网格来创建该布局。每个都应占用网格容器的一列。如果要指定它们应占用的列数，请使用您希望它占用的列数。请参阅以下示例。.event-summarygrid-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 */
}
评论