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

Question

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

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

我的 CPT：

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

前三部分（标题、图片默认和内容）是基础知识。准备好了。

之后，我考虑使用自定义 metabox 并添加每个图像 URL。然而，通过 URL 添加 URL 并不直观，而且对用户来说需要做更多的工作，无论是新手还是高级用户。此外，金额会因图片而异，可以是1个，可能是5个，也可能是10个等等。

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

注意到插件的功能和您的代码，我看到在每个 post 中，插件都使用 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 
}
?>

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

How to insert each image of gallery in certain div? Wordpress

php

wordpress

jquery

jquery-masonry

masonry