Bootstrap列和Wordpress文章

Question

所以我正在将引导站点转换为Wordpress，明信片不想水平堆叠。。。我知道应该有foreach循环，它会在帖子中循环，但我不知道如何设置。。。

<?php while(have_posts()) {
the_post();
?>

<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>                 
</div> 
</div>
</div>
</section>
<?php     } ?>

Answer 1

while也是一个循环。在循环中，您可以只放入重复的代码。正如我所理解的你的代码比你需要这样的东西：

<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>

此外，最好将一个块的代码移动到另一个文件，例如partials/post.php:

<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>

并更新您当前的文件：

<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>