收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

将Lightbox特效整合到WordPress主题中

2012-09-19 15:01 来源: 卓杰科技 www.zhuojie.cc [ ]

一、下载Lightbox2的相关文件,以下是为整合到WordPress而改削好的版本。

4.第四行代码用于设定lightbox.js文件执行的路径,不成删除。

下载完成后将lightbox文件夹上传到当前主问题问题录下

二、在header.php中加载相关文件

<link rel="stylesheet" type="text/css" href="http://www.zhuojie.cc/?/web/2012/0919/<?php bloginfo('template_url') ?>/lightbox/lightbox.css" />
<script src="http://www.zhuojie.cc/?/web/2012/0919/<?php bloginfo('template_url') ?>/lightbox/lightbox.js"></script>
$content = preg_replace($pattern, $replacement, $content);

代码注释:


<script src="http://www.zhuojie.cc/?/web/2012/0919/<?php bloginfo('template_url') ?>/lightbox/jquery-1.8.0.min.js"></script>

下载链接:Lightbox2_for_wp (3)

3.第三行代码用于加载实现lightbox的js文件。

三、在functions.php文件末尾插手以下代码

适用又华美的Lightbox特效其实可以轻松整合到WordPress主题中,本文将具体介绍这一体例。

1.第一行代码用于加载lightbox的CSS样式表,你可以将这些代码整合到主题的style.css文件中。

//lightbox 自动对图片链接添加rel=lightbox属性

//lightbox 自动对图片链接添加rel=lightbox属性
add_filter('the_content', 'pirobox_gall_replace');
<script type="text/javascript">Lightboxload("<?php bloginfo('template_url'); ?>/");</script>

function pirobox_gall_replace ($content)
{ global $post;
$pattern = "/<a(.*?)href=http://www.zhuojie.cc/?/web/2012/0919/('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
return $content;
}

2.第二行代码用于加载jquery,如不美观你的主题已经有加载,可以去失踪这一行。


$replacement = '<a$1href=http://www.zhuojie.cc/?/web/2012/0919/$2$3.$4$5 rel="lightbox"$6>$7</a>';

正如代码中的注释一样,这段代码用于对文章中的图片链接,自动添加“rel=lightbox”的属性,以触发Lightbox特效。

转载请保留链接:http://www.zhuojie.cc/?/post/wp-lightbox.html