WordPress - 如何将两个或多个循环合并在一起？

Question

I've read the multiple loops codex on WordPress but I'm still a bit confused on how to do this.

I have to run 3 queries from the default query.

-1 = the most recent post from X category

-2 = all posts from Y category

-3 = all posts except the most recent (because it's pulled in -1) of X category

This is how I currently have my index.php set up:

<?php

get_header(); ?>

    <?php
        $args = array(
            'posts_per_page' => 1,
            'category_name' => 'news',
        );
        $news_query = new WP_Query( $args );
        if ( $news_query->have_posts() ) :
            ?>

            <?php while ( $news_query->have_posts() ) : $news_query->the_post(); ?>

                <?php
                    $featured_img = get_the_post_thumbnail_url( $post->ID, 'full' );
                    $date = Date('m/y');
                    $title = get_the_title($post->ID);
                    $link = get_the_permalink($post->ID);               
                ?>

                <?php echo '<div class="recent-news-banner" style="background: url(' . $featured_img . ') no-repeat center center; background-size: cover;">'; ?>

                <?php echo '<div class="container"><div class="row"><div class="col-md-8"><div class="' . 'entry-meta' . '"><div class="meta-date">' . $date . '</div><div class="meta-info"><div class="meta-title"><h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2><div class="meta-excerpt">' . get_the_excerpt() . '</div></div></div></div></div></div>'; ?>

                <?php echo '</div>'; ?>

            <?php endwhile;?>

        <?php else : ?>
            <p><?php _e( "No News Found", 'news' ); ?></p>
        <?php wp_reset_postdata(); ?>
        <?php endif 
    ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php
            $args = array(
                'posts_per_page' => -1,
                'category_name' => 'events',
            );
            $events_query = new WP_Query( $args );

            echo '<div id="owl-testimonials" class="owl-theme owl-carousel container"><div class="row"><div class="col-xs-12">';

            if ( $events_query->have_posts() ) :
                ?>

                <?php while ( $events_query->have_posts() ) : $events_query->the_post(); ?>

                    <?php
                        $featured_img = get_the_post_thumbnail_url( $post->ID, 'full' );
                        $date = Date('F j, Y');
                        $title = get_the_title($post->ID);
                        $link = get_the_permalink($post->ID);               
                    ?>

                    <?php echo '<div class="event-item" style="background: url(' . $featured_img . ') no-repeat center center; background-size: cover;">'; ?>

                    <?php echo '<div class="meta-date">' . $date . '</div>'; ?>

                    <?php echo '</div>'; ?>

                    <?php echo '<div class="meta-info"><div class="meta-title"><h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3></div></div>'; ?>

                <?php endwhile;?>

                <?php echo '</div></div></div>'; ?>

            <?php else : ?>
                <p><?php _e( "No News Found", 'news' ); ?></p>
            <?php wp_reset_postdata(); ?>
            <?php endif 
        ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_footer();

I wrote it out as two wp_queries but the second one won't load on my page. I haven't attempted the third because of this. First off is wp_query fine for the default loop? Second, how can I rework this so it'll work with more than loop.

Answer 1

There are a couple issues with your code, but I don't believe the loops are incorrect. I am able to see the content generated in the second loop in your page source; it appears that Owl Carousel is not being initialized.

Issue 1: Nothing is being assigned to $, so the $('#owl-events').owlCarousel(...) call isn't working (in fact, it doesn't look like anything in main.js is working. You'll need to either let jQuery take over $ or explicitly use jQuery instead of $.

Issue 2: Unclosed divs. In the first loop you echo out 9 divs, but close only 8 of them. This is really easy to miss when piling them all on one line. You don't need to echo that content, you could just inline them on the page, and intersperse php where needed, and maintain some formatting so you can see what's going on. For example:

...
<?php while ( $news_query->have_posts() ) : $news_query->the_post(); ?>
...
  <div class="recent-news-banner" style="background: url(<?= $featured_img ?>') no-repeat center center; background-size: cover;">'; ?>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <div class="entry-meta">
            <div class="meta-date"><?= $date ?></div>
            <div class="meta-info">
              <div class="meta-title">
                <h2>
                  <a href="<?= get_permalink() ?>"><?= get_the_title() ?></a>
                </h2>
                <div class="meta-excerpt"><?= get_the_excerpt() ?></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- uh oh, not enough closing divs -->
<?php endwhile;?>
...

There may be other issues, but these two should give you a start and allow you (and us) to see any thing else that might be awry.