首页 > 编程语言> 文章详细

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

2019-07-11 08:32:10 阅读：246 来源： 互联网

标签：jquery wordpress php jquery-masonry masonry

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

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

我的CPT：

—&GT&GT&GT标题<<<< ---
—&GT&GT&GT图像默认 – 缩略图<<< ---
—&GT&GT&GT强效<<<<
—&GT&GT&GT图像&LT&LT&LT —
—&GT&GT&GT图像&LT&LT&LT —
…

前三个部分(标题,图像默认和内容)是基础.准备好了.

之后,我考虑使用自定义元数据并添加每个图像URL.但是,通过URL添加URL并不是直观的,对于用户来说,无论是新手还是高级,都可以为用户提供更多功能.此外,金额会有所不同,图片可以是1,可能是5可能是10等等.

我看到有一个plugin for WordPress,但插件不是全宽,当我将插件的CSS设置为全宽时,Mansory在视口大小调整中获得了几个错误.

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

我正在尝试这样做,但没有成功.

无论如何,我想做什么？

– >抓住WordPress图库的短代码并在我的砌体的div中显示每个图像< - 逻辑示例：
画廊的简码：

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

实际例子：

在这里,我用砌体的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.....

我怎么能这样做？

解决方法:

你快到了.您只需要获取并循环浏览图库图像.这样的事情对你有用.
参考这里：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 
}
?>

标签：jquery,wordpress,php,jquery-masonry,masonry
来源： https://codeday.me/bug/20190711/1430071.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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