为wordpress文章图片添加原图链接和图片放大效果

2017-05-26 0 评论 3,455 查看 0 点赞

今天接到用户反馈，葱子的博客文章，点击图片无法查看大图，只能右键新窗口打开看。

这个体验非常的不好。

所以，我今天搜集了下方案，实现了文章页中点击图片放大的效果。

你可以点击下面这张图片试下效果：

问题分析：

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即可