wordpressでのカスタム投稿アーカイブページでのループがエラーになる問題

カスタム投稿タイプ"article"に関するサブループをメインループの前で実行すると、以降のカスタム投稿タイプのメインループで「サイトに技術的な問題が発生しています。」という表示がされてしまいます。

ループの順番を入れ替えてみると、メインループ・サブループ共に意図した内容が表示されるのですが、根本的な原因がわからないので質問させていただきました。

<?php
get_header(); ?>
    <div class="block field-archive">
        <h1>地域</h1>
        <?php $fields = [['area1','エリア１'],['area2','エリア２']]; ?>
        <div>
            <div>
                <form name="sort_form" class="archive__form__left__sort">
                    <select name="sort" onchange="dropsort()">
                        <option value="">選択</option>
                        <?php foreach ($fields as $field):?>
                            <?php
                                $args = array(
                                    'post_type' => 'article',
                                    'tax_query' => array(
                                        array(
                                            'taxonomy' => 'article-category',
                                            'field' => 'slug',
                                            'terms' => $field[0]
                                        )
                                    )
                                );
                                $posts = new WP_Query( $args );
                                if($posts->have_posts()):
                            ?>
                                    <option value="<?php echo esc_url( home_url('/') ); ?>article/#<?php echo $field[0]; ?>">----<?php echo $field[1]; ?>----</option>
                                <?php
                                    while ($posts->have_posts()): $posts->the_post();
                                ?>
                                        ーーー処理ーーー
                            <?php
                                    endwhile;
                                endif;
                            ?>
                            <?php wp_reset_postdata(); // クエリをリセット ?>
                        <?php endforeach; ?>
                    </select>
                </form>
            </div>
        </div>
        <?php
            foreach ($fields as $field):
                $args = array(
                    'post_type' => 'article',
                    'tax_query' => array(
                        array(
                            'taxonomy' => 'article-category',
                            'field' => 'slug',
                            'terms' => $field[0]
                        )
                    )
                );
                $posts = new WP_Query( $args );
                if($posts->have_posts()):
        ?>
                    <h2>
                        <?php echo $field[1]; ?>
                    </h2>
                    <ul>
                        <?php
                            while ($posts->have_posts()): $posts->the_post();
                        ?>
                                ーーー処理ーーー
        <?php
                                $post_no++;
                            endwhile;
                endif;
        ?>
            </ul>
            <?php wp_reset_postdata(); // クエリをリセット ?>
        <?php endforeach; ?>
    </div>
    <div>
        <h2>メインループ</h2>
        <?php
            $paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
            $max_num_pages = $wp_query->max_num_pages;
            $post_no = 1;
        ?>
            <ul>
                <?php
                    if (have_posts()):
                        while (have_posts()):
                            the_post();
                ?>
                                ーーー処理ーーー
                <?php
                                $post_no++;
                        endwhile;
                    endif;
                ?>
            </ul>
            <?php wp_reset_postdata(); // クエリをリセット ?>
    </div>
<?php get_footer(); ?>