WordPress：如何将画廊简码样式设置为砖石布局？答案

【问题标题】：WordPress: How to style gallery shortcode into masonry layout?WordPress：如何将画廊简码样式设置为砖石布局？
【发布时间】：2018-04-14 00:20:06
【问题描述】：

我正在尝试通过使用（将其放置在页面内容部分）使砌体布局成为可能：

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

是否有人针对此类障碍实施了解决方案？

另外，我尽量避免使用外部插件。

【问题讨论】：

标签： css wordpress gallery image-gallery

【解决方案1】：

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

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

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

【讨论】：

很好的答案！我试过这个，不幸的是它没有用。然而，这确实适用于非 WordPress 实例:)。我会为帮助投票！
无论是否是wordpress，基本策略都会起作用。但是，您可能必须覆盖 WP 站点上的某些 css。如果该网站有一个公共 url，我愿意看一下它并给你更具体的 css。
是的，我相信有大量注入的 WP CSS。不用担心，我会在自己的时间玩它。再次感谢！ :)

【解决方案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;}

额外：如果您希望使其具有响应性，只需在您想要首选断点的位置添加@media 标签，然后放入新的列数，如下所示：

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

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

【讨论】：