WordPress插件Auto Highslide代码化折腾小记

编辑：狂族晨曦 来源：WordPress技巧 日期：2016-03-09 阅读： 2,683 次 抢个沙发 百度已收录

Auto Highslide插件是先森用的灯箱插件，也就是文章中的图片可以点击放大，并且文章中的所有图片可以像幻灯片一样左右切换查看。

安装Auto Highslide插件后，鼠标放在文章的图片中，鼠标图案会变成放大镜，提示可以放大。发大这个在实际应用中很有用。这个插件的设定是，点击图片放大，放大会放大到适应屏幕的大小，如果查看最大化（实际大小），需要点击按钮或者快捷键“F”键：

Auto Highslide插件查看实际大小

认识这个插件，先森也是在免费资源部落看到的。搜了一下，在WordPress插件库里搜索，好像搜不到Auto Highslide插件，所以要看详细介绍或下载的，可以去免费资源部落看看：

• 免费资源部落：WordPress博客网站文章图片美化技巧:放大、幻灯片播放

本文记录的是先森将Auto Highslide插件变成主题自带，也就是代码化的折腾过程。各个WordPress的先辈们都在说，WordPress的插件过多，会影响网站的响应速度，所以插件是装的越少越好。当然，这也不是绝对，要看自己的优化。

先森最近想实现的是让灯箱能够配合上七牛的图片处理。目标有两个：

1.图片加上水印；

2.没放大之前，图片是被七牛裁剪成宽度500px的，点击图片后显示原图。

但是先森思考了很久，也没有想出能够同时实现两个目标的方法。因为先森的WordPress后台文章编辑是用的百度UEditor编辑器，所以不能像WordPress自带的编辑器插入图片时选择切好的大中小三种图片大小。这就需要七牛、百度UEditor编辑器、Auto Highslide插件三方的协调，所以先森有点脑子不够用。

虽然没有想出怎么解决，但是却顺便把Auto Highslide插件代码化给解决了。

将服务器中的Auto Highslide插件文件夹下载下来，打开“auto-highslide.php”文件。找到文章中的以下代码：

'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide

已用有3段以上代码，分别在第23、24、27行，将以上代码全部替换成以下代码：

'.get_bloginfo('template_directory').'

插件的代码也就修改完了，非常简单。接下来现将修改好的“auto-highslide.php”文件，与插件文件夹中的“highslide”文件夹上传到你的主题文件夹中。

当然，仅仅如此还没有生效，还需要在你的主题functions.php中添加下面的代码：

//灯箱插件代码化
include("auto-highslide.php");

这就完工了。设置之前先森将插件停用了，看了一下图片放大失效了。设置完后再检查，OK，放大效果又回来了。下面就可以放心的把插件删除啦：

删除Auto Highslide插件

重要补丁

要使Auto Highslide插件生效，还需要在日志中插入图片时，选择链接到媒体文件，如果不设置的话，图片暗箱效果就无法生效。但每次都点击设置的话，会比较麻烦。如果发布了很多文章之后，才开始启用灯箱，如果还要将发布过的文章重新设置图片，那就更麻烦了。所以感谢知更鸟博客鸟哥，教了大家一种补救方法，大家可以去原文看看：

• 知更鸟博客：为WordPress文章图片自动添加链接到原图

方法其实也很简单，将下面的JS代码到主题header.php模版文件中：

<script type="text/javascript">
$(function() {
	$('#newsContent img').each(function(i){
		if (! this.parentNode.href) {
			$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
		}
	});
});
</script>

该脚本会检查文章中的图片是否包含了链接，如果没有，会自动为图片添加链接到原图。

修改其中的 #newsContent 为你主题正文的CSS类。

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

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

历史上的今天:

• 2017:  最近在忙什么？破解(10)