很早的时候想着自己做个wp的主题，只是从来不去实现，现在越来越往后了，实际其实一直都有= = 但是感觉做之前的博客各方面都调试一下也许更好，所以尽量把插件这块配好。。。于是由此想到了博客图片的灯箱效果，也就是点击图片之后淡出放大并显示在整个页面之上。 然后还是经过搜索找到了自己想要的东西。一般大家都是通过安装plugin实现类似功能，而提供功能的插件也很多，比较之下在thickbox和slimbox时间选择了后者，原因是它的敏捷性–它只有我需要的一个功能。当然还有直接在主题内挂载jQuery库借助wp自身的一些设置自己实现类似的效果，自己还有待学习，先送上教程~ 忘了应该给出效果图的，这样，你点击这张图，试试吧~ ——————————————————————————- 除此之外呢，还有一个更新就是图片的异步载入，说白了就是当你打开一个页面的时候，页面上的图片并不是一下子全部下载下来显示的，而是根据你的滑动条的位置来判断自己是否显示。而且，图片显示的时候带有淡入淡出的效果，很流畅。 其实这同样是有强大的jQuery驱动的，只是这次我们并不去安装神恶魔plugin，因为它本身的设置很简单。 具体实现如下： 1.下载lazyload.js并上传到主题相应的目录中 2.在header.php文件</head>标签前（最好在<?php wp_head(); ?>语句前）添加如下代码： <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js”></script> <script type=”text/javascript”> $(function() { $(“img”).lazyload({ placeholder : “<?php bloginfo(‘template_directory’);?>/images/grey.gif”, effect : “fadeIn” }); }); </script> 第1行是说明调用jQuery库 第2行是说明lazyload.js文件的载入位置，<?php bloginfo(‘template_directory’);?>是调用相应主题路径的语句。 第5行img是延迟加载所有图片，可根据实际情况更改，有时候我们并不想将侧边栏的留言者的头像延迟加载，而只是要实现文章中的图片使用该效果，则根据实际情况修改相应的img语句即可，比如#post img 第6行语句是在图片加载前先用一个透明的灰色1×1像素的图片进行占位。 第7行是实现图片“淡入”的效果 当然上述只是我目前网页中的实现效果，它其他可用的效果还有很多，我就简略说一下： 1.当图片没有看到之前先把图片载入200像素（不设置的话，默认载入像素是零） 2.在图片加载前先用一个透明的灰色1×1像素的图片进行占位 $(“img”).lazyload({ placeholder : “img/grey.gif” }); 3.自定义触发事件进行载入：比如“click”（鼠标点击）和”mouseover”(鼠标滑过)等事件触发加载图片，使用自定义的事件, 如: sporty 和 foobar；默认情况下处于等待状态, [...]
Category Archives: WordPress
当天的落魄总结
今天一天可以说是围绕着昨天的问题展开的，不可谓一事无成，但都是小事吧。 昨晚上豆瓣的时候，无意间又瞟到了被抓取显示的自己的博文，但很可惜格式丧失的问题还在（本来就没解决的。。。），不禁觉得不能放着不管了，于是乎准备着手处理它。 第一想到的自然是搜索。一阵google 百度，毫无收获，键入的“抓取博文 格式丧失”几个关键字，看来很少甚至没怎么被提到过。。。心中很是纳闷啊，这下该怎么办呢？是关键字问题？我于是想了些近似的关键字拿去搜，依然颗粒无收。当时确实很失落的。 随后我想到求助于前辈。豆瓣上的相关人士还是很多的，我就给几个做web开发或者准程序员们发了豆邮，当然了，我还发给了豆瓣的帮助中心以及豆瓣老大–阿北。发完之后，新生希望了。于是辗转人人，竟偶遇alswl前辈。自然，我不会放过这个询问的好机会的。 前辈给的提示是如果博客的格式都是由css全权决定而css是外联的话，rss输出的博客就是无格式的了，因为它无法自动读取，至少在没有其他脚本的帮助下是这样。而且这种情况是文章的段落结构连基本的html标准语义都不存在的时候艹会发生的，难道我的东东如此落魄？当时我想的是不可能吧。。。于是去看了下，一开始没看明白，css确实是外联的（现在推崇的形式），但是否全文无html标识我还没明白，和前辈到了声晚安，倦意把我拖上了床。 第二天我 起的不早。。。兴奋地开豆瓣看回信，不料只有一封回音。是key4ever前辈的，他的意思一开始是说没设定全文输出（其实上个月初我去他的博客留言他回的也是这个只是当时不知道为什么没有回复提醒我也就把这是忘记了，这次重复问，前辈的耐心我很感动啊），我调了之后，问题还是存在的，在他的提示下我看了IE中自己博客的feed输出，竟然是有格式还带图的！GoogleReader上也是可以看到格式的！我就纳闷了，Firefox中开feed源地址看到的可是一篇荒芜啊，chrome也是，九点抓到豆瓣显示的自然还是！那究竟是为什么啊~~~ 前辈们可能都自己忙着呢，我决定自己想想办法。来到wp后台，从发布新文章里看可视化和HTML源码的切换，才发现，原来直接在可视化里码字，切到HTML格式连段落标识符都没有的，<p>啊<h>啊等等都没有，空空的！怎么会这样啊！后台管理器的问题？还是插件TinyMCE Advanced在作怪？这是个增加后台文章编辑功能的plugin，我心想，问题估计和他有点关系。。 于是我搜到了一篇文章WordPress 编辑器和代码高亮 。。之后的事都偏离了我要解决的问题。。。 我这才发现，自己的博客很多地方一点都不完善，仔细审视下来，大概有这么几点：1.页面宽度不够，在读产长篇文章时显得很不给力 2.没有页数导航，wp自带的单页反动极其被动，十分不方便 3.文章页面很空洞，不像很多网站有起码的相关文章 4.前辈们的博客充斥着代码且代码格式比较特别（就是代码高亮的说法吧） “问题大致这些，先解决了这些再说”（当时确实来劲之后把老问给忘了。。。） 1 遂先调整页面吧，这个相对比较死，也最简单。犹豫用的是Firefox，有写扩展对于web开发者来说十分方便，比如这个–Firebug。只需利用它，我就知道了我的index页中的content框是哪些各项属性值又是怎么样的，之后进入后台的外观选项中的Editor中更改便可以了。这个没几分钟变调试成功了。