无插件让 Wordpress 原生相册支持 lightbox

首页 » Wordpress研究 » 2009-10-31 »

Tag: JavaScript , jquery , wordpress

不提倡使用过多的 WordPress 插件，因为很多插件都会在 head 标签内增加大量的 JS，无疑这会影响到页面载入的速度，因而我就想能整合到主题里的效果尽量整合进来“统一管理”，这样自己也好让 JS 出现在它们需要的地方，避免不必要的加载。这里简单介绍一下给主题加入 jQuery 的 lightbox 特效后如何让它能够支持 WordPress 原生的图片相册功能。

我在上一篇日志里第一次使用了 WordPress 原生相册功能，给我感觉挺不错的——方便快捷，但是它的图片链接会重新打开图片，这着实不是很爽。另外，由于 D&Z Theme Pro CP 主题已经内嵌了 jQuery 的 lightbox 特效，于是我就想能否将两者结合起来，不试不知道，一试还真成功了而且还只是仅仅只是在 header.php 中加入了一句代码：

$('.gallery a').lightBox();

D&Z Theme Pro CP 的用户只需在 header.php 文件中搜索一下“lightbox”这个关键词，然后将上面那句代码添加成如下形式即可：

$(function() {
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    $('.gallery a').lightBox();
});

这里简单解释一下：
jQuery lightbox 的官方介绍（http://leandrovieira.com/projects/jquery/lightbox/）中可以得知调用 lightbox 特效的方法有如下几种：

$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

当我们在 WordPress 中插入原生相册的时候，系统会自动在调用相册的源代码中加入 gallery 这个 class：
自动添加 gallery class

然后我根据 lightbox 的调用方法，将其中的

$('#gallery a').lightBox(); // 凡是带有 gallery ID 的对象都会启用 lightbox 特效

改为了

$('.gallery a').lightBox();// 凡是带有 gallery Class 的对象都会启用 lightbox 特效

即可，相当 Easy 吧～这样 D&Z Theme Pro CP 主题就能良好的支持 WordPress 原生相册的功能了！

那么在一个不支持 lightbox 的 wordpress 主题里我们要如何做呢？
先去官方网站下载一套 jQuery 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 css 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下
打开主题的 header.php ，将如下代码加入到 <head></head> 标签内：

<script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>

然后再加入上文介绍的：

<script type="text/javascript">
$('#gallery a').lightBox();
$('.gallery a').lightBox();
</script>

就大功告成了～但是一般来说我们只会在文章页或者页面页调用相册功能，所以我们可以使用一个判断语句让它们只在这两类页面中加载：

<?php if (is_single() or is_archive or is_page()) { ?>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>
    <script type="text/javascript">
    $('#gallery a').lightBox();
    $('.gallery a').lightBox();
    </script>
<?php } ?>