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>標記將在每篇文章中一致地應用。

希望這有助於解決問題！