砌體設置不影響WP後循環輸出

我正在開發一個WP 4.0主題，並試圖實現砌體的簡單設置。我的意圖是從一個類別中獲取一定數量的帖子，創建一個循環，並將砌體佈置在動態網格中。砌體設置不影響WP後循環輸出

無論出於何種原因，我輸入（columnWidth和gutter）到我的functions.js文件中的設置似乎根本沒有任何效果。所有的圖像加載，但只能在一列垂直下降。我覺得我要麼完全錯過了一些東西，要麼可能是某處的小僥倖？

的functions.php：

function archive_grid(){ 
    wp_enqueue_script('masonry'); 
} 
add_action('wp_enqueue_scripts', 'archive_grid');

functions.js：

var container = document.querySelector('#masonry-loop'); 
    var msnry = new Masonry(container, { 
      columnWidth: 300, 
      gutter: 30, 
      itemSelector: '.archive-container' 
      }); 
    });

的template.php

<div id="archive-index"> 
    <div id="masonry-loop"> 
     <?php 
      $args = array(
         'posts_per_page' => 6, 
       'category_name' => 'back-issue', 
       'orderby'   => 'post_date', 
       'order'   => 'DESC'); 

      $archive = get_posts($args); 
      foreach ($archive as $post) : setup_postdata($post); ?>  
      <div class="archive-container"> 
       <?php the_post_thumbnail(); ?></a> 
      </div><!-- Archive Container--> 
      <?php 
      endforeach; 
      ?>    
    </div><!--/#masonry-loop--> 
    <?php 
    wp_reset_postdata(); ?> 
</div><!-- #archive-index -->

來源

2014-11-25 antonanton

它看起來像這可能是你的問題（或者至少一部分它）：

<div class="archive-container"> 
    <?php the_post_thumbnail(); ?></a> 
</div><!-- Archive Container-->

有沒有開放< a>標籤內:)嘗試添加，看看它是否修復列問題。

來源

2014-11-25 00:51:53

啊，錯過了..我只是刪除舊的其他代碼，使它很容易看到，如果我能找到一個大。試圖重新添加一個但沒有區別。 – antonanton 2014-11-25 10:23:14

我不完全確定我的wordpress圖像受到了什麼影響。它似乎只是忽略了砌體設置，並將圖像設置爲某些其他定義的高度，我似乎無法弄清楚，但在檢查器中顯示爲（img [Attributes Style] {};）。我向項目容器添加了一些CSS屬性以強制divs達到最大寬度。解決了這個問題。

.archive-container {  
    max-width: 300px; 
} 
.item img { 
    width: auto; 
    height: auto; 
    max-width: 300px; 
}

來源

2014-11-25 11:40:24 antonanton

砌體設置不影響WP後循環輸出

回答

相關問題