我正在写一个新的模板文件。当你向下滚动主页时，我想在不同的分区中以不同的数字显示来自不同类别的最新帖子。

我已经编写了一个WP\\u查询语句，但每次运行循环时都不会关闭它。下一个<div> 循环结束后，始终显示在循环内部。

在本例中，您可以看到文本“latest”在循环中被捕获。如果你在之后再添加一段文字，就可以了。

我错过了什么？

网站位于：

test site

<?php 
/*
Template Name: Home News
*/ 
?>

<?php
$sidebar = kloe_qodef_sidebar_layout(); ?>

<?php get_header(); ?>
<?php get_template_part( \'title\' ); ?>
<?php get_template_part(\'slider\'); ?>



    <div id="container">
        <?php 
            $recent_posts_query = new WP_Query(array(\'post_type\' => \'post\', \'posts_per_page\' => 8, \'category_name\' => \'technology\', \'Fashion-Beauty\', \'Art\', \'Watches-Jewellery\', \'Travel\',));
        while ($recent_posts_query->have_posts()){
        $recent_posts_query->the_post(); ?>
            <div class="masonryImage"><?php the_post_thumbnail();?></div>

            <?php } ?>
    </div>

    <div class="advert-container">
        <img src="http://104.244.127.200/~qmintest/wp-content/uploads/2015/12/Home-Shop-Single-Image-1-1.png" alt="advert">
    </div>

    <div class="text-header">
        <h1>Editors Picks</h1>
    </div>

    <?php echo do_shortcode(\'[qodef_portfolio_slider type="fullscreen-slider" order_by="date" order="ASC" category_ID="251" speed="2000"]\'); ?>

    <div class="text-header">
        <h1>Fashion/Beauty</h1>
    </div>

    <div class="main-news">
        <?php $the_query = new WP_Query(array(\'posts_per_page\' => 3, \'category_name\' => \'Fashion-Beauty\' ));

        while ($the_query -> have_posts()) {
        $the_query -> the_post(); ?>
            <div class="new-content">
                <div class="new-image"><?php the_post_thumbnail(\'full\');?>
                <div class="new-content-excerpt">
                    <h5><?php
                        foreach ((get_the_category()) as $category){
                            echo $category->cat_name . \' \'; 
                            }
                            ?>
                    </h5>
                    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                </div>
                </div>
            </div>
        <?php } ?>
    </div>


    <div class="text-header">
        <h1>Latest</h1>
    </div>


    <div class="main-news">
        <!-- Define our WP Query Parameters -->
        <?php $the_query = new WP_Query(array(\'posts_per_page\' => 3, \'category_name\' => \'technology\' )); ?>

        <!-- Start our WP Query -->
        <?php while ($the_query -> have_posts()) {
         $the_query -> the_post(); ?>
            <div class="new-content">
            <!-- Display the Post Image with Hyperlink -->
                <div class="new-image"><?php the_post_thumbnail(\'full\');?></div>
                <div class="new-content-excerpt">
                <!-- Display the Post Category Hyperlink -->
                    <h5><?php 
                    foreach((get_the_category()) as $category) {
                    echo $category->cat_name . \' \';
                    }
                    ?></h5>

                    <!-- Display the Post Title with Hyperlink -->
                    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                </div>

            </div>
            <!-- Repeat the process and reset once it hits the limit --
         >
        <?php } ?>
    </div>
     </div>
   </div>
   </div>       


   /*
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if(($sidebar == \'default\')||($sidebar == \'\')) : ?>
        <?php the_content(); ?>
        <?php do_action(\'kloe_qodef_page_after_content\'); ?>
    <?php elseif($sidebar == \'sidebar-33-right\' || $sidebar == 
    \'sidebar-25-right\'): ?>
        <div <?php echo kloe_qodef_sidebar_columns_class(); ?>>
            <div class="qodef-column1 qodef-content-left-from-sidebar">
                <div class="qodef-column-inner">
                    <?php the_content(); ?>
                    <?php do_action(\'kloe_qodef_page_after_content\'); ?>
                </div>
            </div>
            <div class="qodef-column2">
                <?php get_sidebar(); ?>
            </div>
        </div>
    <?php elseif($sidebar == \'sidebar-33-left\' || $sidebar == \'sidebar-25-left\'): ?>
        <div <?php echo kloe_qodef_sidebar_columns_class(); ?>>
            <div class="qodef-column1">
                <?php get_sidebar(); ?>
            </div>
            <div class="qodef-column2 qodef-content-right-from-sidebar">
                <div class="qodef-column-inner">
                    <?php the_content(); ?>
                    <?php do_action(\'kloe_qodef_page_after_content\'); ?>
                </div>
            </div>
        </div>
    <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>*/


    <?php get_footer(); ?>

    <script type="text/javascript">

    jQuery(window).load(function() {
    var container = document.querySelector(\'#container\');
    var msnry = new Masonry( container, {
    itemSelector: \'.masonryImage\',
    columnWidth: \'.masonryImage\',                
  });  

    });


</script>