Как реализовать вывод записей в виде колонок разного вида?

Question

[Расул Гитинов]

Такая ситуация:

Не могу найти информацию о том, как вывести записи в таком виде:



Нужно реализовать именно так, т.е. есть два вида, квадратный и прямоугольный и выводиться они должны именно в этом порядке. Может какой-нибудь цикл нужно прописать или это как-то по другому делается. Кто сталкивался, отпишитесь.

Answer 1

[Игорь Воротнёв]

1. На стороне PHP - перед циклом стартовать счетчик, дальше проверять:

<?php
$step = 1;
while( have_posts() ) : 
    the_post();

    if( $step % 9 == 0 ) { // каждому 9му прописываем кастомный класс
        $class = 'nine';
    } elseif( ( $step % 5 ) % 2 !== 0 ) { // тут хитрее, каждому 5му через один шаг (5, 15, 25...)
        $class = 'five';
    } else {
        $class = '';
    }
    ?>

    <!-- A тут уже выводим элемент и дописываем класс -->
    <div class="<?php echo $class; ?>">
        ...
    </div>

    <?php
    // Увеличиваем счетчик
    $step ++;
endwhile;
unset( $step ); // Не обязательно, но лучше такие вещи подчищать. Нано-оптимизация :)
?>

2. Но лучше через CSS

/* Каждый 9й элемент */
.item:nth-child(9n) {
     ...
}
/* Каждый 5й, но через один (нечетный) */
.item:nth-child(5n):nth-child(odd) {
    ...
}

Comments

[Расул Гитинов]

Интересно! А именно в моем случае как это сделать?

[Расул Гитинов]

С помощью CSS

[Игорь Воротнёв]

Расул Гитинов: Расул, предоставленный код именно для вашего случая :) У вас кратность повторения блоков = 10, каждый 5й нечетный (5, 15, 25 и тд) и каждый 9й имеют двойную ширину, именно эти селекторы я вам и написал. Вам помочь с самими стилями для сетки?

[Расул Гитинов]

Спасибо большое! Пока попробую сам разобраться.

[Игорь Воротнёв]

Расул Гитинов: На здоровье. Если кратко и в общих чертах - ширина блока .item - 33%, с помощью модификаторов (:nth-child) просто меняете ее на 66%, вот и вся математика. Ну и margin / padding пересчитать, естественно.

[Расул Гитинов]

Ок, спасибо! :)

Answer 2

[Павел]

Записи выводятся через цикл get_posts() или WP_Query(). Добавьте в цикл некую переменную-счетчик и каждой 4-ой или 5-ой записи добавляйте класс нужный. Ну а вообще в CSS есть nth-child.

Answer 3

[Александр]

Ответ на stackoverflow

Answer 4

[IceJOKER]

Просто для интереса для себя нарисовал такую таблицу на JS:
https://jsfiddle.net/x91xr0ed/2/
По-моему получился жуткий гкод (меня можно простить, писал код на усталую голову) :D

это чтоб просто дать понять как можно такое сделать ))

Comments

[Игорь Воротнёв]

Интересное решение, рабочее. Плюс в карму за ванильный js :) Но все же - нафига дергать js если это решается чистым CSS

[IceJOKER]

Игорь Воротнёв: в первой строке объяснил причину )) но + за ваш вариант с CSS, изначально сразу подумал про nth-child() (5n | 9n) , но до селектора - ".item:nth-child(5n):nth-child(odd)" - не догадался, признаюсь честно ))

[Игорь Воротнёв]

IceJOKER: Понял. Для интереса - катит)
У меня недавно была аналогичная задача с этими селекторами, до этого сам не знал что их можно вот так склеивать. Удобная штука.

[IceJOKER]

Игорь Воротнёв: я знал как склеивать , но как-то не додумался, отличное решение данной задачи )

[Игорь Воротнёв]

IceJOKER: Век живи - век учись :)

[IceJOKER]

Игорь Воротнёв: yep )