PageTalks

众所周知，WP2.3以后的版本其中都内置了jQuery的库，而WP2.5已在后台用了Thickbox！那么我们为何不在前台利用Thickbox来改善站点的用户交互体验呢？

脚本在哪里？

既然已经内置了，那么这些东西都在哪呢？我们来查看管理页面的代码，会在HEAD部分发现如下两行：

<script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/jquery/jquery.js?ver=1.2.3'></script>
<script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.js?ver=3.1'></script>

以上就是我们调用Thickbox所需要的脚本。如果你想使用和后台一样风格的Thickbox，可以直接引用后台中Thickbox的定义：

<style type='text/css' media='all'>
@import 'http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.css?1';
div#TB_title {
background-color: #222222;
color: #cfcfcf;
}
div#TB_title a, div#TB_title a:visited {
color: #cfcfcf;
}
</style>

添加他们

现在找到你使用的Theme下面的header.php，找到如下代码：

<?php wp_head(); ?>

在其之后添加上文找到的JS和CSS代码，这样你就可以正常地在前台页面里面调用thickbox了。当然，你可以实用Wordpress的内置函数来加入jQuery脚本。Wordpress其实已经内置jQuery的脚本库。

<?php wp_enqueue_script('jquery'); //Include jQuery ?>

注意一些不同之处

由于WP的开发小组为WP后台程序重新修改过thickobx的JS代码，所以使Thickbox的窗口有很大的不同。如果你想使用自己订制的，就不能按照上文所说的方法直接指向WP内置的相关脚本。你需要在HEADER部分链接自己的thickbox.js和thickbox.css文件。
即时你使用的是WP原版的thickbox，你会发现直接调用，thickbox窗口右上角的”Close”按钮的图片无法显示。不用怀疑，绝对是相对地址所造成的问题。
打开
果然，我们可以找到图片都是相对引用，在不同的位置引用会造成URL错误。
var tb_pathToImage = "../wp-includes/js/thickbox/loadingAnimation.gif";
var tb_closeImage = "../wp-includes/js/thickbox/tb-close.png";
将他们更改为绝对地址的引用，例如：
var tb_pathToImage = "http://www.elfvision.com/blog/wp-includes/js/thickbox/loadingAnimation.gif";
var tb_closeImage = "http://www.elfvision.com/blog/wp-includes/js/thickbox/tb-close.png";

OK，到这里，我们又榨干了WP的血。其实WP已经有Thickbox插件了，我们动手操作的意义何在？
那是因为thickbox插件使用的是插件目录下的jQuery和Thickbox文件，意味着浏览者会下载双份的Js和CSS文件，无疑是浪费资源。而且，插件的jQuery文件不会随着WP的更新而更新……
其实如果我有能力会编写一个在WP2.5下面，并且根据本文思路的Thickbox插件……可惜我不太会PHP，哪位有兴趣的朋友可以来试验一下。