如何在不同的引导 div 网格中显示 wordpress 帖子？答案

【问题标题】：How to show wordpress posts in a different bootstrap div grid?如何在不同的引导 div 网格中显示 wordpress 帖子？
【发布时间】：2014-07-21 15:41:04
【问题描述】：

<?php while(have_posts()) : the_post() ?>
 <?php global $post;
    $loop = new WP_Query( array( 'posts_per_page' => 20 ) );
    while ( $loop->have_posts() ) : $loop->the_post();
       if ( has_post_thumbnail()) {
             the_post_thumbnail();
        }
  <?php endwhile; ?>
  <?php endwhile;?>
 <?php endif ;  ?>

上述代码用于检索特征图像，问题：如何在不同的引导网格中显示 wordpress 帖子，如下图所示：

第一个帖子像我标记的大一个 (1) 第二个帖子像我标记的这个图像 (2) 第三个帖子就像我标记为 (3) 的这张图片，第四个帖子也是如此。

请大家多多指教..

我在引导程序中做到了这一点：

<div class="row" style="width:100%;height:460px;">

       <div class="col-xs-6" >
            <div class="row">
                <div class="col-xs-12" style="background:#F90;height:460px;">               
                </div>
            </div>
       </div>

      <div class="col-xs-6">  
           <div class="row">
               <div class="col-xs-12" style="background:#333;height:230px;"></div>
           </div>               
           <div class="row">
               <div class="col-xs-6" style="background:#933;height:230px;"></div>
               <div class="col-xs-6" style="background:#093;height:230px;"></div>
           </div>                 
          </div>                
      </div>

如何将它们混合在一起？

【问题讨论】：

修改您的循环以跟踪您正在输出的帖子，并在每个阶段转储出适当的 html...
@MarcB 我需要你的帮助..请帮帮我
为什么要在主循环中运行自定义循环。为什么要使用全局变量
@PieterGoosen 我刚刚在 google 中找到了这段代码。还有什么办法吗？

标签： jquery css wordpress twitter-bootstrap

【解决方案1】：

我通过使用 Matrix 解决了这个问题，如果你使用 Matrix 来提出这个建议，相信我它太棒了，只需测试一下就可以了，详情如下：

    <?php global $post;

                        $loop = new WP_Query( array( 'posts_per_page' => 8 ,'category_name'=>'Arabic') );

                        $posts = array();

                         while ( $loop->have_posts() ) : 

                            $items = array();

                            $items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
                            $items['Image'] = get_the_post_thumbnail($loop->the_post());
                            $items['LinkPost']=get_permalink($post->ID);
                            $items['Title']=get_the_title($post->ID);
                            $items['PostTime']=get_the_time('M d,Y', $post->ID);


                            array_push($posts, $items);


                         endwhile;

                        for($i = 0; $i< count($posts); $i+=4){



                            echo "<div class='row'>";

                                ?>

    <div class="col-xs-6 col-sm-3" >

                                 <?php
                                       echo "<a href='".$posts[$i]['LinkPost']."'>".$posts[$i]['Image']."</a>";
                                  ?>


                                </div>

                                <div class="col-xs-6 col-sm-3 ">

                                     <?php
                                           echo "<a href='".$posts[$i+1]['LinkPost']."'>".$posts[$i+1]['Image']."</a>";
                                      ?>

 </div>

                                <div class="col-xs-6 col-sm-3>

                                     <?php
                                           echo "<a href='".$posts[$i+2]['LinkPost']."'>".$posts[$i+2]['Image']."</a>";
                                      ?>

  </div>
                                <div class="col-xs-6 col-sm-3 ">

                                     <?php
                                           echo "<a href='".$posts[$i+3]['LinkPost']."'>".$posts[$i+3]['Image']."</a>";
                                      ?>
                                  </div>




                            <?

                        echo "</div>";



                    }

                    ?>

【讨论】：

【解决方案2】：

尝试以下方法：

<?php if(have_posts()): ?>
<div class="row" style="width:100%;height:460px;">
<?php   
        while(have_posts()) : the_post(); 
            global $post;
            $loop = new WP_Query( array( 'posts_per_page' => 4 ) );
            if($loop->have_posts()):
                $count=1;
                while ( $loop->have_posts() ) : $loop->the_post();
                    if($count==1):
?>
    <div class="col-xs-6" >
        <div class="row">
            <div class="col-xs-12" style="background:#F90;height:460px;">
                <?php the_post_thumbnail(); ?>         
            </div>
        </div>
<?php               
                    elseif ($count>1 ) : ?>
        <div class="row">
<?php
                        if($count==2):
?>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-12" style="background:#333;height:230px;">
                    <?php the_post_thumbnail(); ?>         
                    </div>
                </div>
                <div class="row">
<?php                   else:?>
                    <div class="col-xs-6" style="background:#933;height:230px;">
                    <?php the_post_thumbnail(); ?>         
                    </div>
<?php                   endif; ?>
                </div>
<?php               endif; ?>
            </div>
        </div>
<?php               $count++;
                endwhile;
            endif;
?>
</div> <!-- / top row -->
<?php endif;?>

【讨论】：