Wordpress цикл bootstrap grid?

Question

[Miqo58]

Код отображает правильно как я хотел выстроить их но мне кажется что код можно улучшить или можно использовать так как он есть в картинке подробнее нарисовано конечный итог чего я хотел бы.
При использовании одного while в класс col-3 помещается один пост и создается несколько классов col-3 чего я не хочу мне надо в один col-3 поместить сразу два поста Спасибо.

<div class="container">
    <div class="row">
	<?php
	$arguments = [
	    'posts_per_page' => 5
	]; 
	$query = new WP_Query( $arguments ); 
		if( $query->current_post <= 0 ){
			 echo '<div class="col-6">';
				the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
				the_title();
			 echo "</div>";
		}

		if( $query->have_posts() ){
			
	 	echo '<div class="col-3">';
		while( $query->have_posts() ) : $query->the_post();
			if( $query->current_post >= 1 && $query->current_post <= 2 ){
				the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
				the_title();
			}
		endwhile;	
 		echo "</div>";

 		echo '<div class="col-3">';
		while( $query->have_posts() ) : $query->the_post();
			if( $query->current_post >= 3 ){
				the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
				the_title();
			}
		endwhile; wp_reset_postdata(); 	
 		echo "</div>";
			 	
		}
	?>
    </div>
</div>

Comments

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

Как вариант - завести счетчик, инкрементировать его внутри цикла и далее в зависимости от счета добавлять тот или иной блок.

[Miqo58]

azerphoenix,
Пример можно вашего кода, и чем не подойдет мой код ?
Спасибо большое за отзыв.

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

azerphoenix, в цикле WP_Query не нужны дополнительные счетчики, один уже есть - встроен в сам объект, $query->current_post

Answer 1

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

Давайте уже закроем этот вопрос. Несколько моментов:

1. Не нужно запускать цикл несколько раз, все условия проверяются внутри одного цикла.
2. Свойство $query->current_post проверяем внутри цикла, счетчик начинается с 0.

<div class="container">
	<div class="row">

		<?php
		$args = [
			'post_status'            => 'publish',
			'posts_per_page'         => 5,
			'no_found_rows'          => true,
			'cache_results'          => true,
			'update_post_meta_cache' => false,
			'update_post_term_cache' => false,
		];
		$query = new WP_Query( $args );

		while ( $query->have_posts() ) : $query->the_post();

			// 1я запись, целиком в .col-6
			if ( $query->current_post === 0 )
			{
				echo '<div class="col-6">'; // Открыли .col-6
					echo '<div class="post-card">';
						the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
						the_title();
					echo '</div>';
				echo '</div>'; // Закрыли .col-6
			}

			// 2я и 4я записи, только открываем .col-3 и выводим 1 запись
			if ( $query->current_post === 1 || $query->current_post === 3 )
			{
				echo '<div class="col-3">'; // Открыли .col-3
					echo '<div class="post-card">';
						the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
						the_title();
					echo '</div>';
			}

			// 3я и 5я записи, выводим запись и закрываем .col-3
			if ( $query->current_post === 2 || $query->current_post === 4 )
			{
					echo '<div class="post-card">';
						the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
						the_title();
					echo '</div>';
				echo '</div>'; // Закрыли .col-3
			}

		endwhile; ?>

	</div>
</div>

Данный код выведет вот такой HTML:

<div class="row">
	<div class="col-6">
		<div class="post-card">
			...
		</div>
	</div>

	<div class="col-3">
		<div class="post-card">
			...
		</div>

		<div class="post-card">
			...
		</div>
	</div>

	<div class="col-3">
		<div class="post-card">
			...
		</div>

		<div class="post-card">
			...
		</div>
	</div>
</div>

Но, важно понимать порядок постов в колонках .col-3 - он будет таким:

.col-6      .col-3      .col-3
------      ------      ------
post-1      post-2      post-4
            post-3      post-5

а не вот таким:

.col-6      .col-3      .col-3
------      ------      ------
post-1      post-2      post-3
            post-4      post-5

В принципе, еще есть другой путь:

- Посты получаете через get_posts() в виде массива объектов WP_Post.
- HTML генерите без цикла, формируете как вам надо.
- В нужных местах подставляете нужный объект WP_Post по его индексу в массиве.

Comments

[Miqo58]

Спасибо вам вы гений
Если очень сильно попрошу можете показать другой путь просто чтобы я окончательно понял спасибо вам большое.

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

Miqo58,

<?php 
// Получаем посты:
$args = [
    'numberposts' => 5,
];
$posts = get_posts( $args );
// В массиве $posts будет содержаться 5 постов, нумерация от 0 до 4.
// Каждый пост - это объект типа WP_Post со всеми стандартными свойствами.
// Далее просто формируем HTML и в нужном месте берем пост по индексу и выводим его свойства:
?>
<div class="row">
  <div class="col-6">
    <div class="post-card">
        <?php
        echo get_the_post_thumbnail( $posts[0], 'custom-size', [ 'class' => 'img-fluid' ] );
        echo get_the_title( $posts[0] );
        ?>
    </div>
  </div>

  <div class="col-3">
    <div class="post-card">
        <?php
        echo get_the_post_thumbnail( $posts[1], 'custom-size', [ 'class' => 'img-fluid' ] );
        echo get_the_title( $posts[1] );
        ?>
    </div>

    <div class="post-card">
        <?php
        echo get_the_post_thumbnail( $posts[2], 'custom-size', [ 'class' => 'img-fluid' ] );
        echo get_the_title( $posts[2] );
        ?>
    </div>
  </div>

  <div class="col-3">
    <div class="post-card">
        <?php
        echo get_the_post_thumbnail( $posts[3], 'custom-size', [ 'class' => 'img-fluid' ] );
        echo get_the_title( $posts[3] );
        ?>
    </div>

    <div class="post-card">
        <?php
        echo get_the_post_thumbnail( $posts[4], 'custom-size', [ 'class' => 'img-fluid' ] );
        echo get_the_title( $posts[4] );
        ?>
    </div>
  </div>
</div>

[Miqo58]

Игорь Воротнёв,
Спасибо вам огромное
Можно еще вопрос а какой вы способ порекомендуете для использование 1-ый варинт или 2-ой ?

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

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

[Miqo58]

Игорь Воротнёв,
Спасибо большое