WordPress折腾手记 6

Wordpress这篇距离上次优化 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下，搜索框不再完全变形了- -，凑合吧。

IE6样式

Chrome 环境下，搜索提交按钮的图标终于能显示了。但 box-shadow 的样式很奇怪。
请对 CSS 比较了解的朋友们指教下。

box-shadow问题

导致出现问题的该部分代码为：

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
});

详见：Page Scroll 的幾種方法。

主题的功能改进

为博客图片添加 Shadowbox 效果，加强看图体验。

启用 Lazy Load jQuery 插件，延迟加载图片，让网页元素加载顺序更加合理。

更新 Gravatar 头像緩存 和 Recent Comments 代码，执行效率更高，加上缓存插件，现在的查询时间几乎都在 0.5s 以下。感谢低调的高手 Willin Kan 和 zww 。

将分页代码替换为 Mini Pagenavi，代同样出自 Willin Kan，比起我以前从 wp-pagenavi 直接挖出来的精简很多。感谢 om 为 Mini Pagenavi 添加“上一页”、“下一页”链接。

Mini Pagenavi

仿照 Rss 订阅按钮，为 Follow me 添加了一个菜单，效果见导航栏右侧，方法见：jQuery 的 slideUp 和 slideDown 动画。

主题的其他修改

为链接添加 transition （CSS 渐变效果），由于我的颜色搭配，这并不明显。方法详见：利用CSS添加渐变（Transition）效果。

为获取焦点后的文本框添加 box-shadow 效果。

box-shadow效果

使用 IE 条件注释，为 IE 浏览器访客添加提示，效果见图2。

侧栏模块顺序调整，分类和日志下拉框样式调整。

其他一些细节调整。

» 转载请以超链接形式注明来源：A.shun's Blog » 《WordPress折腾手记 6》
» 本文链接地址：http://www.a-shun.com/archives/21372.html

» 本文采用 BY-NC-SA 协议进行授权。
» 建议订阅本站( Google Reader | Feedburner | Feedsky )及时获取更新。