如何在某个 div 中插入画廊的每张图片？ WordPress

Question

我正在尝试reproduce this Masonry 来展示一个画廊。我为此创建了一个 CPT。 “CPT - 图库”。

首先，我想创建一个自定义帖子类型来将所有图像一起发布。

我的 CPT：

--->>> 标题 --->>> 图像默认 - 缩略图 --->>> 内容 --->>>图片 --->>>图片 ...

前三个部分（标题、图像默认值和内容）是基础。准备好了。

之后，我考虑使用自定义元框并添加每个图像 URL。但是，通过 URL 添加 URL 并不直观，而且对于用户来说，无论是新手还是高级用户都需要做更多的工作。此外，图片的数量会有所不同，可以是 1 个，也可以是 5 个，也可以是 10 个等等。

我看到有一个plugin for WordPress，但插件不是全宽的，当我将插件的css 设置为全宽时，Mansory 在视口调整大小时出现了几个错误。

注意到插件和您的代码的功能，我看到在每篇文章中，插件都使用自己的 WordPress 编辑器库。它采用生成的短代码（the_content(); 内部）并在 Mansory 类中显示图像。

我正在尝试这样做，但没有成功。

不管怎样，我想做什么？

->获取 WordPress 画廊的简码并在我的masonry 的divs 中显示每个图像

逻辑示例：
画廊简码：[gallery ids="1,2,3,4,5,6"]

我拍摄每张图片并在循环中显示。

实际例子：

这里我使用divs 的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.....

我该怎么做？

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