Question

<?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帖子，如下图所示：

enter image description here

首先发布像一个大的帖子，因为我标记了（1）第二个帖子，就像我标记的那样（2）第三个帖子就像我标记的那个图像（3）和第四个帖子一样。

请说，你的建议......

我在bootstrap中做到了这一点：

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

enter image description here

如何将它们混合在一起？

Answer 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>";



                    }

                    ?>

Answer 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;?>

如何在不同的bootstrap div网格中显示wordpress帖子？

2 个答案: