石積みと複数のWPクエリー

Question

私は石工を使用して整理したい投稿のリストを読み込むために2 WP_Queryのクエリを使用しています。問題は、石積みが各要素を空間にフィットするには大きすぎるように扱い、新しい行に衝突していることです。

masonryがうまくいきますが、別のサイズの特集記事を読み込むために2つのクエリを実行する必要があります。

マイコード：

<div class="contentgrids"> 

<?php $q1 = new WP_Query($post1);?> 
    <?php if ($q1->have_posts()) : while ($q1->have_posts()) : $q1->the_post(); ?> 
     <div class="content_block col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
      <a href="<?php the_permalink() ?>"> 
      <?php if(has_post_thumbnail()) { ?> 
      <div class="imager"> 
       <?php the_post_thumbnail(); ?> 
      </div> 
      <?php } ?> 
      <div class="cont_title"> 
       <p><?php the_title(); ?></p> 
      </div> 
      <div class="cont_ex"> 
      <?php the_excerpt();?> 
      </div> 
      <div class="cont_pub"> 
       <?php the_time('d.m.Y'); ?> 
      </div> 
      </a> 
     </div> 
    <?php endwhile; endif;?> 
<?php $q2 = new WP_Query($post2);?> 
    <?php if ($q2->have_posts()) : while ($q2->have_posts()) : $q2->the_post(); ?> 
     <div class="content_block col-lg-4 col-md-4 col-sm-4 col-xs-4" id="thirds"> 
      <a href="<?php the_permalink() ?>"> 
      <?php if(has_post_thumbnail()) { ?> 
      <div class="imager"> 
       <?php the_post_thumbnail(); ?> 
      </div> 
      <?php } ?> 
      <div class="cont_title"> 
       <p><?php the_title(); ?></p> 
      </div> 
      <div class="cont_ex"> 
      <?php the_excerpt();?> 
      </div> 
      <div class="cont_pub"> 
       <?php the_time('d.m.Y'); ?> 
      </div> 
      </a> 

     </div> 
    <?php endwhile; endif;?> 
</div> 

スクリプト：

var j$ = jQuery.noConflict(); 
     j$(window).on("load", function(){ 
       j$('.contentgrids').masonry({ 
        itemSelector: '.content_block' 
      }); 
     }); 

Answer 1

私はそれをsussedしました！

Masonryは、幅が定義されていない限り、最初の要素の幅を使用し、最初の要素は66％幅であるため、すべての要素がその幅であるとみなしました。私はcolumnWidthを含むようにスクリプトを変更し、問題を解決しました。

var j$ = jQuery.noConflict(); 
     j$(window).on("load", function(){ 
       j$('.contentgrids').masonry({ 
        itemSelector: '.content_block', 
        columnWidth: 1 
      }); 
     });