WordPress：如何将画廊短代码设计成砌体布局？

Question

我正在尝试通过使用（将其放在页面内容部分中）来实现砌体布局：

[gallery size="large" link="file" columns="4" ids="1,2,3"]

文档：https://codex.wordpress.org/Gallery_Shortcode

但即使这是理想的效果：

这就是持续发生的事情：

基本上，如果有一些CSS甚至可以添加javascript来转换图库来执行此操作，那就太棒了。

我的代码目前看起来像这样：

<div class="gallery-template">
    the_content();
</div>

我的额外css是：

.gallery-template img{
    max-width: 100%;
    height: auto;
    border: none !important;
}
.gallery-item{
    width: 33% !important;
    margin: 0;
    margin-top: 0 !important;
}

这并不能完全解决三分之二新部分何时开始的问题，以摆脱“行”之间的padding和margin。

当呈现上面提到的[gallery]短代码时，它在DOM中呈现的方式如下：

<div class="gallery-template">
    <div id="gallery-1" class="gallery">
        <dl class="gallery-item">...</div>
        <dl class="gallery-item">...</div>
        <dl class="gallery-item">...</div>

        // And so on..
    </div>
</div>

在DOM中呈现的CSS是：

#gallery-1 {
    margin: auto;
}
#gallery-1 .gallery-item {
    float: left;
    text-align: center;
}
.gallery-item {
    width: 33% !important;
    margin: 0;
    margin-top: 0 !important;
}

有没有人为此类障碍实施解决方案？

另外，我正在尝试避免使用外部插件。

Answer 1

这确实是一个css问题。我建议您查看flexbox。你没有发布你的html，因此为你创建一个完整的解决方案会有点棘手，所以如果这个确切的代码不起作用，请尝试编辑你的帖子以包含其中一些。

#gallery-1 {
    display: flex;
    flex-direction: column;
}

.gallery-item {
    flex: 0 1 33%;
    margin: 0;
    margin-top: 0 !important;
}

Answer 2

OK！我能够让这个工作。这是我的解决方案：

首先，有必要禁止 gallery shortcode 将外部样式注入页面。所以在funtions.php文件中，我添加了：

add_filter( 'use_default_gallery_style', '__return_false' );

接下来，我在页面中合并的 shortcode 标签中取出了列规范，如下所示：

[gallery size="large" link="file" ids="1,2,3"]

而不是：

[gallery size="large" link="file" columns="4" ids="1,2,3"]

最后，我将 CSS 放入我的页面（包括column-count）：

.gallery-template{margin:auto; column-count:4;column-gap:0;}
.gallery-template img{max-width:100%;height:auto;border:none !important;}
.gallery-item{margin:0;display:inline-block;width:100%;width:100%;margin-top:0;}

EXTRA：如果您希望对此进行响应，只需将@media标记添加到您希望使用首选断点的位置，然后放入新的列数中，如下所示： / p>

@media screen and (max-width:1200px) {
    .gallery-template{column-count:3;}
}

@media screen and (max-width:772px) {
    .gallery-template{column-count:2;}
}