Post

WordPress调用文章全部图片,并且做成灯箱效果

2015年10月7日00:44:15更新,其实做成碎碎念那样的效果,并不用那么费心思!既不用考虑调用全部缩略图,也不用考虑怎样加灯箱效果给缩略图。直接用<?php the_content(); ?>调用全文即可解决。
—————————————————————————————————————

先上demo如下图,链接是:碎碎念-Kouss博客
QQ截图20151004014422

我这个是一个分类目录,文章列表形式,只是删除标题,然后把正文直接展示出来而已。
具体可以看两篇文章:
修改多梦主题,为不同文章分类指定不同模版
如何在WordPress上写短微博/说说,制作展示页

首先,需要调用每篇文章里面的图片。如果只是用特色图像,或者调用缩略图的方式去做,那只能是一张的。我这里贴一段我觉得比较不错的代码:
//调用文章的全部图片
function all_img($content){
$pattern = '/<img[^>]*src=\"([^\"]+)\"[^>]*\/?>/si';
$matches = array();
if (preg_match_all($pattern, $content, $matches)) {
// 注意,$matches[1]中才是图片地址,可以自己打印看看
// 如果图片小于1,则不显示缩略图
if (count($matches[1] > 1)) {
// 显示4张图片
foreach ($matches[1] as $index => $imgUrl) {
echo "<img src='";
echo $imgUrl; // 显示图片
echo "' alt=".get_the_title()." />";
// $index为3的时候已经是第四张了($index从0开始的)
if ($index >= 3) {
break;
}
}
}
} else {
// 没有图片了
echo "";
}
}

在文章列表相应的位置,放入:<?php all_img($post->post_content);?>
这样文章里面的所有图片就能全部调用出来了。

接下来,我们要做灯箱效果。什么是灯箱?可以看:给文章图片添加一个灯箱插件—Auto Highslide
我们这里要配合这个插件使用,那我们还需要做?
1、把图片改成a标签下包裹img标签的形式
2、比文章内容页稍微麻烦,要加上onclick事件
3、鼠标移动到图片时,显示放大镜效果,添加class='highslide-image'
最终是要下面那种形式:
<a href="http://s.kouss.com/wp-content/uploads/2015/09/20762.jpg" class='highslide-image' onclick='return hs.expand(this);'>
<img src="http://s.kouss.com/wp-content/uploads/2015/09/20762.jpg" />
</a>

回到我们上面说的,调用文章全部图片的方法,那种方法可以通过$imgUrl这个变量来输出图片链接,然后怎么折腾都行了。
请轻吐槽不懂php语法,截个图,不贴出来害人。
QQ截图20151004020507

Leave a Reply

  • 评论2则,共1页,当前第1
    • qazwsx201326

      楼主好厉害,小白不懂PHP,,,看教程还是做不出来。。。 <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_org.gif" alt="" title="" class="ds-smiley" />

      • 我也不懂php,只看得懂一点点。。这不算教程其实。。只是个思路。。。百度多几下就会了。