【问题标题】：Masonry in WordPressWordPress中的砌体
【发布时间】：2020-07-15 16:16:13
【问题描述】：

这是将我的帖子放入网格的另一种尝试：

index.php 加载所有帖子的页面。

<?php
get_header();?>

<div class="container">
    <?php get_template_part('includes/section','index');?>
</div>

<?php get_footer();?>

section-index.php 包含显示图像、标题和摘录的片段。

<?php if( have_posts() ): while( have_posts() ): the_post();?>

<div class="grid">
    <div class="image">
        <img src="<?php the_post_thumbnail_url('');?>" width="300" height="300"/>
    </div>
    <div class="title">
        <h2><?php the_title();?></h2>
    </div>
    <div class="excerpt">
        <?php the_excerpt();?>
    </div>
    <div class="read">
        <a href="<?php the_permalink();?>">read more</a>
    </div>
</div>

<?php endwhile; else: endif;?>

app.scss .grid 将各个部分组合在一起，.container 定位所有帖子。

.grid {
  background: pink;
  max-width: 17%;
  float: left;
}

.container {
  position: absolute;
  top: 10%;
  left: 10%;
}

这里的问题是我不知道如何使整个网格居中，因为.container 导致页脚被忽略并在页眉下反弹。

替代方法：使用 Masonry 内置的 WordPress

这是我为使砌体工作而设法实现的目标。我在index.php 中使用相同的代码。

masonry.js

(function( $ ) {
    $(function() {
        var container = document.querySelector('.js-masonry');
        var msnry;
        imagesLoaded( container, function() {
            msnry = new Masonry( container, {
                itemSelector: '.item-masonry',
                isFitWidth: true
            });
        });
    });
});

app.scss

.js-masonry {
  border: solid 5px green;
      position: relative;
      max-width: 1080px;
      margin: auto;
      padding: 10px;
}

.js-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.item-masonry {
  border: solid 5px pink;
}

section-index.php

<div class="js-masonry">
    <?php if( have_posts() ): while( have_posts() ): the_post();?>
        <div class="item-masonry">
        <a href="<?php the_permalink();?>"><img src="" width="310" height="310"></a>
            <h2><?php the_title();?></h2>
        </div>
    <?php endwhile; else: endif;?>
</div>

砖石工程，但是：

.js-masonry 内部的.item 靠在左侧而不是在中间，导致右侧空间很大。
我无法通过在masonry.js 中添加排水沟来使其正常工作。我想要所有.item 之间的空间。

关于如何解决这两个问题的任何解决方案？

【问题讨论】：

您应该重新考虑使用 columns 并使用 CSS Grid 来执行此操作。
好的，我试试看。我查了一下你说的，看起来更好用也更简单。

标签： javascript wordpress wordpress-theming masonry

【解决方案1】：

所以我发现masonry.js 需要columnWidth:。

对于样式，我必须添加：

.js-masonry {
  border: solid 5px green;
  max-width: 860px;
  margin: 0 auto;
}

.js-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.item-masonry {
  width: 180px;
  float: left;
}

我必须确保宽度适合项目和网格。

padding: 0px 20px 0px  0px;

由于gutter 在 WordPress 中不适合我，我为项目添加了这个以在不依赖细细透明边框的情况下获得均匀空间。

【讨论】：