Question

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

无论出于何种原因，我输入（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 -->

Answer 1

看起来这可能是你的问题（或者至少是它的一部分）：

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

没有开口＆lt; a＆gt; div中的标记:)尝试添加它，看看它是否修复了列问题。

Answer 2

我不完全确定我的wordpress中图像受影响的位置。它似乎只是忽略了砌体设置并将图像设置为其他定义的高度，我似乎无法弄清楚但是在检查器中显示为（img [Attributes Style] {};）。我在项容器中添加了一些css属性来强制div达到最大宽度。解决了这个问题。

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

砌体设置不影响WP后循环输出

2 个答案: