砌体设置不影响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后循环输出

回答

相关问题