如何创建自举网格循环？

时间：2017-05-18 作者：The Lee

我可以知道如何在Wordpress中为这个HTML代码创建多个循环吗？

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>

<div class="row">
 <div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
<div class="col-md-3 col-sm-6">
                <div class="normal-video">
                  <a href="#">
                    <div id="video-content-img" style="background-image:url(\'post-img\');">
                    <div class="holder">
                      <div class="play-button"><i class="fa fa-play" aria-hidden="true"></i></div>
                    </div>
                    </div>
                  </a>
                   <p class="category"><a href="#">Lorem Ipsum</a> &nbsp;&#8226;&nbsp; 17 Apr 2017</p>
                  <h1><a href="#">What is Lorem Ipsum?</a></h1>
                </div>  
              </div>
</div>
根据我们的帖子总数，这一行还在继续。希望它会像这样出现：enter image description here请告知。谢谢

1 个回复
SO网友:The Lee

好的，我知道了！这个代码对我来说非常适用。：）

<?php             $args=array(
                 \'post_type\' => \'post\',
                  \'posts_per_page\' => 4,
                  \'paged\' => $paged,
                  \'tax_query\' => array(
                              array(                
                                  \'taxonomy\' => \'post_format\',
                                  \'field\' => \'slug\',
                                  \'terms\' => array(\'post-format-video\'),
                                  \'operator\' => \'IN\')
                                  )
                );

              $my_query = null;
              $my_query = new WP_Query($args);

              if( $my_query->have_posts() ) {

                $i = 0;
                while ($my_query->have_posts()) : $my_query->the_post();
              // modified to work with 3 columns
              // output an open <div>
              if($i % 4 == 0) { ?> 

              <div class="row">

              <?php
              }
              ?>

                <?php get_template_part( \'template/loop\', \'video\' ); ?>
                  <?php $i++; 
                  if($i != 0 && $i % 4 == 0) { ?>
                    </div><!--/.row-->
                    <div class="clearfix"></div>

                  <?php
                   } ?>

              <?php endwhile; } wp_reset_query();?>

结束
标签： loop   twitter-bootstrap   小码农  

相关推荐

如何在loop_end之后将内容插入wp_head

我正在尝试访问帖子上的信息，这样我就可以获得帖子标题和帖子内容，这样我就可以生成相应的OG标签，放在标题中。问题是该信息仅在loop\\u结束后可用。在那个动作发生后，我怎样才能插入头部呢？编辑：下面是正在使用的代码<?php /** * *snip* * standard plugin info * *snip* */ $jobTitle =\"\"; $jobDescription =\"\"; func