Wordpress在两个类别中循环奇数偶数页

Question

I am building a website with ACF and I have two different categories of pages: articles and stories.

I would like build my page such that it is a list alternating articles in stories, but currently I'm getting all the articles first, then all the stories instead of them being interlaced.

You can see the website here http://www.ndstudio.no/wp-mindthegap/

I want the loop to be like this:

POST 1 (ARTICLE)
POST 2 (STORY)
POST 3 (ARTICLE)
POST 4 (STORY)

But at the moment it´s like this:

POST 1 (ARTICLE)
POST 2 (ARTICLE)
POST 3 (STORY)
POST 4 (STORY)

This is my code

<?php
$args = array(
         'cat' => 5,
         'post_type' => array( 'page' ),
         'order' => 'ASC'
);
query_posts( $args );

// The Loop
while ( have_posts() ) : the_post();
?>

<?php $colour = get_field('colour'); ?>
<div class="<?php print $colour; ?>-wrap">
    <div class="first-text-content">
        <h1 class="title-page"><?php the_title(); ?></h1>
        <?php
        // check if the repeater field has rows of data
        if( have_rows('block') ):
            // loop through the rows of data
            while ( have_rows('block') ) : the_row();
        ?>    

                <!-- <p><?php the_sub_field('type'); ?><p> -->
                <?php 
                $type = get_sub_field('type');
                $quote = get_sub_field('quote');
                $text = get_sub_field('text');

                if ($type == "text") {
                ?>
                    <?php the_sub_field('text'); ?>
                <?php
                } else if ($type == "quote") {
                ?>
                    <div class="quote"><?php the_sub_field('quote'); ?></div>

                <?php
                }   
                ?>      

            <?php
            endwhile;

        else :
            // no rows found
        endif;
        ?>
    </div>
</div>
<?php
endwhile;

// Reset Query
wp_reset_query();
?>

<!-- STORIES categories -->
<?php
$args = array(
        'cat' => 4,
        'post_type' => array( 'page' ),
        'order' => 'ASC'
        );
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
?>
    <div class="stories">
        <div class="stories-length">
            <div class="scroll-right"><img src="http://www.ndstudio.no/wp-mindthegap/wp-content/uploads/2015/05/scroll-right.png" /></div>
            <img class="intro-image" src="<?php the_field('intro-image'); ?>" alt="" />

            <div class="intro-column">
                <h1 class="title-page"><?php the_title(); ?></h1>
                <?php the_field('intro-text'); ?>
            </div>

            <?php
            // check if the repeater field has rows of data
            if( have_rows('content_block') ):
                //consoleLog(get_field('block'));
                // loop through the rows of data
                while ( have_rows('content_block') ) : the_row();
            ?>    

                    <!-- <p><?php the_sub_field('type'); ?><p> -->
                    <?php 
                    // the_sub_field is printing the value, which is output into HTML
                    // get_sub_field is returning the value, which you'll store in a variable

                    $select = get_sub_field('select');
                    $textfield = get_sub_field('textfield');                
                    $video = get_sub_field('video');
                    $quote = get_sub_field('quote');

                    $bgcolor = get_sub_field('bgcolor');
                    $image1 = get_sub_field('image1');
                    $image2 = get_sub_field('image2');      

                    if ($select == "textfield") {
                    ?>
                        <div class="text-column"><?php the_sub_field('textfield'); ?></div>
                    <?php
                    } else if ($select == "video") {
                    ?>
                        <div class="video-row-2"><div class="article-video-2"><?php the_sub_field('video'); ?></div></div>
                    <?php
                    }   else if ($select == "quote") {
                    ?>
                        <div class="nautral-row"><div class="quotes"><?php the_sub_field('quote'); ?></div></div>
                    <?php
                    }   else if ($select == "image1") {
                    ?>
                        <div class="<?php print $bgcolor; ?>-row">
                        <img class="article-image" src="<?php the_sub_field('image1'); ?>" alt="" />            
                    <?php
                    }   else if ($select == "image2") {
                    ?>
                        <img class="article-image" src="<?php the_sub_field('image2'); ?>" alt="" /></div>  

                    <?php
                    }   
                    ?>

                <?php
                endwhile;

            else :
                // no rows found
            endif;
                ?>
        </div>
    </div>
    <?php
    endwhile;

// Reset Query
wp_reset_query();
?>

Thank you so much for having a look.

Answer 1

Your current structure is:

Get Posts (A) Render (A) Get Posts (B) Render (B)

Which is why it's following that pattern.

You need to either fetch and cache all the results before rendering:

Get Posts (A) -> Cache1 Get Posts (B) -> Cache2 Interleave/Merge Caches to make alternating Array Render Merged Cache

Alternatively, cache the output.

Get Posts (A) Render -> Cache Get Posts (B) Render -> Cache Output Render Cache

Unless there is something Wordpress specific I don't know - those seem the two easiest approaches.