2016-08-25 54 views
-1

我已经搜索了一圈没有找到一个很好的解决方案。我想要做的是在帖子中的所有图像应该在砌体网格中创建一个砖石般的网格。我怎么能做到这一点?WordPress的帖子。列出图像作为石工网格

+0

如果你不是,你可以使用这个HTTPS开发商:// wordpress.org/plugins/wp-masonry-layout/或者这个为你的画廊https://wordpress.org/plugins/jquery-masonry-image-gallery/如果你是开发人员让我知道,那么我可以给你一个完整的指南。 – Majid

+0

我是一名开发人员! – user2952238

+0

哈哈。开发人员应该多加一点努力,而不要问这样的过于宽泛的问题。 – CBroe

回答

1

注:有了这个想法,你可以得到所有连接的图像后无论是在画廊或内容

首先里面,让我们添加砌体你的主题,

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', 
    }); 

}); 

现在让我们连接到后所有图像,只要你想

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

这是整个的想法,并希望它为你工作

0

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

禁用默认的样式与此过滤器:

add_filter('use_default_gallery_style', '__return_false'); 

然后使用desandro's masonry plugin创建网格。这个插件是有据可查的,是创建砌体网格最常用的,所以你应该对这个插件很好。

记得风格的画廊,所以它将与砖石插件工作。以下是您将使用的2个选择器,.gallery(是每个图库的容器)和.gallery-item(是图库中每个图像的conatiner)。