如何在网格系统引导程序中使用 wordpress 循环? [英] how to use wordpress loop with grid system bootstrap?

问题描述

我想显示一个带状行，其中两列包含 wordpress 循环内容(标题，以绿色块表示)每一行都有白色和灰色背景的列，每行中的列都像国际象棋检查器一样反转.

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.

推荐答案

编辑答案

我相信这就是您正在寻找的.这会遍历您拥有的所有帖子，然后按照您的草图外观对它们进行排序.

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 -->

原始答案

这是您要查找的 html.只需更改类名以满足您的需要.由于它是 WordPress 循环，因此您必须执行 if else 语句来确定何时开始新行以及何时为背景设置不同的颜色.

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屋！