我试图使页面每行有3篇文章，然后在3列（12篇文章）之后显示ajax加载更多按钮。目前只有一个帖子出现。我不知道如何让它正确地在所有东西中循环。有人能提供帮助吗？提前谢谢。

<?php
get_header();
get_template_part (\'inc/carousel-food\');

$the_query = new WP_Query( [
    \'posts_per_page\' => 12,
    \'paged\' => get_query_var(\'paged\', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">                                     
<article class="post">    
<div class="row">
    <div class="col-md-4"><?php the_post_thumbnail(\'medium-thumbnail\'); ?>
        <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
        <?php get_template_part( \'share-buttons\' ); ?>
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
        <?php comments_popup_link (\'No Comments\', \'1 Comment\', \'% Comments\', \'comment-count\', \'none\'); ?>
    </div>

    </div>

</article>
 </div>
    <?php if(get_query_var(\'paged\') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var(\'paged\') || get_query_var(\'paged\') == \'1\') {
    echo \'<p>Sorry, no posts matched your criteria.</p>\';
}
wp_reset_postdata();
get_footer();

<?php
get_header();
get_template_part (\'inc/carousel-food\');

$the_query = new WP_Query( array(
    \'posts_per_page\' => 12,
    \'paged\' => get_query_var(\'paged\', 1),
    \'cat\' => 10,
 ));

if ( $the_query->have_posts() ) {

    // display #ajax wrapper only if we have posts
    echo \'<div id="ajax">\';

    while($the_query->have_posts()) {
          $the_query->the_post(); ?>

        <article <?php post_class(); ?>>    
            <div class="row">
                <div class="col-md-4"><?php the_post_thumbnail(\'medium-thumbnail\'); ?>
                    <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <?php get_template_part( \'share-buttons\' ); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                    <?php comments_popup_link (\'No Comments\', \'1 Comment\', \'% Comments\', \'comment-count\', \'none\'); ?>
                </div>
                 <div class="col-md-4"><?php the_post_thumbnail(\'medium-thumbnail\'); ?>
                    <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <?php get_template_part( \'share-buttons\' ); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                    <?php comments_popup_link (\'No Comments\', \'1 Comment\', \'% Comments\', \'comment-count\', \'none\'); ?>
                </div>
                 <div class="col-md-4"><?php the_post_thumbnail(\'medium-thumbnail\'); ?>
                    <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <?php get_template_part( \'share-buttons\' ); ?>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                    <?php comments_popup_link (\'No Comments\', \'1 Comment\', \'% Comments\', \'comment-count\', \'none\'); ?>
                </div>
            </div>
        </article>

    <?php }//end while

    echo \'</div>\'; // close the #ajax wrapper after the post list

    if(get_query_var(\'paged\') < $the_query->max_num_pages) {
        load_more_button();
    }


} else { // if there are no posts

    echo \'<p>Sorry, no posts matched your criteria.</p>\';

}//end if

get_footer();
?>