将Lightbox特效整合到WordPress主题中
2019-03-27 08:53:34来源: eincy.com 阅读 ()
实用又华丽的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特效。
转载请保留链接:http://www.eincy.com/post/wp-lightbox.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 别TM打着人脉整合的旗号做圈子! 2019-04-10
- 360广告联盟改版:启用新域名 整合PC、移动广告 2019-04-10
- 互联网趋势关键词:交流,为价值付费,资源整合 2019-04-10
- 千万别用百度搜索这些词:真吓一跳 2019-04-08
- 内容为王的营销整合案例分析 2019-03-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash