修改 WordPress 主题原生支持 LightBox 和 TagCloud 无需插件

目前本博所用的模板还是半年前从 zblog 转到 WordPress 时自己做的,当时做成以后一直没有怎么修改过,也装了不少插件结果页面打开速度就越来越慢,今天花了一些时间暂时把比较有用的 LightBox 和 TagCloud 直接整合到了模板中,这样可以少装两个插件了,因为一些定制的属性可以直接写模板里面不用存数据库,整合之后效果还是相当明显的:

修改之前的首页加载时间 7s 页面大小 215kb 左右;修改之后的首页加载时间 5s 页面大小 133kb 左右。

目前使用 YSlow 测试按照小型网站及博客标准(Small Site or Blog)可以得到 Grade A 相当不错了,如果将 TagCloud.swf 压缩并使用 GoogleAPI 加载 js 的话理论上页面加载速度还可以更快,暂时还是这样吧,由于浏览器缓存原因页面上的部分内容可能显示错误,建议使用 Ctrl+F5 重新加载一次本站页面更新浏览器缓存。

一、整合 LightBox 插件:

整合 LightBox 相对要容易的多,其实此类插件有很多如 AutoThickBox LightBox2 等等,相关的 js 类库也有很多,我这里选的是 jQuery LightBox Plugin 原因是本站之前已经引入了 jQuery 类库,所以之后添加的 js 都会在 jQuery 的基础上考虑,另外我个人使用过得类似功能的 js 插件中这个插件最小而且功能够用,非常划算。

1、下载 jQuery LightBox Plugin 插件,下载页面:http://leandrovieira.com/projects/jquery/lightbox/

2、将 js 及 css 引入模板文件,这里具体路径需要根据实际情况调整:

					

4 thoughts on “修改 WordPress 主题原生支持 LightBox 和 TagCloud 无需插件

  1. 清日

    wordpress里有类似功能效果的jQuery LightBox Plugin插件吗?

    有很多这样的第三方插件,你可以尝试直接在插件安装界面搜索 LightBox 就可以找到很多了……

  2. bb

    你好,我不是很懂什么wordpress和jquery,但是我看中一个wp主题fotofolio,首页是有幻灯片方式显示图片。但是我看了久e文的主题帮助,愣是没看明白怎么去设置幻灯。后来我在主题文件夹里看见有js文件夹里面有jquery文件,几经了解大概这就是幻灯片的程式吧。但是问题还是我不知道应该怎么在wp后台进行幻灯设置。已经问了很多人但是仍没人能帮助我,不知道BLOG主你能否帮忙解答一下呢?fotofolio主题帮助地址在这http://pupungbp.erastica.com/wordpress-theme/fotofolio-wordpress-theme-for-your-online-portfolio/

    anyLiv:主题下面 ReadMe 里面有这么一句 “Main picture on the homepage called “Featured” section, so you need to create a category called “Featured” to get this work. Latest 5 Posts in this category will be shown in homepage slideshow.” 希望对你有用!

    anyLiv:新版的 fotofolio 好像不用新建一个分类叫 Featured 了,在选项里面可以选择任意一个分类做为首页相册的展示,至于你说的首页幻灯片不显示应该是你操作的问题,我这边测试没有这种现象,有一点需要注意的是,似乎主题模板读取的是文章“相册”里面的图片,与文章正文中的图片无关,务必确定在文章的“相册”里有那个图片才可以被显示。文章的相册在文章的”上传or插入”媒体工具里。

  3. 王海臣

    利用jQuery SWFObject plugin如何才能检测flash是否下载完毕

    在网络上用jQuery SWFObject plugin来播放swf文件时,由于需要从服务器中下载,在下载过程中页面一直处于空白阶段.我该怎么做才能知道swf文件已经下载完了呢?

    anyLiv:建议你尝试一下 jQuery Tools FlashEmbed 这个东西:http://flowplayer.org/tools/flashembed.html 另外你的 swf 最好边下边播做一下缓冲。

  4. anyLiv 文章作者

    $(‘a:has(img)’).lightBox({ });

    这里没有考虑周全,目前会导致使用 图片 做 logo 的也启用 lightBox 解决方法是前面做一下限制:

    $(‘.post a:has(img)’).lightBox({ });

    这里的 post 是文章外层 div 的 class 如此限制即可,另外我上面的 lightbox 属性写法在 IE6 下会报错(缺少标识符、字符串或数字)原因是 JSON 最后的一项末尾多了一个逗号,去掉即可。

    后续补充:

    另外,这里的 swfObject 推荐使用 jQuery.swfObject 插件,一是可以最大限度减小 js 文件大小,也可以使你的 js 更结构化。

评论已关闭。