砌体设置不影响 WP 后循环输出 - Masonry settings not affecting WP post loop output

Masonry settings not affecting WP post loop output

本文关键字：循环输出 WP 影响设置 | 更新日期: 2023-09-27

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

无论出于何种原因，我在函数.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 -->

看起来这可能是您的问题（或至少是其中的一部分）：

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

div :)中没有<>标签的开头尝试添加它，看看它是否解决了列问题。

我不确定在我的wordpress中图像在哪里受到影响。似乎在某个地方它只是忽略了砖石设置并将图像设置为其他定义的高度，我似乎无法弄清楚，但在检查器中显示为（img[属性样式] {};)。我在项目容器中添加了一些 css 属性，以强制div 达到最大宽度。修复了问题。

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