3栏需要WordPress布局帮助

Question

我忙着为我的博客主页拼凑一个3x3杂志式布局。

我希望包含每个帖子的div垂直流动，因此在每行的3行下面没有大的空白。看起来最简单的方法是有三列并填充每个将停在那里成为每个后块下面的大空间），然后将这三列并排放置。

问题是Wordpress循环需要依次拉帖。我不知道如何改变Wordpress循环的顺序，即使我已经尝试了一些使用计数和for循环的PHP技巧，我似乎无法使它工作。

任何想法或基本的Wordpress循环或CSS方式的建议，使其工作将非常赞赏，因为它让我疯狂！

你可以看到它目前是如何在http://www.unleashreality.com/

Answer 1

使用循环操作可能会更简单，直接的方式假设如图所示的样机图像中的布局要固定一个。

<?php 

    $count = 0; 
    $column_1 = ''; 
    $column_2 = ''; 
    $column_3 = ''; 
    $ad_block = '<div id="ad-block">Ad code here</div>'; 
    while (have_posts()) : the_post(); 

     $count++; 
     $content = ''; 
     $content .= '<div class="post-block">'; 
     $content .= '<h2>'.get_the_title().'</h2>'; 
     $content .= '<div class="excerpt-block">'.get_the_excerpt().'</div>'; 
     $content .= '<div class="continuebutton">...READ THIS ARTICLE</div>'; // Add appropriate code here.. 

     if($count == 1 || $count == 4 || $count == 6) { 
      $column_1 .= $content; 
     } else if($count == 2 || $count == 7) { 
      $column_2 .= $content; 
     } else if($count == 3 || $count == 5 || $count == 8) { 
      $column_3 .= $content; 
     } else { 
      // Shouldn't come here... 
     }      

     // Insert the ad block in column 2 after adding 1st row 
     if($count == 2) {  
      $column_2 .= $ad_block; 
     }      

    endwhile;     
    ?>       
    <div id="col1"><?php echo $column_1;?></div> 
    <div id="col2"><?php echo $column_2;?></div> 
    <div id="col3"><?php echo $column_3;?></div> 

调整代码以使用内部页面。

Answer 2

这看起来像jQuery的砌体工作。

瞧瞧吧http://masonry.desandro.com/

Answer 3

如果你想这样做没有JavaScript，你需要在一次循环结束缓冲每一列的HTML在您的文章循环，然后输出它在一杆。

类似以下内容：

<?php 

    // Hold the buffered column output 
    $cols = array("", "", ""); 

    // Keep track of column we're appending to 
    $currentCol = 0; 

    // Get the posts 
    $posts = get_posts(); 
    foreach($posts as $post){ 

     // Run the WP post filters 
     setup_postdata($post); 

     // Append the content to the current column 
     $cols[$currentCol] .= '<div class="item">'; 
     $cols[$currentCol] .= get_the_title(); 
     $cols[$currentCol] .= get_the_content(); 
     $cols[$currentCol] .= '</div>'; 

     // Increment the current column and make sure we haven't 
     // gone over our total columns 
     if(++$currentCol >= count($cols)){ 
      $currentCol= 0; 
     } 
    } 

?> 

<div id="col1"><?php echo $cols[0]; ?></div> 
<div id="col2"><?php echo $cols[1]; ?></div> 
<div id="col3"><?php echo $cols[2]; ?></div>