WordPress 非插件使用 Fancybox 2

sys2016-05-22 12:03暂无评论网络百科FancyBox, WordPress

对于网站的图片灯箱效果，我使用过一段时间 Auto HighSlide 插件，感觉还是不错的。用久了发现有些小细节不太符合自己的使用习惯，才想起之前的用过的 FancyBox for WordPress 插件。这个插件用起来还算比较顺手，不过试了下安装以后在目前的主题上无法使用。请教威言威语找到了问题所在，原因是主题禁用了 WordPress 自带的 jQuery 库输出，而插件自身的 js 链接输出是依赖于被禁用 jquery-migrate.min.js 文件的。解决方法比较简单，只要将这个 jquery-migrate.min.js 文件链接在 header.php 中输出一下就可以了。

插件可以使用了，但发现这款插件是基于 2010 年 11 月 11 日发布的 FancyBox 1.3.4 版本，距今近六年了。于是顺藤摸瓜，在 FancyBox 网站找到了 FancyBox 2。这算是 FancyBox 的升级版吧，虽然 2013 年发布至今也有 3 年左右了，不过总归比 1.x.x 版本要新一些。摸索着在没有现成插件的情况下把它添加到了自己的网站上，这里记录下大致的思路。

一、准备必要的文件

到 FancyBox 2 官网下载 FancyBox 2.1.5 代码包。

解压其中的 source 文件夹到 WordPress 的主题目录中，可以把它重命名为 fancybox。这里以“主题目录/plugins/fancybox”为例，jquery.fancybox.pack.js 文件应该位于该目录。

点击下载

二、引入相关的 js 以及 css 文件

在 header.php 中的 head 标签内添加下面代码：

<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/plugins/fancybox/jquery.fancybox.css">

<!-- 引入 js -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/plugins/fancybox/jquery.fancybox.pack.js"></script>

如果首页中的文章摘要不需要使用 Fancybox 组件，可以用：

<?php if ( is_singular() ) : ?>
	<!-- 这里是引入文件代码 -->
<?php endif; ?>

包裹上述代码，使其只在“文章”和“页面”页输出。

三、配置网站中的图片使其适应 FancyBox

将需要启用灯箱效果的图片添加指向自身的链接，如：

<a href="https://syshut-com.bj.bcebos.com/2016/05/fbsrc.png">
	<img src="https://syshut-com.bj.bcebos.com/2016/05/fbsrc.png" />
</a>

FancyBox 的 js 代码会识别链接中 a 标签内相应的 class 属性，并为其渲染出相应的效果。不过使用 WordPress 文章编辑器插入的图片默认是不带有这些属性的，就如上面的形式。所以用下面这段代码来实现批量添加的功能：

//add class
function pirobox_auto( $content ) {
	global $post;
	$pattern = "/]*?)>/i";
	$replacement = 'ID . '>';
	$content = preg_replace( $pattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'pirobox_auto', 99 );

四、激活 FancyBox 并配置灯箱效果

万事俱备，只欠东风。现在需要一段代码激活 FancyBox 的功能，并配置淡入淡出、上翻下翻、按钮控制等的显示效果。示例如下：

$(document).ready(function(){
	$(".fancybox").fancybox({
		// 这里是效果代码
	});
});

注意引号中的 .fancybox 要与第三步中的 class 属性值对应。

另：这款插件的使用吸取了一些网友的经验，但网友们的文章大多比较粗略，并没有一篇教程能参照着从头到尾做下来而成功的。本文经 sys 总结而成，对网友的分享深表感谢，在此不一一列举。

SYS 棚户区