将Lightbox特效整合到WordPress主题中
来源: 阅读:1248 次 日期:2014-09-03 11:19:55
温馨提示: 小编为您整理了“将Lightbox特效整合到WordPress主题中”,方便广大网友查阅!

实用又华丽的Lightbox特效其实可以轻松整合到WordPress主题中,本文将详细介绍这一方法。

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

下载链接:Lightbox2_for_wp (3)

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

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

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/lightbox/lightbox.css" />

<script src="<?php bloginfo('template_url') ?>/lightbox/jquery-1.8.0.min.js"></script>

<script src="<?php bloginfo('template_url') ?>/lightbox/lightbox.js"></script>

<script type="text/javascript">Lightboxload("<?php bloginfo('template_url'); ?>/");</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 = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";

$replacement = '<a$1href=$2$3.$4$5 rel="lightbox"$6>$7</a>';

$content = preg_replace($pattern, $replacement, $content);

return $content;

}

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

更多信息请查看IT技术专栏

更多信息请查看CMS教程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map