Нужна помощь по верстке WordPress в 3 колонки

Question

Я занят, пытаясь собрать макет в стиле журнала 3х3 для домашней страницы моего блога.

Я хочу, чтобы элементы div, содержащие каждое сообщение, проходили вертикально, поэтому под каждой строкой 3 не должно быть больших пробелов. Кажется, что самый простой способ сделать это - создать три столбца и заполнить каждый из них (что остановитесь там, чтобы быть большим пространством под каждым постблоком), а затем разместите эти три столбца рядом.

Проблема в том, что цикл Wordpress должен последовательно извлекать сообщения. Я не знаю, как изменить порядок цикла Wordpress, и, хотя я попробовал некоторые хитрости PHP с использованием счетчиков и циклов for, я не могу заставить его работать.

Любые мысли или советы по поводу базового цикла Wordpress или CSS-способа заставить его работать, будут очень благодарны, так как он сводит меня с ума!

Вы можете видеть, как это в настоящее время в http://www.unleashreality.com/

Answer 1

Это похоже на работу для jQuery Masonry.

Проверьте это на http://masonry.desandro.com/

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

Настройте код для работы с внутренними страницами.

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>