WordPressテーマのカスタムポストタイプからコンテンツを表示する

Question

1つのカスタムポストタイプに6つの異なる投稿を追加しました。チームの下には、6人の異なるメンバーがいます。これらの6人のメンバーを2行、各行に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よりもフロントエンドの問題の詳細です、このようなものです。あなたはさまざまな方法でそれについて考えることができますが、最も単純なのは単にブートストラップを正しく使うことです。また、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> 

あなたが行の3つの項目を取得するようcol-sm-4はそれを作る必要があります。