WordPress折腾手记 6
这篇距离上次优化 WordPress 主题的间隔比较长。
主题看起来还是老样子，我喜欢一个主题用很久的，当前主题保守估计一年以上。
但和以往不同，这回都是偶尔添加一些东西（绝大多数来自朋友们的博客），现在只是汇总一下。也把一些资源、教材的链接和朋友们分享。
这次弄好，先休息下。 WordPress 3.0 还在观望中。
主题兼容性提升
1.修复 IE 6下文字过大的问题和一些错位问题
考虑到 IE 用户的访客比例还是很高，虽然不鼓励 IE，但总是要留点可看性。
13px 的字号在IE 6下总是很大= =，导致本来就不整齐的页面进一步错位。
折腾了半天原来是字体问题，把 Tahoma 改成 Verdana 解决了。
2. 搜索框样式改进
搜索框样式改进，主要用 CSS3 圆角和 box-shadow 效果。Opera 10.5～10.7 以及 FF3.64～4.0 下表现基本一致。
IE 6下，搜索框不再完全变形了- -，凑合吧。
Chrome 环境下，搜索提交按钮的图标终于能显示了。但 box-shadow 的样式很奇怪。
请对 CSS 比较了解的朋友们指教下。
导致出现问题的该部分代码为：
box-shadow:inset 1px 1px 1px #ddd; -moz-box-shadow:inset 1px 1px 1px #ddd; -webkit-box-shadow:inset 1px 1px 1px #ddd;
页面滚动
Opera 环境下 jQuery 滚动到顶部的画面闪烁 bug 已经修复。在用于滚动的 js 代码前添加一段 Opera 补丁即可。
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
});
主题的功能改进
为博客图片添加 Shadowbox 效果，加强看图体验。
启用 Lazy Load jQuery 插件，延迟加载图片，让网页元素加载顺序更加合理。
更新 Gravatar 头像緩存 和 Recent Comments 代码，执行效率更高，加上缓存插件，现在的查询时间几乎都在 0.5s 以下。感谢低调的高手 Willin Kan 和 zww 。
将分页代码替换为 Mini Pagenavi，代同样出自 Willin Kan，比起我以前从 wp-pagenavi 直接挖出来的精简很多。感谢 om 为 Mini Pagenavi 添加“上一页”、“下一页”链接。
仿照 Rss 订阅按钮，为 Follow me 添加了一个菜单，效果见导航栏右侧，方法见：jQuery 的 slideUp 和 slideDown 动画。
主题的其他修改
为链接添加 transition （CSS 渐变效果），由于我的颜色搭配，这并不明显。方法详见：利用CSS添加渐变（Transition）效果。
为获取焦点后的文本框添加 box-shadow 效果。
使用 IE 条件注释，为 IE 浏览器访客添加提示，效果见图2。
侧栏模块顺序调整，分类和日志下拉框样式调整。
其他一些细节调整。
» 转载请以超链接形式注明来源：A.shun Blog » 《WordPress折腾手记 6》
» 本文链接地址：https://shun.im/21372
坐沙发上看保守派窝瓜的折腾记。 😀
被你诱惑的我的折腾之心又蠢蠢欲动了。>< 用Mini Pagenavi是不是又可以少用一个插件了？ ➡
@Vicia 是的，可以省下一个插件。我现在还剩下10个。
@A.shun 那一定要用。><
Most Active Friends Of The 30days
这个是什么插件啊？
@Dreamix 那个是代码实现的，环保低碳 😀
详见：http://zww.me/archives/24732
沙发没得真快
@wampus 从tw来的速度比较快
很好 支持折腾~！
@阿邙 你也折腾得很好 ➡
@A.shun 一般般啦 都是慢慢学习来的
➡ 沙发 板凳 都没了。。。
页面导航条不错
又在折腾了 🙄 。
总能在这儿学点什么，不少已经用上了，不过css有困难，不会 😡
@婉秋 没事，css的总不会是大问题。大不了取消webkit的那个效果。
我的主题用的也蛮久的了，快3年了。
@SoleilNeon ❗ 佩服 🙄
🙄 🙄 以后可以应用于工作中 😀
@久酷 哈，我的工作和这个不沾边呢
我经常看到 mg12 喊 去他妈IE。。。。 ❗
@Afio 是啊。twitter的一道风景呢。 😳
不知道为什么我留言时需要审核，还有提交评论后，提示审核的部分文字被头像遮盖。
@zrqx008 那个审核真的很奇怪。。应该不会出现才是。
提示审核的样式的确有问题，下次折腾。
CSS3几乎没怎么接触，大致搜了下box-shadow，也不知道问题处在哪 😡 ….
才发现订阅是feedsky的，都没更新。。。
@fblue feedsky经常是几个小时的延迟。。
而feedburner只要几分钟，不过国内阅读器可能访问不到feedburner 😡
学习了
现在很少做大的折腾了..下次折腾应该就是为3.0…
你折腾出来的主题都是不错的
包括那款inove，等你不用了，可以分享给大家使用嘛。
@世纪之光 那个，毕竟是m大的作品嘛。
我以前的改动也不大，就是把widget废掉，侧栏用纯代码实现= =
折腾的不错，看中你那个图片效果
@要饭的 那个挺好实现的，加油。
用了CSS3呀，帅很多了
@万戈 以前也用了好多，不过主要是圆角。
现在加了些阴影和过渡。
你这款主题已经很帅了。
把#searchbox input#q的-webkit-box-shadow去掉试试。
@阿修 那样肯定可以，但不就是等于去掉了webkit 环境下的内阴影效果。
不算解决方法，只能算是放弃= =
@A.shun chrome的先天不足，圆角+内阴影这个问题似乎还没有解决。有个图片：graphicpush.com/images/14.png
只能不用内阴影~~
@阿修 哦。。那我去掉了webkit的内投影，反正效果差不多。
围观效果
用傲游看到的效果跟IE一样~
还是FF下的效果好看~
@Lazyyyyyy O和FF下基本表现一致了。现在的IE下也不会太离谱，不过css3是肯定无法支持的。
字体大小一般取双数吧；除了15px的效果还好外。
你好像折腾了很多呢，我看看要不我也参照折腾一下才行 😛
@Jinwen 感谢jinwen同学指点。
字体好像是说双数的比较好，不过我就看着13px最合适。反正业余嘛，不照规矩了 😀
期待你的折腾，我好去参考，哈 😛
有总结的习惯 不错哦~~~
木有错位啊~~ 以前~~~ 现在广告位招租生意好不好做啊 我也想弄了
@小粥 现在基本上好了，就文章标题和正文的间距大了。
广告招租，不容易啊，还没卖出去- –
就摆着玩吧
终于更新了，这些效果还不错，不过我现在急求一个博文内的FLASH播放器啊 有什么好推荐的没
@7cbt Flash播放器？音频还是视频呢？
音频的话用audio player，有插件方式也有代码的。
我要坚定不移地走非技术道路，因为我注定要靠文字吃饭了~
首先我要告诉你一件事，那就是在7.3号我准备发日记了准备发图片了，就准备用你的方法了，可是，可是我点了googlereader里的你，我的reader就死了，每次都这样，其他都没有问题了，然后接下来的几天我都试过也不行，今天还是不行啊，还是点的我博客里的链接才过来的 💡
@junjun Feedburner被墙了，所以Gr会被重置，这点不止是我的博客，很多订阅都出现。吐槽哇 👿
解决方法就是用https的GR，或者修改订阅地址为 http://feeds2.feedburner.com/ashun
我也提供feedsky的。= =，但是那抓取太慢了
太神奇了，我在你这点订阅到googlereader我原来的那个就可以打开了
@junjun 因为我这用的是https 😳
在 FF3.0 下、、搜索框内的字 明显 偏小、、
@Kars 这个。。。FF3.0也太古老了，很多属性都不支持。木有测试环境。
我觉得现在就很好了，倒是我的越来越简陋了 ➡ ➡ ➡
@derek 简单也好嘛
就是搞不懂jQuery那些……
所以我blog主题想尽办法纯CSS实现各种效果……
就加载了一个禁IE的JS，还有插件lazy load、google自定义搜索的JS而已。
十分简陋。嗯，被人鄙视了。╥﹏╥…
@夏影残雪 jQuery 我也不懂，就知道无比强大。偶尔看朋友们的博客分享jq的东东，就顺手收藏。
我也喜欢纯CSS
你那也折腾的不错了。
就是关于圆角的应用比较吐槽，没有使用标准属性。
比如，这类
都应该在后面加一个标准的 border-radius属性才对。
折腾的好漂亮啊~~~
那个，follow me那里你是故意写错字的？ ❓
@夏影残雪 纳呢！？
哪里错了？
貌似去掉#q的-webkit-box-shadow:inset 1px 1px 1px #ddd;
效果还比现在的好。（Chrome下）
@fatkun 恩，向上面的同学了解到chrome我无法支持圆角+内阴影了。已经去掉。
向你学折腾 😀
文章中提到的有些资源很不错
我借鉴下
折腾一回~
你好！非常喜欢这款。希望你能将这款主题发给我。谢谢。
搜索框的圆角和博客的风格不是很搭 ❗
博客的样式有棱有角的 😀
输入框右边的框框是什么？（一直没敢问 😯 ）
@Hailo 很久不见了。 🙂
其实很多地方都用了圆角的
侧栏标题、输入框、回复按钮等
输入框右边的框框是传说中的点点更健康。
@A.shun 我把ABP关掉一看，果然是他。。。
OP到10.7啦？
@Hailo 是啊，因为如果广告放在文章中影响阅读。放在这里朋友们评论的时候可能会帮点。（当然，非IE一般是过滤的） 🙂
10.7还在Alpha。
@A.shun 为啥回复框钉在了主楼上，而且评论也在旧评论的上面，不过刷新一下就好了。
@Hailo 这个是使用“无限嵌套”的bug。
不过已经有朋友折腾出解决方法了。
过几天来弄好 🙂
@A.shun 唉，可怜我的typecho的主题还折腾不出来嵌套功能。 🙁
@Hailo wp无所不能嘛。
不过 typecho 胜在精巧。
心动的话就搭建一个wp哈 😀
@A.shun 当年也搞过wp，太复杂，被我删了。
请问，利用@回复，而且楼层一直保持在两层，怎么搞定的？
@Hailo 这个是jinwen 最先弄的，我这的评论模板用 willin kan 的 ajax 和 zww 弄的嵌套。
我也是新手。
相关信息可以在他们的博客上看到 😆
@A.shun 呵呵，你太谦虚了，我去看看了。
博客整体色彩很搭的 赞个
折腾无止境哈哈 😀
观望+1 现在不急于更新到3.0
我一不小心更新了wp
越折腾越完美哦
@小小 = =，3.0太复杂了，我还是不轻举妄动
偶只希望暑假能抽得出空来换一个主题啊 😥
@lovee 印象中你一直是inove
@A.shun 嗯，所以差不多可以换一个资源占用再少一点的主题了 😆
额，IE6俺也搞不定，直接忽略它
😀 我的chrome下搜索框没有问题，可能是shadow只加在输入方框上了
@TaoGOGO chrome的圆角+内阴影看来是不行了。
哎呀呀 真是心细呀 这么折腾代码，期待你做出一款主题啊哈哈哈 😳
@睡到自然醒blog 哈，我很业余的。能这么折腾也多亏了 om 的技术支持。
单独做个主题太难了。
奇怪为什么我回复的是 3.0 特效不错 不过推特国内上不去，加了用处不大
@7cbt 作为blogger 。。tw还是比较重要的交流工具
贵站颜色搭配的真是不错呢,佩服啊 😀
字体一定要设置好固定大小，因为每个浏览器里显示的大小是不同的
很能折腾啊！
图片党飘过 ❗ 一致性我是用图片完成的，加载比较慢。心老了，怕折腾= =。
另外3.0还没有喜欢的主题，默认主题在opera里显示有点错位。
@假鱼 wp3.0还没玩过。
我主要是在乎速度，主题本身就不快，只能在这上面动手
更新到了WordPress 3.0，折腾万岁哈哈~ 🙄
玩心不改，继续折腾。我的主题就不打算作什么改动了。
越来越多人用这款主题了
一段时间没来，你得主题现在好酷啊。。。
chrome不也有类似firebug的功能，查看一下到底是那个css造成的。应该可以吧。
@daliu 已经确认是 chrome 当时还不支持这个。现在就不清楚了。