Как вставить каждое изображение галереи в определенный div? WordPress

Я пытаюсь воспроизвести этот масонство показать галерею. Я создал CPT для этого. «CPT — Галерея».

Сначала я подумал о создании пользовательского типа публикации, чтобы публиковать все изображения вместе.

МОЙ КПП:

—>>> название <<<—
—>>> изображение по умолчанию — уменьшенное изображение <<<—
—>>> Котент <<<—
—>>> изображения<<<—
—>>> изображения<<<—
…

Первые три раздела (заголовок, изображение по умолчанию и контент) — это основы. Готов.

После этого я подумал об использовании собственного метабокса и добавил URL каждого изображения. Тем не менее, добавить URL-адрес по URL-адресу не является интуитивно понятным и гораздо больше работы для пользователя, будь то новичок или продвинутый. Кроме того, количество снимков будет варьироваться, может быть 1, может быть 5, может быть 10 и так далее.

Я видел, что есть плагин для WordPress, но плагин не является полной шириной и когда я устанавливаю css плагин должен быть полной ширины, Mansory получает несколько ошибок в окне изменения размера.

Отмечая функционирование плагина и вашего кода, я видел, что в каждом посте плагин использует собственную галерею редактора WordPress. Взять сгенерированный шорткод (внутри the_content();) и отображает изображения в классах Mansory.

Я пытаюсь сделать это, но безуспешно.

Во всяком случае, что я хочу сделать?

-> Поймать шорткод галереи WordPress и отобразить каждое изображение в пределах divс моей masonry <-

Пример логический:
Шорткод галереи:

Я беру каждое изображение и отображаю в цикле.

Практический пример:

Здесь я выполняю цикл с divс masonry,

<?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.....

Как я могу это сделать?