jQuery砌体与Wordpress不显示正确

Question

我已经设置砌体工作与我想建立一个网站上的自定义帖子类型，但我有一个问题，砌体的显示我的帖子的方式。与其在页面上始终具有相同的页边空白和精美流畅的情况下，文章会以三种形式堆叠（除少数外），然后在堆叠另外三份之前跳过大量页面。

这是example of what's going wrong。

我的头：

<?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> 

这里的页面模板循环：

<!-- Start the Loop. --> 
      <div id="kampanjer-container"> 
       <?php 
        $args = array(
         'post_type' => 'kampanje', 
         'posts_per_page' => '15', 
        ); 
        $kampanje = new WP_Query($args); 
        if($kampanje->have_posts()) { while($kampanje->have_posts()) { 
          $kampanje->the_post(); ?> 
          <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><!-- END .kampanjepin --> 
          <?php 
         } 
        } 
        else { 
         echo 'Ingen kampanjer for øyeblikket!'; 
        } 
       ?> 
      </div><!-- END #kampanjer-container --> 

而且我的风格：

#kampanjer-container { 
    margin: 25px 0 0 -10px; 
    width: 670px; 
} 

.kampanje-content { 
    width: 182px; 
} 

.kampanjepin { 
    float: left; 
    margin: 10px; 
    padding: 10px; 
    -moz-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); 
    -webkit-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); 
    box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); 
    background-color: #ffffff; 
    width: 182px; 
} 

.kampanjepin img { 
    background-color: #ececec; 
    max-width: 182px; 
    max-height: 125px; 
    display: block; 
    text-align: center; 
} 

.kampanjepin h3 { 
    font-size: 0.850em; 
    font-weight: bold; 
    margin: 10px 0 5px 0; 
    color: #000000; 
} 

.kampanjepin p { 
    font-size: 0.750em; 
} 

如果有人能帮助我想出解决办法将是巨大的！ :)

迈克尔

Answer 1

现在回想起来，我很肯定的是，布局问题正在由开环后引起的 - 尤其是因为砖石的声明似乎是正确的。不关闭环路后，你的代码下查看源代码浏览器中查看时，或许会是这样的例子有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> 

这样做的原因发生很简单：只要环路后是没有关闭<?php endwhile;?>，则循环将继续接受</article>之后的所有内容，作为代码或内容被重复使用，以便每一个帖子都被抽出来显示。上面的例子与流浪者</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--> 

你可以从修改后的代码看，<?php endwhile; ?>直接关闭</article>标签之后。这确保后循环只使用<article>标签及其内部的所有内容。因此，<article>标记将在每篇文章中一致地应用。

希望这有助于解决问题！