3列WordPress布局帮助需要 [英] 3 column WordPress layout help needed

问题描述

我正在忙于为我的博客的首页放置一个3x3杂志风格的布局。

I'm busy trying to put together a 3x3 magazine-style layout for the home page of my blog.

我想让包含每个帖子的div垂直流动所以在每行3下没有大的空格。看起来最简单的方法是有三列，并填充每一个（这将阻止在每个后块下面一个大空间）然后将这三个柱并排放置。

I want the divs containing each post to flow vertically so there aren't big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.

问题是，Wordpress循环需要按顺序提取帖子。我不知道如何改变Wordpress循环的顺序，即使我已经尝试了一些PHP欺骗使用计数和循环，我似乎不能得到它的工作。

The problem is that the Wordpress loop needs to pull posts sequentially. I don't know how to change the order of the Wordpress loop and, even though I've tried some PHP trickery using counts and for loops, I can't seem to get it to work.

对基本的Wordpress循环或CSS方式的任何想法或建议，使其工作将非常感谢，因为它驱使我疯了！

Any thoughts or advice on a basic Wordpress loop or CSS way to make it work would be much appreciated as it's driving me crazy!

您可以在 http://www.unleashreality.com/ 查看当前的状态。 p>

You can see how it is currently at http://www.unleashreality.com/

推荐答案

使用循环操作的直接方法可以更简单，假设你的布局是固定的，如模型图像所示。

The direct way using loop manipulation could be simpler assuming your layout is going to fixed one as shown in the mockup image.

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

调整代码以使用内页。

这篇关于3列WordPress布局帮助需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！