为wordpress文章图片添加原图链接和图片放大效果
今天接到用户反馈,葱子的博客文章,点击图片无法查看大图,只能右键新窗口打开看。
这个体验非常的不好。
所以,我今天搜集了下方案,实现了文章页中点击图片放大的效果。
你可以点击下面这张图片试下效果:
问题分析:
1、如何实现点击图片放大的效果?
解决方案:
1、安装wp的插件Auto Highslide,点击下载
插件安装好后,就实现了图片点击放大的效果。
接着又出现新的问题了。
这个点击放大效果需要文章图片本身链接到源文件,很多以往的旧文章里面的图片没有链接到源文件,一个个的修改起来非常的麻烦。
怎么办?
找到了解决办法:
添加下面的JS代码到当前主题header.php模版文件中的<head>标签下方:
<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.entry img').each(function(i){
if (! this.parentNode.href) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
});
});
</script>
该脚本会检查文章中的图片是否包含了链接,如果没有,会自动为图片添加链接到原图。
修改其中的 .entry 为你主题正文的CSS类。
重点部分我已经标红了,怎么去寻找这个.entry呢?
打开你博客任一篇文章,右键查看源代码:搜索“article”,找到类似的红框中的信息,替换entry即可