Wordpress未显示右侧的jQuery砌体

我已经在一个我试图构建的站点上设置了一种自定义的帖子类型，但是我在展示帖子的方式上遇到了一个问题。文章不是总是有相同的页边空白，在页面上流畅流畅，而是堆叠成三个（少数例外），然后跳过大量页面，再堆叠成另外三个

这是一个例子

我的头：

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('#kampanjer-container').masonry({
            itemSelector: '.kampanjepin',
            columnWidth: 226,
            singleMode: true });
    });</script>

如果有人能帮我解决这个问题，那就太好了！：）

---

Michael

事后来看，我很确定布局问题是由开放式post循环引起的——特别是因为砌体声明似乎是正确的。在不关闭post循环的情况下，在“查看源代码”下的浏览器中查看代码时，代码可能与以下示例类似，共有2篇文章：

<div id="kampanjer-container">

    <!--this is the first post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the first post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

    <!--this is the second post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the second post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

</div>

发生这种情况的原因很简单：只要post循环没有用

关闭，循环将继续接受

之后的所有内容，将其作为代码或内容重复使用，以供每个拉出的post显示。上面的示例中的杂散的

可能只是循环中包含的许多其他内容之一，但它已经足以搞乱您的布局

因此，整个post循环应该如下所示：

<div id="kampanjer-container"> <!--start of parent container-->

    <?php // define custom arguments
        $args = array(
            'post_type' => 'kampanje',
            'posts_per_page' => '15',
        );
        $kampanje = new WP_Query( $args );
    ?>

    <?php // start loop
        if($kampanje->have_posts() ) : while ( $kampanje->have_posts() ) : 
        $kampanje->the_post();
    ?>

        <!--post container-->
        <article class="kampanjepin">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            <h3><?php the_title() ?></h3>
            <div class='kampanje-content'>
                <?php the_content() ?>
            </div>
        </article>
        <!--post container-->

    <?php // end loop
        endwhile;
    ?>

    <?php else:?> 

       <!--No post message-->
       <?php echo 'Ingen kampanjer for øyeblikket!'; ?>

    <?php // end conditional if statement
        endif;
    ?>

</div> <!--end of parent container-->

从修改后的代码中可以看到，

直接放在关闭标签的后面。这样可以确保post循环仅使用

标记以及其中的所有内容。因此，

标记将在每个帖子中一致应用

---

希望这有助于解决问题

你有一个关于这个问题的活生生的例子而不是图片吗？在任何情况下，您似乎忘记分别使用和关闭条件语句和post循环。我不能确定这是否是问题的原因，但我想这值得一谈——特别是因为您声明的砌体规范似乎是正确的。感谢您花时间帮助我：）不幸的是，这似乎不起作用。你说的有道理，所以我很惊讶它实际上没有成功，尽管我怀疑砖石脚本没有注册，或者至少它还没有连接到“.kampanjepin”。我仍然必须使箱子浮动，以防止它垂直排列。你还有什么其他的建议可以解决这个问题吗？：）不用担心：）您是否尝试过将.kampanjepin的位置设置为相对位置？还有，你有你网站的一个实例吗？是的，我试过了，但没有成功：/我可能在这里采用了一个便宜的解决方案，但我最终使用了columns解决方案，并添加了一个脚本，让旧浏览器使用新的css标记。这是可行的，但我仍然想找出这个问题：）我得到一个提示，说我的一些其他脚本（菜单脚本、html5脚本）可能会干扰砌体脚本，也许这就是原因？是的，可能是JavaScript冲突，但如果没有一个我们可以应用控制台的实例，很难诊断任何东西。。

<div id="kampanjer-container">

    <!--this is the first post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the first post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

    <!--this is the second post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the second post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

</div>

<div id="kampanjer-container"> <!--start of parent container-->

    <?php // define custom arguments
        $args = array(
            'post_type' => 'kampanje',
            'posts_per_page' => '15',
        );
        $kampanje = new WP_Query( $args );
    ?>

    <?php // start loop
        if($kampanje->have_posts() ) : while ( $kampanje->have_posts() ) : 
        $kampanje->the_post();
    ?>

        <!--post container-->
        <article class="kampanjepin">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            <h3><?php the_title() ?></h3>
            <div class='kampanje-content'>
                <?php the_content() ?>
            </div>
        </article>
        <!--post container-->

    <?php // end loop
        endwhile;
    ?>

    <?php else:?> 

       <!--No post message-->
       <?php echo 'Ingen kampanjer for øyeblikket!'; ?>

    <?php // end conditional if statement
        endif;
    ?>

</div> <!--end of parent container-->