Как вывести последние посты нестандартной сеткой в wordpress?

Question

[Александр]

Все привет.

Делаю нестандартный вывод постов вот такой плиткой - клик.

Написал вывод таким образом:

$number = 15;
$offset = 4;
// Первый набор статей
$q1 = new WP_Query(array( 'posts_per_page' => $offset ));
echo '<div class="Stripe">';
if( $q1->have_posts() ):
	$i = 0;
	while ( $q1->have_posts() ) : 
		$i++;
		if( 1 == $i ){
			echo '<div class="Stripe-col__single">';
			$q1->the_post();
			the_title();
			echo '</div>';
		}
		else{
			echo '<div class="Stripe-col__vertical-triple">';
			for ($j=0; $j < $offset - 1 ; $j++){
				$q1->the_post();
				echo '<div class="Stripe-col__full">';
				the_title();
				echo "</div>";
			}
			echo '</div>';
		}
	endwhile;
endif;
echo '</div>';
wp_reset_query();

// Второй набор статей
$q2 = new WP_Query(array(
	'posts_per_page' 	=> $number - $offset,
	'offset'	=> $offset
));

if ( $q2->have_posts() ) {
	while ( $q2->have_posts() ) {
		$count_row = ceil(($number - $offset) / 2.5);
		for ($i=0; $i < $count_row; $i++) { 
			echo '<div class="Stripe">';
			if( $i % 2 == 0 ){
				for ($c=0; $c < 2 ; $c++) { 
					$q2->the_post();
					if ( get_the_title() !== '') {
						echo '<div class="Stripe-col__double">';
						the_title();
						echo '</div>';
					}
				}
			}
			else{
				for ($n=0; $n < 3; $n++) { 
					$q2->the_post();
					if ( get_the_title() !== '') {
						echo '<div class="Stripe-col__horizontal-triple">';
						the_title();
						echo '</div>';
					}
				}
			}
			echo '</div>';
		}
	}
}

Я решил использовать два экземпляра WP_Query. Первый - для первых четырех записей, и второй - для всех остальных.

В принципе, этот код решает мою задачу и выводит все как нужно, но, кажется, что он слишком замудренный, и возможно, все это дело можно упростить. Или упростить хотя бы часть кода.

Например, не нравятся вот такие повторяющиеся моменты:

$q2->the_post();
if ( get_the_title() !== '') {
	echo '<div class="Stripe-col__horizontal-triple">';
	the_title();
	echo '</div>';
}

Подскажите пожалуйста, как это возможно сделать?

P. S. вместо the_title() будет подгружаться шаблон одной записи.

Answer 1

[starostyants]

Попробуйте рассмотреть применение сетки для своей задачи: https://jsfiddle.net/starostyants/tpqmafy9/58/
Технология CSS Grid поддерживается последними версиями браузеров: https://caniuse.com/#feat=css-grid

И тогда код можно упростить:

$number = 15;
$q = new WP_Query(array( 'posts_per_page' => $number ));
if( $q->have_posts() ):
  echo '<div class="container">';
  while ( $q->have_posts() ) : 
      echo '<div class="container__item">';
      $q1->the_post();
      the_title();
      echo '</div>';
    }
  endwhile;
  echo '</div>';
endif;
wp_reset_query();

Comments

[Александр]

спасибо, интересное решение.

А если, к примеру, после первых 9 записей, мне нужно сделать вывод чередованием по две строки вот так.

[starostyants]

Александр, к сожалению, для Вашей задачи решения чисто на CSS нет. Для чередования элементов придется прописывать дополнительные селекторы к блокам. Фиддл - обновил ссылку