成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

WordPress技巧

分段图

最新文章

WordPress技巧
当前位置: 首页 » 大学杂谈 » WordPress技巧 » WordPress插件Auto Highslide代码化折腾小记

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

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

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

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

Auto Highslide插件查看实际大小 -1

Auto Highslide插件查看实际大小

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

本文记录的是先森将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,放大效果又回来了。下面就可以放心的把插件删除啦:

删除插件 -2

删除Auto Highslide插件

重要补丁

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

方法其实也很简单,将下面的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>

历史上的今天:

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共1882个字
转载请注明出处来自http://www.capjsj.cn/wp_cjahdmhztxj.html
已有 0 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
匿名的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
官方微信
发表评论 返回顶部