ギャラリーの各画像を特定のdivに挿入するにはどうすればいいですか？ワードプレス

Question

ギャラリーを表示するにはreproduce this Masonryにしようとしています。私はCPTを作成しました。 "CPT - ギャラリー"。

まず、すべての画像を一緒に公開するカスタム投稿タイプを作成することを考えました。

MY CPT：

--- >>>タイトル< < < ---
--- >>>画像デフォルト - サムネイル< < < ---
--- >>> cotent < < < ---
--- >>>画像< < < ---
--- >>>画像< < < --- ...

最初の3つのセクション（タイトル、画像のデフォルトと内容）が基本です。準備が整いました。

その後、私はカスタムメタボックスの使用について考えて、各画像URLを追加しました。しかし、URLでURLを追加することは直感的なことではなく、初心者でも上級者であれ、ユーザーにとってもっと大変な作業です。さらに、量は写真が1であり、5が10であり得るなど、様々である。

私はplugin for WordPressがあることを見ましたが、プラグインは全幅ではないと私は全幅するプラグインのcssを設定すると、Mansoryは、ビューポートのサイズ変更にいくつかのバグを取得します。

プラグインとコードの機能に注目して、各投稿で、プラグインがWordPressエディタの独自のギャラリーを使用していることがわかりました。生成されたショートコード（the_content();の内部）を取り、Mansoryクラス内の画像を表示します。

私はこれをやろうとしていますが、成功していません。

とにかく、私は何をしたいですか？

- > WordPressのギャラリーのショートをキャッチし、私のmasonry <のdiv秒以内に各画像を表示する - 論理

例：私は、各画像および表示を取る[gallery ids="1,2,3,4,5,6"]

：ギャラリーの
ショートコードループの中。

実践例：ここでは

私はmasonryのdiv秒でループを実行します。

<?php 
    $args = array('post_type' => 'gallery', 'showposts' => 1); 
    $wp_query = new WP_Query($args); 
    if(have_posts()): 
    while ($wp_query -> have_posts()) : $wp_query -> the_post(); 
?> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 1 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 1 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

ループですべての画像がギャラリーに表示されます。

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 2 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 2 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 3 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 3 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

and so on..... 

どうすればいいですか？

Answer 1

あなたはほとんどそこにいました。ギャラリー画像をフェッチしてループするだけです。このような何かがあなたのために働くはずです。 ここに参照：https://codex.wordpress.org/Function_Reference/get_post_gallery_images

<?php 
global $post; 
$gallery = get_post_gallery_images($post); 

foreach($gallery as $image_url) { 
?> 
<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 
<?php 
} 
?>