给博客添加了 Highslide 功能给博客添加了 Highslide 功能

一直以来,在蓝蓝小雪的博客上展示图片都是个问题。不过,现在好了,我给博客安装了 Highslide4WP 插件,于是,现在点击图片会有很炫的效果喔。几个实例,快点点看:

(😢 已失效)

哈哈,以上图片就是蓝蓝小雪的主机服务商 HomeZZ 的老大 Cosbeta 的照片。效果很好吧?

最初是在 Showfom 的博客上看到的这个效果,看到了很喜欢,很像放到自己博客上用。看了一下他的代码,发现用了 Highslide 这个东西。于是在主机群里面问了一下,Eplie 告诉我,有个插件叫做 Highslide4WP

兴冲冲地来到 WP 后台安装,不料安装成功之后在文章中插入的图片还是点击之后在新窗口打开。蓝蓝小雪研究了一下,发现 WPMU 竟然把所有 JavaScript 都过滤了!早知如此,我就不用 WPMU,直接用 WP 了。Eplie 说这种情况就用 Shortcode 吧。

最终,根据官方手册的说明,写出了一段代码,放到了 functions.php 中。于是这堆问题终于解决了,所以上面的实例才会有效。

呃,我还是把这个代码贴出来吧,免得有人有同样的问题而找不到方法解决:

1 2 3 4 5 6 7 8 9 10 11
<?php
function snow518_img($atts, $content = null)
{
extract(shortcode_atts(array(
"l" => 'http://', /**默认值**/
"s" => 'http://', /**默认值**/
"id" => '43523324', /**默认值**/
), $atts));
return '<div><a href="'.$l.'" onclick="return hs.expand(this, {captionId:'caption_'.$id.''});"><img src="'.$s.'" alt="image" title="Click to enlarge" /></a></div><div id="caption_'.$id.'">'.$content.'</div>';
}
add_shortcode("img", "snow518_img");

使用的时候在文章中插入如下代码即可:

1
[img s="缩略图地址" l="大图地址" id="唯一ID(不要和已有图片重复)"]说明内容[/img]

————————碎碎念的分割线————————

早上两同学(Lois GuoYanrong Jin)发短信,问我是否应该今日报道(实际上应该是明天),只是因为 Yanrong Jin 看到一年级(对,是一年级)有同学去学校,认为我们初三也得去……

Version History版本历史

  • 2ae3808 Fix code highlighting
  • 0143959 I18N changes: Add language field to posts
  • 1b8eb8a Import some old posts from my Ghost blog; remove log-deprecated category
  • e34fb6f Add syntax highlighter
  • a0c097c Fix some formatting & broken links; remove yourls_shorturl, categories and tags
  • 5b93ba5 Remove author & delete some broken posts
  • 1ee024d Import posts from my WordPress blog