需要 3 列 WordPress 布局帮助答案

【问题标题】：3 column WordPress layout help needed需要 3 列 WordPress 布局帮助
【发布时间】：2012-01-26 09:06:59
【问题描述】：

我正忙着为我的博客主页设计一个 3x3 杂志风格的布局。

我希望包含每个帖子的 div 垂直流动，因此每行 3 下没有大的空白。似乎最简单的方法是拥有三列并填充每一列（这将不要在每个柱子下方留出很大的空间），然后将这三列并排放置。

问题在于 Wordpress 循环需要按顺序拉出帖子。我不知道如何更改 Wordpress 循环的顺序，即使我尝试了一些使用计数和 for 循环的 PHP 技巧，我似乎也无法让它工作。

任何关于基本的 Wordpress 循环或 CSS 方式使其工作的想法或建议将不胜感激，因为它让我发疯！

您可以在http://www.unleashreality.com/查看它目前的情况

【问题讨论】：

标签： css wordpress layout

【解决方案1】：

这看起来像是 jQuery Masonry 的工作。

查看http://masonry.desandro.com/

【讨论】：

【解决方案2】：

假设您的布局将固定一个，如模型图像所示，使用循环操作的直接方法可能更简单。

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

调整代码以使用内页。

【讨论】：

awesome 没有意识到我可以使用 PHP 一次输出所有内容...非常感谢！ :)

【解决方案3】：

如果您想在不使用 Javascript 的情况下执行此操作，则需要为 post 循环中的每一列缓冲 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>

【讨论】：