ブートストラップを使ってWordPressの投稿をテーブルに表示するには？

Question

WordPressのこの特定のレイアウトで私の最近のブログ投稿を表示したいと思います。ここでは、以下の通りです：

1|2|3 
----- 
4|5|6 

ここに私のコードは、私はWordPressのループが年代順に行く最後の6件の投稿を表示し、ノー持って使用したい.....これまで

<div class="container post_container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <h1>Recent Posts</h1> 

      <?php 

      $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&'); 


      if(have_posts()) { 
       while($recentPost->have_posts()) { 
        $recentPost->the_post(); ?> 


     <br> 
     <br> 

     <div class="posts_table"> 
      <--Where all recent posts will be displayed--> 
     </div> 



        <?php 

       } 
      } 



      ?> 

ですどのようにそれを作成し、非常に混乱したアイデア。私はHTMLテーブルまたはブートストラップグリッド、あるいはその両方を使用する必要があるかどうかはわかりません。

Answer 1

引数としてWP_Query引数を使用すると、混乱を避けることができます。

時系列で投稿を取得したいので、dateで注文してください。クラスWP_Queryのインスタンスは次のようになります。

$recentPost = new WP_Query(
    array(
     'type'   => 'post', 
     'posts_per_page' => 6, 
     'order'   => 'ASC', 
     'orderby'  => 'date' // Order by date! 
    ) 
); 

その後、私はあなたが行と列でブートストラップ使用している参照してください。

まずステップ、しばらく（）ループの周りのすべてを作成：whileループ内のすべてのものを構築し、

<?php 


    if(have_posts()) { 

     // First, build parent DIV element outside the while() loop 
     ?> 

     <div class="row posts_table"> 

     <?php 

     // Setup the counter 
     $counter = 0; 

セカンドを：

 // Iterate over the posts 
     while($recentPost->have_posts()) { 

      // Get next 
      $recentPost->the_post(); 

      // Render post content here 
      // Bootstrap uses 12 columns, we want 3 blocks. 12/3 = 4 thus use cols-xs-4. 
      ?> 

      <div class="cols-xs-4"> 
       <?php the_title(); ?> 
      </div> 

これはトリッキーな部分です。 3つの投稿の後、新しい行要素を作成しています。どうして？ブートストラップは12列を連続して使用するように設計されているため、これ以上は使用できません。

このコードを後でリファクタリングする場合は、1ページあたり9/15の投稿が必要な場合は、WP_Query内の配列からposts_per_pageの値を簡単に3,6,9,12でブレークインすることなく簡単に更新できます。そうです。

  <?php 

      // Increment for next post 
      $counter++; 

      // Use the modulo to break a Bootstrap row and start a new one 
      // The HTML inside this control flow will be printed every third post (every third iteration). 
      if($counter % 3 == 0){ 
       ?> 
       </div> 
       <div class="row posts_table"> 
       <?php 
      } 

     } 

最後に、最後の.row.posts_table要素を閉じるだけで済みます。

 ?> 

     </div> 
     <!-- end of .row.posts_table --> 

     <?php 
    } 


?> 

また、WordPress documentation on WP_Query、特にWP_Query orderby partをチェックしてください。

.posts_tableはウェブサイトに意味があるかどうかわかりませんが、そうでない場合は削除できます。

Answer 2

あなたはこのようなものを探しているかもしれないと思います。 @Joachimはもっと深い答えを提供していますが、以下は元のコードを修正したものです。

<div class="container post_container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <h1>Recent Posts</h1> 

      <?php 

      $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&'); 


      if(have_posts()) { 
       // the wrapper div goes between the IF outside the while 
       // added a '.row' class here ?> 
       <div class="posts_table row"> 
        <?php 
        while($recentPost->have_posts()) { 
         $recentPost->the_post(); 
          // the column class is added below here inside the WHILE 
          // it needs to output on each loop ?> 
          <div class="col-xs-4"> 

           <!-- post content comes here --> 

          </div> 

         <?php 

        } // end the WHILE 
       // the .posts_table wrapper is closed here outside the WHILE inside the IF ?> 
       </div> 
      <?php 
     } // end the IF 




      ?>