用代码代替wordpress插件实现wordpress图片暗箱功能!

新主题上线,先备份一篇来自CREEKOO的用代码代替wordpress插件实现wordpress图片暗箱功能的文章吧,对于本站来说,这样的功能是十分需要的,因为对于wordpress主题预览的时候,如果放大图的话,影响网站加载速度,现在有了这个功能后,即可在文章内容里插入缩略图,用户点击后弹出最大的清晰图片,是否很多朋友也在为wordpress自带的图片弹出效果十分差而烦恼吗?

那么今天这篇文章将为您解决这个问题!

这里直接给出教程和FancyBox文件包!
20131204102027

首先在主题文件的header.phpl里添加以下调用代码:

  1. <!-- 加载 Fancybox CSS文件 -->
  2. <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/fancybox.css" />
  3. <!-- 加载 jQuery JS文件(如果模版文件已经加载jQuery,无需加入此段代码) -->
  4. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery-1.9.0.min.js"></script>
  5. <!-- 加载 Fancybox JS文件 -->
  6. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/fancybox.js"></script>
  7. <script type="text/javascript">
  8.     $(document).ready(function() {
  9.         $(".fancybox").fancybox();
  10.     });
  11. </script>

然后找到主题文件下的functions.php 文件,将以下内容添加至?>之前

  1. add_filter('the_content', 'fancybox');
  2. function fancybox ($content)
  3. global $post;
  4. $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
  5. $replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>';
  6. $content = preg_replace($pattern$replacement$content);
  7. return $content;
  8. }

最后下载FancyBox文件包解压后放到主题文件的根目录下后,全部保存。。。现在看看wordpress主题站点内的图片弹出效果,肿么样,是否十分绚丽呢?呵呵,效果达到!

文件包下载