2016-08-25 13 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)。