[英]How to put three posts in each loop?
我需要创建类似这张图片的东西
如何在每个Wordpress循环中放置三个帖子? 不同的班级?
在每个循环中,放置三个帖子。
$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,并且我需要在每个幻灯片中放置三个帖子,
<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; ?>
我认为您不会在每个活页夹中放置三个帖子,而只需使用计数器来管理它们:
$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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.