Как поставить три сообщения в каждом цикле?
мне нужно создать что-то вроде этой картины
Картина
Как поместить три сообщения в каждом цикле WordPress? с разными классами?
В каждом цикле поместите три сообщения.
PHP
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?><div class="row">
<div class="col-md-6">
<?php the_post_thumbnail( 've' ); ?> <!-- Vertical Image Size : 300*600 px (width/height) -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
</div>
</div>
</div>
<?php
endwhile;
?> </div> <!-- / .owl-carousel --> <?php
}
Я использую OWL Carousel и мне нужно разместить три поста в каждом слайде,
HTML
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
<img src="Vertical" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
</div>
</div>
</div>
<?php endwhile; ?>
любое предложение, любые идеи
Большое спасибо!
Решение
Я бы использовал подсчетную переменную и использовал бы ее с некоторыми операторами if для определения вывода:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$i = 1;
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="post-<?php if ($i > 1) {echo "right";} else { echo "left"; } ?>">
<?php the_post_thumbnail(); ?>
</div>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif; ?>
Другие решения
Я думаю, что вы не помещаете три поста в каждый lopp, но вы просто управляете ими с помощью counter:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$cont = 0;
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) : $the_query->the_post();
$supp = $cont % 3;
switch($supp)
{
case 0: $vert = get_the_post_thumbnail_url(); break;
case 1: $oriz1 = get_the_post_thumbnail_url(); break;
case 2: $oriz2 = get_the_post_thumbnail_url(); break;
}
$cont ++;
endwhile;
}
После печати HTML
<div class="row">
<div class="col-md-6">
<img src="<?php echo $vert; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php echo $oriz1; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php echo $oriz2; ?>" alt="">
</div>
</div>
</div>
</div>
Сначала отсортируйте все сообщения по типу изображения в другом массиве следующим образом:
<?php
$counter = 0;
$index = 0;
$all_posts = array();
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ($counter != 3) {
$all_posts[$index][] = get_the_post_thumbnail_url();
$counter ++;
} else {
$index ++;
$counter = $index;
$all_posts[$index][] = get_the_post_thumbnail_url();
}
}
После этого Вы можете создавать новый массив и устанавливать изображения по размеру.
<?php foreach ($all_posts as $key => $current_posts): ?>
<div class="row">
<div class="col-md-6">
<img src="<?php $current_posts[$key][0]; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php $current_posts[$key][1]; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php $current_posts[$key][2]; ?>" alt="">
</div>
</div>
</div>
</div>