@Miqo58

Wordpress цикл bootstrap grid?

Код отображает правильно как я хотел выстроить их но мне кажется что код можно улучшить или можно использовать так как он есть в картинке подробнее нарисовано конечный итог чего я хотел бы.
При использовании одного while в класс col-3 помещается один пост и создается несколько классов col-3 чего я не хочу мне надо в один col-3 поместить сразу два поста Спасибо.
5c589def0a300466314415.jpeg
<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>
  • Вопрос задан
  • 936 просмотров
Решения вопроса 1
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Давайте уже закроем этот вопрос. Несколько моментов:

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 по его индексу в массиве.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы