如何在每个循环中放置三个帖子？

Question

我需要创建类似这张图片的内容

图片

如何在每个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; ?>

任何建议，任何想法

非常感谢！

Answer 1

我会使用计数变量并将其与一些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; ?>

Answer 2

我认为你不会在每个lopp中放三个帖子，但你只需用计数器管理它们：

$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>

Answer 3

首先按照以下数组中的图像类型对所有帖子进行排序：

<?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>