php - 如何在某些div中插入图库的每个图像？ WordPress

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

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

我的 CPT:

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

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

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

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

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

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

无论如何，我想做什么？

-> 捕获 WordPress 画廊的短代码并在我的 div 的 masonry 中显示每个图像
示例逻辑:
画廊简码:[gallery ids="1,2,3,4,5,6"]
我拍摄每个图像并在循环中显示。

实际例子:

在这里，我使用 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.....

我怎么能做到这一点？

最佳答案

你快到了。您只需要获取并循环浏览图库图像。像这样的事情应该适合你。
引用这里: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
}
?>

关于php - 如何在某些div中插入图库的每个图像？ WordPress，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39045962/