Question

我正在建立一个博客页面布局，在这里我需要交替显示col-4和col-8列，而不是手动进入每个列并获取所需的帖子。

我曾尝试在col-4内添加循环，但是我无法弄清楚如何在col-4和col-8之间交替

    <?php
    global $wpdb;

    $args = array(
      'post_type' => 'post',
      'orderby' => 'date',
      'order' => 'DESC',
      'nopaging' => true,
    );

    $this_query = new WP_Query( $args );

    ?>
     <section class="ftco-section ftco-project" id="projects-section">
        <div class="container-fluid">
            <div class="row justify-content-center pb-5">
          <div class="col-md-12 heading-section text-center ftco-animate">
              <h1 class="big big-2">Projects</h1>
            <h2 class="mb-4">Our Projects</h2>
          </div>
        </div>
            <div class="row">
            <?php if ( $this_query->have_posts() ) : ?>
        <?php while ( $this_query->have_posts() ) : $this_query->the_post(); ?> 
                <div class="col-md-4">
                    <div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
                        <div class="overlay"></div>
                        <div class="text text-center p-4">
                            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <span>Web Design</span>
                        </div>
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');?>/images/project-5.jpg);">
                        <div class="overlay"></div>
                        <div class="text text-center p-4">
                            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <span>Web Design</span>
                        </div>
                    </div>
                  </div>
                  <?php endwhile; 
                  wp_reset_postdata();
                  else : ?>
                  <p><?php esc_html_e( 'Sorry, no posts found.' ); ?></p>
                  <?php endif; ?>
                </div>
              </div>
            </section>

我希望col-4和col-8自动且交替地填充。我曾尝试这样做，但博客文章不会在col-4和col-8之间交替显示，而只是填充col-4 div中的所有博客文章。

Answer 1

尝试此代码。

<?php $class = "col-md-4"; // 2nd element class ?> 
<?php while ( $this_query->have_posts() ) : $this_query->the_post(); ?> 
<?php
     if($class == "col-md-4") { $class = "col-md-8"; }
    else if ($class == "col-md-8") { $class = "col-md-4"; }

?>
                <div class="<?php echo $class; ?>">
                    <div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
                        <div class="overlay"></div>
                        <div class="text text-center p-4">
                            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <span>Web Design</span>
                        </div>
                    </div>
                  </div>
                  <?php endwhile;

Answer 2

$x=0;

if ( $this_query->have_posts() ) : 
    while ( $this_query->have_posts() ) : $this_query->the_post();
        $class_array = array('col-4', 'col-8');
        $col_class = $class_array[$x%2];
        $x++;

    <div class="<?php echo $col_class ?>"></div>

    endwhile;
   wp_reset_postdata();
endif;

在<div>中包装在col-4和col-8之间交替的博客帖子

2 个答案: