在wordpress主題中交替顯示自定義帖子類型

Question

我在一個自定義帖子類型中添加了6個不同的帖子。就像團隊一樣，有6個不同的成員，我想在兩行中顯示這6個成員，每行3列。如何完成它？我是WordPress主題開發新手。嘗試編寫頭版，任何建議和資源將不勝感激。 我所做的就是這樣的，

<section class="team" id="team"> 
<div class="container"> 
<div class="row"> 
<div class="team-heading text-center"> 
<h2>our team</h2> 
<h4>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</h4></div> 

    <?php 
     $args = array(
     'post_type' => 'team', 
     'orderby' => 'date', 
     'order'  => 'DESC', 
     'posts_per_page' =>3, 
     ); 

     $the_query = new WP_Query($args); 
    ?> 
    <?php if($the_query->have_posts()) : ?> 
     <?php while($the_query->have_posts()) : $the_query->the_post(); ?> 

    <div class="col-md-2 single-member col-sm-4"> 
     <div class="person"> 
     <img class="img-responsive"> <?php the_post_thumbnail(); ?> 
    </div> 
     <div class="person-detail"> 
     <div class="arrow-bottom"></div> 
     <h3><?php the_title(); ?></h3> 
     <p><?php the_content(); ?></p> 
    </div> 
    </div> 
    <!-- Query to display +1/next content--> 
    <div class="col-md-2 single-member col-sm-4"> 
     <div class="person-detail"> 
     <div class="arrow-top"></div> 
     <h3><?php the_title(); ?></h3> 
     <p><?php the_content(); ?> </p> 
     </div> 
    <div class="person"> 
     <img class="img-responsive"> <?php the_post_thumbnail(); ?> 
    </div> 
    </div> 
     <?php endwhile; ?> 
    <?php wp_reset_postdata(); ?> 
    <?php endif ?> 

Answer 1

這比PHP前端的問題。你可以通過多種方式來解決它，但最簡單的方法就是正確使用Bootstrap。另外，如果您按照自己的方式混合使用PHP和HTML，則最終會導致無法讀取的文件。

首先，查詢：

<?php 
    $args = array(
    'post_type' => 'team', 
    'posts_per_page' => -1 
); 
    $the_query = new WP_Query($args); 
?> 

排序date，DESC是不必要的，因爲這是默認。 posts_per_page不應限制退回的物品數量。

和視圖：

<section class="team" id="team"> 
    <div class="container"> 
    <div class="team-heading text-center">...</div> 
    <div class="row"> 
     <?php if($the_query->have_posts()): $i = 0; while($the_query->have_posts()): $the_query->the_post(); ?> 
     <div class="col-sm-4"> 
      <?php if ($i % 2 > 0): ?> 
      <div class="single-member">...tpl1...</div> 
      <?php else: ?> 
      <div class="single-member">...tpl2...</div> 
      <?php endif; ?> 
     </div> 
     <?php $i++; endwhile; wp_reset_postdata(); endif; ?> 
    </div> 
    </div> 
</section> 

的col-sm-4應該讓讓你得到一排3個項目。