FacetWP制動砌體佈局

我正在使用FacetWP構建過濾器窗體。不幸的是，當我選擇表單中的任何選項時，我的masonry佈局正在剎車。結果呈現爲單列，而不是3.奇怪的是，F5使訂單（3列）正確。
我試圖使用這些方法：https://facetwp.com/documentation/template-configuration/這一個：https://facetwp.com/using-facetwp-with-existing-template-files/FacetWP制動砌體佈局

我的代碼是

 <div id="primary" class="content-area col-md-9 <?php echo sydney_blog_layout(); ?>"> 
     <main id="main" class="post-wrap" role="main"> 


     <?php 
     $args = array(
      'post_type' => 'nieruchomosci', 
      'posts_per_page' => 12, 
     ); 
     $query = new WP_Query($args);?> 
     <?php if ($query->have_posts()) : ?> 

      <header class="page-header"> 
       <h3 class="archive-title">Szukaj nieruchomości</h3> 
      </header><!-- .page-header --> 
       <div class="wyszukiwarka"><?php echo facetwp_display('facet', 'rodzaj'); ?><?php echo facetwp_display('facet', 'typ'); ?><?php echo facetwp_display('facet', 'lokalizacja'); ?></div> 
      <div class="posts-layout facetwp-template"> 
      <?php while ($query->have_posts()) : $query->the_post(); ?> 

       <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 

    <?php if (has_post_thumbnail() && (get_theme_mod('index_feat_image') != 1)) : ?> 
     <div class="entry-thumb"> 
      <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('sydney-large-thumb'); ?></a> 
     </div> 
    <?php endif; ?> 

    <header class="entry-header"> 
     <?php the_title(sprintf('<h2 class="title-post entry-title"><a href="%s" rel="bookmark">', esc_url(get_permalink())), '</a></h2>'); ?> 
    </header><!-- .entry-header --> 

    <div class="entry-post"> 
       <?php the_field('cena'); ?> PLN | <?php the_field('powierzchnia'); ?> m<sup>2</sup></br> 
       <?php echo get_the_term_list($post->ID, 'rodzaj', '', ', ', '') ?> na <?php echo get_the_term_list($post->ID, 'typ', '', ', ', '') ?> w miejscowości <?php echo get_the_term_list($post->ID, 'lokalizacja', '', ', ', '') ?> 
     <?php 
      wp_link_pages(array(
       'before' => '<div class="page-links">' . __('Pages:', 'sydney'), 
       'after' => '</div>', 
      )); 
     ?> 
    </div><!-- .entry-post --> 

    <footer class="entry-footer"> 
     <?php sydney_entry_footer(); ?> 
    </footer><!-- .entry-footer --> 
</article><!-- #post-## --> 

      <?php endwhile; ?> 
      </div> 

      <?php the_posts_navigation(); ?> 

     <?php else : ?> 

      <?php get_template_part('content', 'none'); ?> 

     <?php endif; ?> 

     </main><!-- #main --> 
    </div><!-- #primary -->

任何意見將是非常不錯的。

來源

2017-08-28 krzysztof114

其實我得到了他的工作imagesLoaded包裝的v3.1.8）：

$(document).on('facetwp-loaded', function() { 
    var $grid = $('.grid').imagesLoaded(function() { 
     $grid.masonry("reloadItems"); 
     $grid.masonry({ 
      itemSelector : '.loop-entry', 
      gutter  : 30, 
      columnWidth : 240, 
      isAnimated : true, 
      animationOptions : { 
       duration : 300, 
       easing : 'easeInOutCirc', 
       queue : false 
      } 
     }); 
    }); 
});

來源

2017-12-09 20:37:24 banesto

嘗試重新加載facetwp-loaded事件佈局。從你的問題來看，目前還不清楚砌體佈局是如何建立的。假設這是masonry.js，你可以做佈局時FacetWP加載完成這樣的：（用磚石包裝的V4.1.1 &

$(document).on('facetwp-loaded', function() { 
    // do layout when FacetWP finishes 
    $grid.masonry('layout'); 
});

時請在這裏 https://facetwp.com/documentation/facetwp-loaded/

來源

2017-08-31 17:05:18 dariodev

FacetWP制動砌體佈局

回答

相關問題