Question

我没有为此找到一个好的解决方案。我想要做的是在帖子中创建一个类似砖石的网格，其中帖子中的所有图像都应该在砌体网格中。我怎么能实现这个目标？

Answer 1

注意：有了这个想法，您可以在图库中或内容

内将所有附加图像添加到帖子中

首先让我们为您的主题添加Mason，

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

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

jQuery(window).load(function() {

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

});

现在让我们根据需要将所有图片附加到帖子

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

这是整个想法，希望它适合你

Answer 2

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

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

add_filter( 'use_default_gallery_style', '__return_false' );

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

请记住对图库进行样式设置，以便它可以与砌体插件一起使用。以下是您将使用的2个选择器， .gallery （是每个图库的容器）和 .gallery-item （是图库中每个图片的内容））。

Wordpress帖子。将图像列为砖石网格

2 个答案: