为WordPress正文图片自动添加链接到原图

2017年9月12日06:05:28 发表评论 391 views
为WordPress正文图片自动添加链接到原图

使用为知发布WordPress博客文章有个图片链接到原图问题:因为发布后的文章直接显示原图,因此文章中图片没有链接属性,无法使用点击图片后放大的特效(因为我们有时候图片长度太长或者宽度太宽,为了文章美观需要缩小图片布局;缩小后图片中的内容无法看清,此时浏览者根据自己想看的点击相应图片放大浏览是一直通用的解决方案)

1、在主题header.php中添加图片自动链接原图的js代码

添加下面的js代码到主题的header.php模板文件中,该脚本会检查文章中的图片是否包含了链接,如果没有,会自动为图片添加链接到原图。
注意修改.single-content 为你主题正文的css类

如果你的主题未加载jquery.js库文件,代码将无效,可以将这句代码加到上面:

header.php示例图:为WordPress正文图片自动添加链接到原图

1.1 如何查找主题正文的css类

在chrome浏览器中打开一片文章右键“检查”调出检查工具,寻找对应区块的类名
为WordPress正文图片自动添加链接到原图

2、使用图片暗箱插件

上面代码只是将图片链接到原图,并没有暗箱效果,此时就可以选择你需要的暗箱效果来选择插件。

2.1 Auto Highslide(推荐使用)

优点:自动关联图片,可查看前后图片。
为WordPress正文图片自动添加链接到原图

2.2 使用主题自带图片暗箱的代码

有些主题内置暗箱功能,比如知更鸟主题使用class='fancybox'即可。
为WordPress正文图片自动添加链接到原图
缺点:知更鸟主题自带的暗箱功能没有关联效果,不能前一张长、后一张。

2.3 WP FancyZoom(不建议使用)

缺点:只显示单张,而且必须点到暗箱图片才能取消放大后图片。

为WordPress正文图片自动添加链接到原图

 
 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: