WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Как разделить вывод постов в цикле

Добрый, день уважаемые. Помогите с решением такой задачи, функция WP_Query дергает с базы 12 постов мне необходимо каждые 4 поста помещать в Bootstrap

как это реализовать в цикле ? Код

 <div class="container">
	<div class="col-md-4">
		<?php

		$query = new WP_Query(array(
				'category_name' => 'poleznie',
				'posts_per_page' => 12,
				'orderby' => 'date')
		);

		while ($query->have_posts()) {
			$query->the_post(); ?>
			<p class="tips_nav__item"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>

		<?php} ?>
	</div>
</div>

Сейчас все 12 выводятся в один блок

Заметки к вопросу:
Justin 5.9 лет назад

Используйте переменную-счётчик, до цикла объявляйте, в начале цикла увеличивайте на один. Теги ячейки BS (закрывающий и открывающий) отображайте внутри цикла, но только на каждую 1, 5, 9 итерации (значения счётчика).

Sasha Lifestar 5.9 лет назад

каждые 4 поста помещать в Bootstrap

Как это вообще можно понять?) ты бы хоть привёл HTML код результата

petrozavodsky 5.9 лет назад

Вот так

<div class="container">
	<div class="col-md-4">
		<?php

		$query = new WP_Query(array(
				'category_name' => 'poleznie',
				'posts_per_page' => 12,
				'orderby' => 'date')
		);

		$i = 1;
		while ($query->have_posts()) {

			if (1 == $i){
				echo "<div>";
			}
				$query->the_post(); ?>
			<p class="tips_nav__item"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>

			<?php

			if (4 == $i){
				echo "</div>";
			}

			$i++;
			if ($i > 4) {
				$i = 1;
			}
		} ?>
	</div>
</div>
0
BlackStar1991
5.9 лет назад 9
  • 0

    Предположу что ты хочешь вывести определенный блок состоящий из 4 частей в линию

    <div class="row">
    	<div class="col-4"></div>
    	<div class="col-4"></div>
    	<div class="col-4"></div>
    	<div class="col-4"></div>
    </div>
    <div class="row">
    ....

    Возможно этот код поможет, и ты поймешь как выводить что то на каждый четвертый элемент

    Ключевое это проверка if($i % 4 == 1) и if($i % 4 == 0)

    for($i = 1; $i <= 9; $i++){
    	echo "\n $i ";
    	if($i % 4 == 1){
    		echo " alpha";
    	}elseif($i % 4 == 0){
    		echo " omega";
    	}
    }

    Учись задавать вопросы правильно и понятно, иначе тебе никто не поможет.

    Kama 5.9 лет назад

    == 1 не совсем то - оно вообще не нужно, надо просто проверять есть остаток или нет, т.е. === 0 или просто через !.

    Комментировать
  • 2
    Kama9616

    Тут есть ответ на твой вопрос.

    Числа кратные к N или каждый N-ый блок в цикле

    Нужно разделить число на число и если остатка нет, то первое число делиться нацело на второе, а значит кратное.

    $num = 21;
    $n   = 3;
    if( ! ($num % $n) ){
    	echo "$num кратно $n";
    }

    Где применить эту кратность?

    Допустим, есть цикл записей и нужно к каждому третьему блоку добавить отдельный css класс. Тут-то кратность нам и поможет.

    $i = 1;
    foreach( $posts a $post ){
    	if( ! ($i++ % 3) ){
    		// каждый третий блок в цикле
    	}
    }

    В твоем случае

    нужно после каждого 4-го блока ставить нужный разделитель в виде тегов, точно не знаю что там должно получиться, ну примерно как-то так:

    <div class="container">
    	<?php
    	$echo_open = static function() {
    		?>
    		<div class="row">
    			<div class="col-md-4">
    		<?php
    	};
    	$echo_close = static function() {
    		?>
    			</div><!-- col-md-4 -->
    		</div><!-- row -->
    		<?php
    	};
    
    	$echo_open();
    
    	$query = new WP_Query( [
    		'category_name'  => 'poleznie',
    		'posts_per_page' => 12,
    		'orderby'        => 'date'
    	] );
    
    	$i = 1;
    	while ( $query->have_posts() ) {
    		$query->the_post();
    		?>
    		<p class="tips-nav">
    			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    		</p>
    		<?php
    		// четвертый блок
    		if ( ! ( $i++ % 4 ) ) {
    			$echo_close();
    			$echo_open();
    		}
    	}
    
    	$echo_close();
    	?>
    </div>
    wisedev 8 месяцев назад

    Этот вариант работает, но нужно учесть еще один момент: проверку на закрытие тегов. Например, нам нужно выводить по 3 записи и каждую тройку оборачивать в свою обертку с классом. (Мне нужно было это когда делал с display:grid и там каждая 1-я и 6-я запись имела большую превью картинку). Вот тут нужно учесть что всего записей может быть не кратное 3м и тогда будет баг по HTML структуре так как закрытие div может не сработать корректно. Как вот в этом приведенном примере. Тут col-md-4 и row закрываются корректно только если по итогу будет записей в $query кратное 4м!!! Поэтому тут тоже нужно продумать этот вариант. Код приводить тут не буду, так как не особо он и сложный.

    Kama 8 месяцев назад

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

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация