javascript - Masonry 设置不影响 WP 后循环输出

Question

我正在开发 WP 4.0 主题并尝试实现简单的 masonry 设置。我的目的是从一个类别中获取一定数量的帖子，创建一个循环并将它们放置在动态网格中。

无论出于何种原因，我在functions.js 文件中输入的设置(columnWidth 和gutter)似乎根本没有效果。所有图像都会加载，但仅在一列中垂直向下。我觉得要么我完全错过了一些东西，要么可能是某个地方的一个小侥幸？

函数.php:

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

函数.js:

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

模板.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 -->

Answer 1

看起来这可能是您的问题(或至少是部分问题):

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

div 中没有开始 < a > 标记:) 尝试添加该标记，看看是否可以解决列问题。