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

Question

[Дмитрий]

Доброго времени суток, на сайте нужна не правильная сетка, сверстал, но как организовать там вывод постов не пойму, как организовать тако цикл, ведь блок в такой сетке не один. Подскажите пожалуйста, с примером. Спасибо.

Comments

[Александр]

покажите сетку

[Дмитрий]

<div class="gr1 n im_kor">
                            <div class="op">
                            </div>
                        </div>
                        <div class="gr2 v">
                            <div class="gr3">
                                <div id="bl2" class="gr4 n im_kor">
                                    <div class="op">
                                    </div>
                                </div>
                                <div id="bl3" class="gr5 n im_kor">
                                    <div class="op">
                                    </div>
                                </div>
                            </div>
                            <div id="bl4" class="gr6 n im_kor">
                                <div class="op">
                                </div>
                            </div>
                        </div>

Такая вот сетка, css-grid - ом пока не умею

[Дмитрий]

[Дмитрий]

Александр,

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Подобный вопрос не раз тут задавали. Рекомендую поискать ответы.
А так отвечу общими словами - реализовать можно разным способом:
1) на клиентской стороне средствами js или css.
2) на сервере средствами php

Средствами css заключается в применении стилей на такие псевдоклассы, как: nth-child
Средствами php реализуется следующим способом. В цикле вывода записей получаете индекс записи или же заводите счетчик. И на каждый n-ный элемент применяете тот или иной css класс.
Вот, чтобы получить индекс записи внутри цикла
https://stackoverflow.com/questions/19303556/wordp...
$wp_query->post_count
А вот, и счетчик:

<?php 
 $count = 0; //set up counter variable
 while (have_posts()) : the_post(); 
 $count++; //increment the variable by 1 each time the loop executes
 // here put the code for normal posts
 endwhile;
 ?>

Средствами js почти тоже самое, что и в рнр. Только считаете посты уже на клиентской стороне и добавляете нужный класс.

Answer 2

[Anton]

Вот поэтому нужно делать дизайн универсальный а не прибитый гвоздями, плохая верстка...
Размеры и стили блоков нужно прописывать в css а не извращаться классами с разными именами.

Если ничего не изменить, то придется заводить счетчик $i и плясать с Ифами на пример вот так

$num = 1; //Число

if($num % 2 === 0)
  echo 'Четное';
elseif
  echo 'Нечетное';

и тому подобные пляски...

Как по мне проще дизайн переделать что бы блоки шли по порядку

<div class="main">
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>
    <div class="item">
        <img src="image1.jpg">
        <p>Text</p>
    </div>    
</div>

а в css уже использовать всякие :nth-child штуки вот такого плана:

.item:nth-child((3n+0)){
//тут стили что бы блок был нужной формы
}

.item:nth-child((1n+0)){
//тут стили что бы блок был нужной формы
}

.item:nth-child((2)){
//тут стили что бы блок был нужной формы
}

Comments

[Дмитрий]

А при чём сдесь сама вёрстка то?! В вашем случае блоков всё раво 3, и простой цикл не подойдёт.

[Anton]

Дмитрий, для примера и положил 3 блока. Блоки то одинаковые, поэтому не нужны пляски с отловом какой по очереди пост, цикл будет проще, менять дизайн будет проще:

<div class="main">
<?php  while (have_posts()) : the_post();  ?>
    <div class="item">
        <img src="<?php show_image_src($post->ID)?>">
        <p><?php show_content($post->ID)?></p>
    </div>    

<?php endwhile; ?>
</div>