pasckr 发表于 2016-5-12 18:17:04

将Lightbox特效整合到WordPress主题中






              实用又华丽的Lightbox特效其实可以轻松整合到WordPress主题中,本文将详细介绍这一方法。
一、下载Lightbox2的相关文件,以下是为整合到WordPress而修改好的版本。
下载链接:Lightbox2_for_wp (3)
下载完成后将lightbox文件夹上传到当前主题目录下
二、在header.php中加载相关文件
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;<?php bloginfo('template_url') ?>/lightbox/lightbox.css&quot; />
<script src=&quot;<?php bloginfo('template_url') ?>/lightbox/jquery-1.8.0.min.js&quot;></script>
<script src=&quot;<?php bloginfo('template_url') ?>/lightbox/lightbox.js&quot;></script>
<script type=&quot;text/javascript&quot;>Lightboxload(&quot;<?php bloginfo('template_url'); ?>/&quot;);</script>代码注释:
1.第一行代码用于加载lightbox的CSS样式表,你可以将这些代码整合到主题的style.css文件中。
2.第二行代码用于加载jquery,如果你的主题已经有加载,可以去掉这一行。
3.第三行代码用于加载实现lightbox的js文件。
4.第四行代码用于设定lightbox.js文件执行的路径,不可删除。
三、在functions.php文件末尾加入以下代码
//lightbox 自动对图片链接添加rel=lightbox属性
//lightbox 自动对图片链接添加rel=lightbox属性
add_filter('the_content', 'pirobox_gall_replace');
function pirobox_gall_replace ($content)
{ global $post;
$pattern = &quot;/<a(.*?)href=('|&quot;)([^>]*).(bmp|gif|jpeg|jpg|png)('|&quot;)(.*?)>(.*?)</a>/i&quot;;
$replacement = '<a$1href=$2$3.$4$5 rel=&quot;lightbox&quot;$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}正如代码中的注释一样,这段代码用于对文章中的图片链接,自动添加&ldquo;rel=lightbox&rdquo;的属性,以触发Lightbox特效。
转载请保留链接:http://www.eincy.com/post/wp-lightbox.html
页: [1]
查看完整版本: 将Lightbox特效整合到WordPress主题中