# wordpress内容页获取所有图片附件,并且瀑布流方式调用

- Link: https://yjyj.net/learn/wordpress-learn/5070.html
- Published: 2015-03-31T16:18:19+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 用附件循环把文章内所有图片抓出来，内容页也能做成瀑布流图集。
 * 代码重点是获取附件缩略图、原图链接，并用占位图配合懒加载。
 * 实操结论很直接：内容页展示更灵活，但要注意图片尺寸和加载体验。

囧客圈作为一个欢乐又变态的网站,
 就要有欢乐又变态的展示方式, 不仅列表页用瀑布流,
内容页也要上瀑布流! 那么下面这段小代码就是为了在内容也获取所有图片附件的调用方式:

    ```decode:true
    <?php
    				    foreach ( $attachments as $attachment ) {
    					  $size = wp_get_attachment_image_src($attachment->ID);
    				      echo '<li> ';
    				      //the_attachment_link( $attachment->ID, false, false, true );
    				      echo '<a href="'.get_permalink( $attachment->ID ).'#oye" class="photoview pic_tip" title="点击查看原图">';
    				      //echo '<a href="'.get_attachment_link( $attachment->ID ).'" title="点击查看原图" >';
    				      echo '<img class="scrollLoading current" data-url="'.wp_get_attachment_thumb_url( $attachment->ID ).'" src="http://jokeoo.com/wp-content/themes/zlxppp_test/img/pixel.gif" style="background:url(http://jokeoo.com/wp-content/themes/zlxppp_test/img/loading.gif) no-repeat center;" height="'.$size[2].'">';
    				      echo '</a>';
    				      echo '</span></li>';
    				    }
    				  endwhile; endif;
    				 ?>
    ```

哥在wordpress的大道上又前进了1毫米 感觉不错 继续努力!

❓ 延伸问答与排错指南（FAQ）

WordPress内容页怎么获取所有图片附件？

思路是先拿到文章关联的附件数组，再用 foreach 逐个遍历输出。每个附件可调用缩略图地址、
图片尺寸和链接地址，组合成列表或瀑布流结构。这样内容页就能把文章里的图片统一提取
出来展示。

瀑布流调用图片时要注意什么？

重点是别直接硬加载大图，最好先输出缩略图或占位图，再配合懒加载。这样能减少首屏压力，
避免内容页图片过多导致卡顿，同时保持瀑布流的视觉节奏更稳定。

这种图片展示方式适合什么场景？

适合图片较多、希望内容页更像图集或作品集的文章页面。比如教程配图、相册、案例展示
等，都可以用附件遍历加瀑布流来增强浏览体验，让页面更活泼，也更方便用户连续查看。

📚 【[WordPress 学习](https://yjyj.net/category/learn/wordpress-learn)】专栏延伸
阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [终于告一段落,wordpress的缩略图小研究](https://yjyj.net/learn/wordpress-learn/5001.html)
 * [实用小代码:WordPress显示当前文章分类的最新完整列表](https://yjyj.net/learn/wordpress-learn/4956.html)
 * [帮杨林哥差资料的时候,发现另外一个wordpress获取文章内所有图片的办法](https://yjyj.net/learn/wordpress-learn/5094.html)
 * [wordpress小代码:在文章列表页面显示文章字数](https://yjyj.net/learn/wordpress-learn/5114.html)
 * 热门必读[升级一下iptables](https://yjyj.net/learn/centos/3208.html)
 * 热门必读[京东云路由器雅典娜 AX6600 折腾记](https://yjyj.net/learn/7810.html)

## Comments

### By: 爱奇趣分享网

- Link: https://yjyj.net/learn/wordpress-learn/5070.html/comment-page-1#comment-14717
- Published: 2015-04-10T11:33:20+08:00

不错