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>