Вывод записей по несколько элементов в строку или в колонку

Задача: отобразить выводимые записи по несколько элементов в строку или в столбец в цикле foreach

  • eye 71
  • 1

В дизайнах часто встречаются блоки, в которых записи отображаются по несколько элементов в строку или столбец, при этом в верстке они так и реализованы, поэтому стандартным циклом их вывести не получится. Добавить счётчик в цикл и выводить нужные теги при достижении определенных чисел — скажите вы? Не очень надежный вариант.
Вот каким способом пользуемся мы:

$posts = new WP_Query( array( 
	// $cat_ID - ID нужной категории
	'cat' => $cat_ID, 
	'posts_per_page'=>  10,
	) );

// Для начала получим необходимые нам записи
$query = $posts->posts;

wp_reset_query();

// Теперь разделим наш массив записей на массивы, в которых будет содержаться по 2 записи в каждом
$posts_chunk = array_chunk($query, 2);

?>
<!-- Начинаем перебирать массивы содержащие внутри по 2 запси, будем называть их строками -->
<?php foreach ($posts_chunk as $posts_chunk_row ) { ?>
	<!-- Обертка строки -->
	<div class="posts__row">
		<!-- А теперь перебираем наши массивы записей, устанавливаем глобальную переменную $post и внутри цикла выодим данные записи как обычно-->
		<?php foreach ($posts_chunk_row as $post ) { setup_postdata( $post ); ?>

			<div class="posts__item">
				<div class="posts__image-hex">
					<a href="<?php the_permalink( ); ?>">
						<?php the_post_thumbnail( 'post-thumbnail'); ?>
					</a>
				</div>
				<div class="posts__capt">
					<h4><a href="<?php the_permalink( ); ?>" ><?php the_title(); ?></a></h4>
				</div>
				<div class="posts__text">
					<span><?php the_excerpt(); ?></span>
				</div>
				<div class="posts__button">
					<a href="<?php the_permalink( ); ?>" class="btn btn--blue"><?php esc_html_e( 'Подробнее', 'project' );  ?></a>
				</div>
			</div>
		<!-- Завершаем цикл перебора записей -->
		<?php } ?>
	<!-- Закрываем обёртку нашей строки -->
	</div>
<!-- Завершаем цикл перебора строк -->
<?php } ?>

<?php wp_reset_postdata(); // возвращаем обратно данные глобальной переменной  $post?>

Преимущества данного метода в том, что вы можете вывести любое количество записей в строку, поделив массив записей. И даже если последний массив будет не до конца заполнен записями, то строка всё равно будет завершена обёрткой и ошибок не будет.

comments powered by HyperComments

Поделиться

На вашу почту будет отправлена одноразовая ссылка на портфолио

Отправлено!

Что-то пошло не так... Попробуйте отправить позже