WordPress post。将图像列为砌体网格

Question

我用 google 搜索了一下，没有找到好的解决方案。我想要做的是在 post 中创建一个类似砖石的网格，其中 post 中的所有图像都应该在砖石网格中。我怎样才能做到这一点？

Answer 1

您可以使用 wordpress's native gallery. 此解决方案可以让您很好地控制要将图像放在内容中的位置，并且可以轻松管理图库及其图像。

禁用此过滤器的默认样式：

add_filter( 'use_default_gallery_style', '__return_false' );

然后使用desandro's masonry plugin创建网格。这个插件有很好的文档，是创建砌体网格最常用的插件，所以你应该对这个插件没问题。

记得为画廊设置样式，以便它可以与砌体插件一起使用。这是您将使用的 2 个选择器，.gallery（每个画廊的容器）和 .gallery-item（容器对于画廊中的每张图片）。

Answer 2

注意：通过这个想法，您可以将所有附加图像添加到 post，无论是在图库中还是在内容

中

首先让我们将 Masonry 添加到您的主题中，

wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );

然后将此 javascript 代码添加到您的主题页脚或 custom.js 文件中的某处

jQuery(window).load(function() {

  var container = jQuery('#mas-maincontainer');
  var msnry = new Masonry(container, {
    itemSelector: '.mas-item',
    columnWidth: '.mas-item',
  });

});

现在让我们根据需要将所有图像附加到 post

$attachments = get_children(array('post_parent' => $post->ID,
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image'));

foreach($attachments as $att_id => $attachment) {
    $full_img_url = wp_get_attachment_url($attachment->ID);
    //Here is your HTML to grid your images... 
   // Remember your images should be between <div id="mas-maincontainer"></div>

}

现在您应该添加您的自定义 CSS 如下

.mas-item {
width: 50%; // if you want two column 
}
.mas-item {
width: 33%; // if you want three column 
}

这就是整个想法，希望它对你有用

WordPress post。将图像列为砌体网格

Wordpress post. List images as a masonry grid

wordpress

jquery-masonry