WordPress как на ладони
5 премиум тем, 7 плагинов, 4 лендинга и 45 дизайнерских блоков для WordPress с 96% скидкой. От TemplateMonster.com wordpress jino

Как разбить цикл на группы? Цикл 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
Гость
2.9 года назад
  • 0
    Kama6809

    Этот код закрывает и открывает теги </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>';
    }
    ?>
    Вадим 2.2 года назад

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

    Kama 2.2 года назад

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

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

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

    Вадим 2.2 года назад

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

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

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