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

На ретроспективе, я совершенно уверен, что вопрос компоновки причиняется открытым после цикла - особенно после заявления Кладка кажутся правильными. Не закрывая после цикла, ваши коды при просмотре в браузере под видом Source бы, возможно, что-то вроде этого примера 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> будет последовательно применяться к каждому сообщению.

Надеюсь, что это поможет решить проблему!