WordPress 中的砌体

Question

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

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 导致页脚被忽略并在 header 下弹回。

替代方法：使用 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不是靠在中间而是靠在左边，导致右边有一个巨大的space。
我无法通过在 masonry.js 中添加装订线来使它正常工作。我想要 space 在所有 .item.

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

Answer 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 中对我不起作用，我为项目添加了这个 space 而不依赖薄薄的透明边框。

WordPress 中的砌体

Masonry in WordPress

javascript

wordpress

wordpress-theming

masonry

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