WordPress как на ладони

Как разбить цикл на группы? Цикл WordPress (слайдер)

Добрый день. Возникла необходимость вставить слайдер у которого внутри блока несколько картинок и все они добавляются из админки.

Верстка у слайдера имеет вид:

<div class="owl-carousel">
	<div class="img-contain">
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/1d.png" alt="1"><p>1</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/2d.png" alt="2"><p>2</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/3d.png" alt="3"><p>3</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/4d.png" alt="4"><p>4</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/5d.png" alt="5"><p>5</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/6d.png" alt="6"><p>6</p></div>
	</div>
	<div class="img-contain">
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/7d.png" alt="7"><p>7</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/8d.png" alt="8"><p>8</p></div>
		<div class="img-block"><img src="<?php bloginfo('template_url');?>/img/number/9d.png" alt="9"><p>9</p></div>
	</div>
</div>

Код цикла WordPress в данный момент имеет вид:

<?php $my_projects = new WP_Query(array('post_type' => 'sliders',)); ?>
<?php if ( $my_projects->have_posts() ) : ?>
	<div class="owl-carousel">
		<div class="img-contain">
		<?php while ( $my_projects->have_posts() ) : $my_projects->the_post(); ?>
					<div class="img-block">
						<?php the_post_thumbnail('medium', array('class' => 'miniatureTopSlider')); ?><p><?php the_title();?></p>
					</div>
		<?php endwhile; ?>
		</div>
	</div>
<?php else: ?>
<?php endif; ?>

Собственно необходимо сделать так, чтобы после шести картинок - wordpress закрывал тег с классом "img-contain" и открывал его снова продолжая вставлять картинки.

Заранее спасибо за ответы!!!

Сайт на котором расположен слайдер fishboneproject.com. В нем есть статичный пример с красными картинками, который показывает - как должен слайдер работать, а ниже обычные картинки, которые в данный момент являются циклом, но не работают как надо.

0
Гость
8.5 лет назад
  • 0
    Kama9621

    Этот код закрывает и открывает теги </div><div class="img-contain"> спустя 6,12,18... элементов цикле.

    <?php
$my_projects = new WP_Query( array('post_type' => 'sliders',) );

if( $my_projects->have_posts() ){

	// открываем
	echo '
	<div class="owl-carousel">
		<div class="img-contain">';

	// цикл
	$i = 1; // счетчик
	$pcount = count( $my_projects->posts );
	while( $my_projects->have_posts() ){
		$my_projects->the_post();

		echo '
		<div class="img-block">
			'. get_the_post_thumbnail('medium', array('class' => 'miniatureTopSlider') ) .'
			<p>'. get_the_title() .'</p>
		</div>
		';

		// если это картинка кратная 6, закроем и откроем контейнеры
		if( ! ($i++ % 6) && ($pcount != $i) )
			echo '</div><div class="img-contain">';
	}

	// закрываем
	echo '
		</div>
	</div>';
}
?>
    8.5 лет назад #
    Вадим 7.8 лет назад

    Приведенный вами код работает, но 1 но. Если элементов ровно, то есть именно 6,12,18, то в конце перебранного массива создается пустой div и javascript подхватывает и его, например добавляет страницу пагинации с пустым содержимым. Был бы крайне признателен если вы напишите условие при котором, при кратном количестве элементов в массиве не создавался бы пустой div.

    Kama 7.8 лет назад

    Добавил проверку 

    $pcount = count( $my_projects->posts ); // всего записей
// ...
&& ($pcount != $i)

    Првоерьте плз

    Вадим 7.8 лет назад

    В общем спасибо за дополнительное условие с проверкой количества постов!

    Правильно начало работать при таких условиях:

    // цикл
	$i = 0; // счетчик ставим в ноль
	$pcount = count( $my_projects->posts ); // всего записей
//  ....
//  ....
//  ....
	$i++;  // увеличиваем счетчик не в условии проверки на четность, а до
	// если это картинка кратная 6, закроем и откроем контейнеры
		if( ! ($i % 6) && ($pcount != $i) )
			echo '</div><div class="img-contain">';
    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация