为WordPress主题添加Pirobox图片暗箱特效,同时使用Css Sprite进行优化压缩!

首先下载我做好的压缩包:

下载地址

优化调用添加Pirobox 图片暗箱特效教程:

1.把下载包里的pirobox.css和pirobox.js放到当前主题的根目录,把4个图片放到主题的images文件夹里

2.使用Notepad++打开header.php,在里面添加下面的代码(添加位置挨着上面的<link标签添加一行就行了):

  1. 【<】link rel="stylesheet" type="text/css" href="<!--?php bloginfo('template_url'); ?-->/pirobox.css" rel="external nofollow" target="_blank" /【>】

3.使用Notepad++打开footer.php,在“”标签前面添加下面的代码:

  1. <!--?php if ( is_single() ){ ?-->
  2. <script src="&lt;?php bloginfo('template_directory'); ?&gt;/pirobox.js"></script><script>// <![CDATA[
  3. $(document).ready(function() {  $().piroBox({ my_speed: 400,  bg_alpha: 0.3,  slideShow : true, slideSpeed : 4, close_all : '.piro_close,.piro_overlay'       }); });
  4. // ]]></script>
  5. <!--?php } ?-->
  6. 注:在footer 添加此段js,延后加载可以让网站更快的加载完毕;增加判断文章页加载可以避免网络堵塞,更利于网站优化。

4.因为此效果的js 触发是根据判断是否含有“class="pirobox_gall"”标签属性,因此我们需要给链接增加此属性,你可以修改框架文件,不过最简单的方法是把下面的代码添加到当前主题的functions.php中:

  1. //Pirobox暗箱效果自动添加标签属性
  2. add_filter('the_content', 'ATheme_pirobox_gall_replace');
  3. function ATheme_pirobox_gall_replace ($content) {
  4. global $post;
  5. $pattern = "/&lt;a(.*?)href=('|\")([^&gt;]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)&gt;(.*?)&lt;\/a&gt;/i";
  6. $replacement = '&lt;a$1href=$2$3.$4$5 class="pirobox_gall" $6=""&gt;$7';
  7. $content = preg_replace($pattern, $replacement, $content);
  8. return $content;
  9. }

5.最后特别提醒一点,有很多同学添加后发现没有效果,其实你是缺少了a标签的属性,只是img标签没有衔接a标签的话怎么能够点击,更别说放大效果了。
如果你是使用自带的上传工具,那么上传完就会自动衔接,上面代码添加后就会有效果;
如果是使用的是图片外链,可以手动添加a标签,其实在后台url上传的地方也可以添加衔接地址

还没有评论,快来抢沙发!

发表评论

  • 😉
  • 😐
  • 😡
  • 😈
  • 😯
  • 😛
  • 😳
  • 😮
  • 😆
  • 💡
  • 😀
  • 👿
  • 😥
  • 😎
  • 😕