如何使用网格系统引导的WordPress的循环？ [英] how to use wordpress loop with grid system bootstrap?

问题描述

我想显示一个带有两列的条形行，其中包含wordpress循环内容（标题，在绿色区域中的exrept），每行都有白色和灰色背景的列，像棋检查器一样在每行中反转。 b

查看图片了解更多详情

解决方案

<编辑答案

我相信这就是你要找的。

 < div class ='container'这个循环遍历您所有的帖子，然后按照您的草图看起来的样子排序。 > 
<？php 
 $ args = array（
'post_type'=>'post'//获取帖子
）; 
 
 $ the_query = new WP_Query（$ args）; //建立查询
 
 $ count = $ the_query-> post_count; //检查帖子数量
 
< style> 
 .row：nth-​​child（偶数）.col-5：nth-​​child（偶数）{/ *选择每个偶数行甚至是后面的* / 
 background：#ddd; 
} 
 $ b $ .row：nth-​​child（奇数）.col-5：nth-​​child（奇数）{/ *选择每个奇数行和奇数行* / 
 background ：#ddd; 
} 
< / style> 
 <？php 
 while（$ the_query  - > have_posts（））：$ the_query  - > the_post（）; 
 $ post_index = $ the_query-> current_post + 1; （$ post_index％2！= 0）{//打开div如果post是奇数
 echo'< div class =// $ current_post =获得循环中的后期索引
 
 if rowstyle =border：2px solid red; padding：20px; margin：30px;>'; 
} 
 
 if（$ post_index％2！= 0）{//如果post是奇数，则给一个类
？>> 
< div class =col-xs-5<？php echopost_ $ post_index？> style =border：1px solid green;> 
< h2><？php the_title（）; ？>< / H2> 
< p><？php the_excerpt（）; ？>< / p为H. 
< / div> 
<？php 
} else {
？> 
< div class =col-xs-5 col-xs-push-2<？php echopost_ $ post_index？> style =border：1px solid green;> 
< h2><？php the_title（）; ？>< / H2> 
< p><？php the_excerpt（）; ？>< / p为H. 
< / div> 
<？php} // End if（$ post_index％2！= 0）
 
 if（$ post_index％2 == 0）{//如果post是偶数
回显< / div>; 
} 
 
 endwhile; 
 wp_reset_postdata（）; 
？> 
 
 
< / div> 
<！ -  /.container  - > 
  

原始答案

这是你正在寻找的html。只需更改类名称以满足您的需求。因为它是WordPress循环，所以你必须做else if语句以便何时启动一个新行以及何时为背景使用不同的颜色。

  .row {border：2px solid red; padding：10px 20px; margin：30px 0;}。col-xs-5 {border：1px solid green; height：100px;}。grey-bg {background：#ccc;}  

 < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =container- fluid>< div class =row> < div class =col-xs-5>< / div> < div class =col-xs-5 col-xs-push-2 gray-bg>< / div>< / div>< div class =row> < div class =col-xs-5 gray-bg>< / div> < div class =col-xs-5 col-xs-push-2>< / div>< / div>< div class =row> < div class =col-xs-5>< / div> < div class =col-xs-5 col-xs-push-2 gray-bg>< / div>< / div>< div class =row> < div class =col-xs-5 gray-bg>< / div> < div class =col-xs-5 col-xs-push-2>< / div>< / div>< / div>< script src =https：//code.jquery。 com / jquery-3.1.1.min.js>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js> ;< / script>  

i want to show a strip row with two column contain wordpress loop content (title, exrept in green blocs) every row have columns with white and grey background that invert in each row like chess checker .

see the image for more detail.

解决方案

EDITED ANSWER

I believe this is what you are looking for. This loops through all the posts you have and then sorts them the way your sketch looks.

<div class='container'>
    <?php
       $args = array(
           'post_type' => 'post' // Get only posts
       );

       $the_query = new WP_Query ( $args ); // build query

       $count = $the_query->post_count; // Check number of posts

   <style>
       .row:nth-child(even) .col-5:nth-child(even) { /* Select every even row and and even post */
           background: #ddd;
       }

       .row:nth-child(odd) .col-5:nth-child(odd) { /*  Select every odd row and odd post*/
           background: #ddd;
       }
   </style>
       <?php
           while ( $the_query -> have_posts() ) : $the_query -> the_post();
               $post_index = $the_query->current_post + 1; // $current_post = gets the post index in loop

               if ( $post_index % 2 != 0 ) { // Open div if post is odd
                    echo '<div class="row" style="border: 2px solid red; padding: 20px; margin:30px;">';
               }

               if ( $post_index % 2 != 0) { // If post is odd then give one class
       ?>                
                   <div class="col-xs-5 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php
               } else {
          ?>
                   <div class="col-xs-5 col-xs-push-2 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php } // End if ( $post_index % 2 != 0)

              if ( $post_index % 2 == 0 ) { // Close div if post is even
                  echo "</div>";
              }                      

       endwhile;
       wp_reset_postdata();
   ?>


        </div>
        <!-- /.container -->

ORIGINAL ANSWER

This is the html you're looking for. Just change the class names to suit your needs. Since it is WordPress loop you have to do if else statements for when to start a new row and when to have a different color for the background.

.row {
  border: 2px solid red;
  padding: 10px 20px;
  margin: 30px 0;
}

.col-xs-5 {
  border: 1px solid green;
  height: 100px;
}

.gray-bg {
  background: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row">
  <div class="col-xs-5"></div>
    <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
      <div class="col-xs-5 col-xs-push-2"></div>
</div>
<div class="row">
    <div class="col-xs-5"></div>
      <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
    <div class="col-xs-5 col-xs-push-2"></div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这篇关于如何使用网格系统引导的WordPress的循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！