2016-08-25 20 views
-1

私はこれについて良い解決策を見つけることなく、周りを探索しました。私がしたいことは、ポスト内のすべての画像が石造りグリッドにあるはずのポストに石造りのようなグリッドを作成することです。どうすればこれを達成できますか?Wordpressの投稿。画像を石積みのグリッドとして表示

+0

の作品を願ってい

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

以下のように今、あなたのカスタムCSSを追加する必要があります:// 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> 

} 

これは全体的なアイデアであり、あなたはあなたがこのhttpsを使用することができます開発されていない場合、それはあなた

0

wordpress's native gallery.このソリューションを使用すると、画像をコンテンツに配置する場所を適切に制御でき、ギャラリーとその画像を簡単に管理できます。

add_filter('use_default_gallery_style', '__return_false'); 

をそしてgirdを作成するためにdesandro's masonry pluginを使用します。

は、このフィルタをデフォルトのスタイルを無効にします。このプラグインは文書化されており、石工格子を作成するための最も一般的なものなので、このプラグインでうまくいくはずです。

masonryプラグインで動作するように、スタイルを変更してください。使用する2つのセレクタは.gallery(各ギャラリーのコンテナ)、.gallery-item(ギャラリー内の各画像のコンチニア)です。