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;
}

这并不能完全解决新的三分之一部分何时开始的问题，以摆脱 "rows" 之间的 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。为您创建一个完整的解决方案会有点棘手，因为您还没有 post 编辑您的 html，所以如果这个确切的代码不起作用，请尝试编辑您的 post 以包含一些

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

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

Answer 2

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

首先，有必要禁止 画廊短代码 将外部样式注入页面。所以在 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 标签，并放置在新的列数中，像这样：

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

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

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

WordPress: How to style gallery shortcode into masonry layout?

css

wordpress

gallery

image-gallery