Go to comments ↓ Home » Blog

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 Blog » 《WordPress折腾手记 6》
» 本文链接地址:http://shun.im/21372

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. 坐沙发上看保守派窝瓜的折腾记。 😀

    被你诱惑的我的折腾之心又蠢蠢欲动了。>< 用Mini Pagenavi是不是又可以少用一个插件了? ➡

    Opera 10.60 Opera 10.60 Windows 7 Windows 7
    #1
    @
  2. Most Active Friends Of The 30days
    这个是什么插件啊?

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #2
    @
  3. 沙发没得真快

    Opera 10.10 Opera 10.10 Windows XP Windows XP
    #3
    @
  4. 很好 支持折腾~!

    Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 Windows 7
    #4
    @
  5. ➡ 沙发 板凳 都没了。。。

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #5
    @
  6. 页面导航条不错

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #6
    @
  7. 又在折腾了 :roll:
    总能在这儿学点什么,不少已经用上了,不过css有困难,不会 😡

    Firefox 3.6.6 Firefox 3.6.6 Ubuntu 10.04 Ubuntu 10.04
    #7
    @
  8. 我的主题用的也蛮久的了,快3年了。

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #8
    @
  9. :roll: :roll: 以后可以应用于工作中 😀

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #9
    @
  10. 我经常看到 mg12 喊 去他妈IE。。。。 ❗

    Google Chrome 6.0.453.1 Google Chrome 6.0.453.1 Windows 7 Windows 7
    #10
    @
  11. 不知道为什么我留言时需要审核,还有提交评论后,提示审核的部分文字被头像遮盖。

    Opera Mini 4.2.14912 Opera Mini 4.2.14912 J2ME/MIDP Device J2ME/MIDP Device
    #11
    @
    • @zrqx008 那个审核真的很奇怪。。应该不会出现才是。

      提示审核的样式的确有问题,下次折腾。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  12. CSS3几乎没怎么接触,大致搜了下box-shadow,也不知道问题处在哪 😡 ….
    才发现订阅是feedsky的,都没更新。。。

    ChromePlus 1.4.0.0 ChromePlus 1.4.0.0 Windows 7 Windows 7
    #12
    @
    • @fblue feedsky经常是几个小时的延迟。。

      而feedburner只要几分钟,不过国内阅读器可能访问不到feedburner 😡

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  13. 学习了

    Google Chrome 4.1.249.1045 Google Chrome 4.1.249.1045 Windows XP Windows XP
    #13
    @
  14. ③秋之流☆

    现在很少做大的折腾了..下次折腾应该就是为3.0…

    Internet Explorer 7.0 Internet Explorer 7.0 Windows XP Windows XP
    #14
    @
  15. 你折腾出来的主题都是不错的
    包括那款inove,等你不用了,可以分享给大家使用嘛。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #15
    @
    • @世纪之光 那个,毕竟是m大的作品嘛。
      我以前的改动也不大,就是把widget废掉,侧栏用纯代码实现= =

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  16. 折腾的不错,看中你那个图片效果

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #16
    @
  17. 用了CSS3呀,帅很多了

    Firefox 3.6.7 Firefox 3.6.7 Windows XP Windows XP
    #17
    @
    • @万戈 以前也用了好多,不过主要是圆角。
      现在加了些阴影和过渡。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  18. 你这款主题已经很帅了。

    Google Chrome 6.0.447.0 Google Chrome 6.0.447.0 Windows XP Windows XP
    #18
    @
  19. 把#searchbox input#q的-webkit-box-shadow去掉试试。

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows 7 Windows 7
    #19
    @
    • @阿修 那样肯定可以,但不就是等于去掉了webkit 环境下的内阴影效果。
      不算解决方法,只能算是放弃= =

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun chrome的先天不足,圆角+内阴影这个问题似乎还没有解决。有个图片:graphicpush.com/images/14.png
      只能不用内阴影~~

      Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows 7 Windows 7
    • @阿修 哦。。那我去掉了webkit的内投影,反正效果差不多。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  20. 围观效果

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #20
    @
  21. Lazyyyyyy

    用傲游看到的效果跟IE一样~
    还是FF下的效果好看~

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #21
    @
    • @Lazyyyyyy O和FF下基本表现一致了。现在的IE下也不会太离谱,不过css3是肯定无法支持的。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  22. 字体大小一般取双数吧;除了15px的效果还好外。
    你好像折腾了很多呢,我看看要不我也参照折腾一下才行 😛

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #22
    @
    • @Jinwen 感谢jinwen同学指点。
      字体好像是说双数的比较好,不过我就看着13px最合适。反正业余嘛,不照规矩了 😀

      期待你的折腾,我好去参考,哈 😛

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  23. 有总结的习惯 不错哦~~~

    Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 Windows 7
    #23
    @
  24. 木有错位啊~~ 以前~~~ 现在广告位招租生意好不好做啊 我也想弄了

    360Safe Explorer 360Safe Explorer Windows XP Windows XP
    #24
    @
    • @小粥 现在基本上好了,就文章标题和正文的间距大了。

      广告招租,不容易啊,还没卖出去- –
      就摆着玩吧

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  25. 终于更新了,这些效果还不错,不过我现在急求一个博文内的FLASH播放器啊 有什么好推荐的没

    TheWorld Browser TheWorld Browser Windows 7 x64 Edition Windows 7 x64 Edition
    #25
    @
    • @7cbt Flash播放器?音频还是视频呢?
      音频的话用audio player,有插件方式也有代码的。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  26. 我要坚定不移地走非技术道路,因为我注定要靠文字吃饭了~

    Maxthon 2.0 Maxthon 2.0 Windows 7 Windows 7
    #26
    @
  27. 首先我要告诉你一件事,那就是在7.3号我准备发日记了准备发图片了,就准备用你的方法了,可是,可是我点了googlereader里的你,我的reader就死了,每次都这样,其他都没有问题了,然后接下来的几天我都试过也不行,今天还是不行啊,还是点的我博客里的链接才过来的 💡

    Google Chrome 5.0.360.4 Google Chrome 5.0.360.4 Windows 7 Windows 7
    #27
    @
    • @junjun Feedburner被墙了,所以Gr会被重置,这点不止是我的博客,很多订阅都出现。吐槽哇 👿

      解决方法就是用https的GR,或者修改订阅地址为 http://feeds2.feedburner.com/ashun
      我也提供feedsky的。= =,但是那抓取太慢了

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  28. 太神奇了,我在你这点订阅到googlereader我原来的那个就可以打开了

    Google Chrome 5.0.360.4 Google Chrome 5.0.360.4 Windows 7 Windows 7
    #28
    @
  29. 在 FF3.0 下、、搜索框内的字 明显 偏小、、

    Flock 2.6.0 Flock 2.6.0 Windows XP Windows XP
    #29
    @
    • @Kars 这个。。。FF3.0也太古老了,很多属性都不支持。木有测试环境。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  30. 我觉得现在就很好了,倒是我的越来越简陋了 ➡ ➡ ➡

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #30
    @
  31. 就是搞不懂jQuery那些……
    所以我blog主题想尽办法纯CSS实现各种效果……
    就加载了一个禁IE的JS,还有插件lazy load、google自定义搜索的JS而已。

    十分简陋。嗯,被人鄙视了。╥﹏╥…

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows 7 Windows 7
    #31
    @
    • @夏影残雪 jQuery 我也不懂,就知道无比强大。偶尔看朋友们的博客分享jq的东东,就顺手收藏。

      我也喜欢纯CSS

      你那也折腾的不错了。
      就是关于圆角的应用比较吐槽,没有使用标准属性。

      比如,这类

      -moz-border-radius:10px;
      -webkit-border-radius:10px;

      都应该在后面加一个标准的 border-radius属性才对。

      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      Opera 10.70 Opera 10.70 Windows XP Windows XP
  32. 折腾的好漂亮啊~~~

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #32
    @
  33. 那个,follow me那里你是故意写错字的? ❓

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows 7 Windows 7
    #33
    @
  34. 貌似去掉#q的-webkit-box-shadow:inset 1px 1px 1px #ddd;
    效果还比现在的好。(Chrome下)

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows 7 Windows 7
    #34
    @
    • @fatkun 恩,向上面的同学了解到chrome我无法支持圆角+内阴影了。已经去掉。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  35. 向你学折腾 😀

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #35
    @
  36. 文章中提到的有些资源很不错
    我借鉴下
    折腾一回~

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #36
    @
  37. 你好!非常喜欢这款。希望你能将这款主题发给我。谢谢。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #37
    @
  38. 搜索框的圆角和博客的风格不是很搭 ❗
    博客的样式有棱有角的 😀
    输入框右边的框框是什么?(一直没敢问 😯 )

    Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
    #38
    @
    • @Hailo 很久不见了。 :smile:
      其实很多地方都用了圆角的
      侧栏标题、输入框、回复按钮等

      输入框右边的框框是传说中的点点更健康。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 我把ABP关掉一看,果然是他。。。
      OP到10.7啦?

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
    • @Hailo 是啊,因为如果广告放在文章中影响阅读。放在这里朋友们评论的时候可能会帮点。(当然,非IE一般是过滤的) :smile:

      10.7还在Alpha。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 为啥回复框钉在了主楼上,而且评论也在旧评论的上面,不过刷新一下就好了。

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
    • @Hailo 这个是使用“无限嵌套”的bug。
      不过已经有朋友折腾出解决方法了。
      过几天来弄好 :smile:

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 唉,可怜我的typecho的主题还折腾不出来嵌套功能。 :sad:

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
    • @Hailo wp无所不能嘛。
      不过 typecho 胜在精巧。

      心动的话就搭建一个wp哈 😀

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 当年也搞过wp,太复杂,被我删了。
      请问,利用@回复,而且楼层一直保持在两层,怎么搞定的?

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
    • @Hailo 这个是jinwen 最先弄的,我这的评论模板用 willin kan 的 ajax 和 zww 弄的嵌套。

      我也是新手。

      相关信息可以在他们的博客上看到 😆

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 呵呵,你太谦虚了,我去看看了。

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
  39. 博客整体色彩很搭的 赞个

    Google Chrome 6.0.440.0 Google Chrome 6.0.440.0 Windows 7 Windows 7
    #39
    @
  40. 折腾无止境哈哈 😀

    Google Chrome 6.0.458.1 Google Chrome 6.0.458.1 Windows 7 Windows 7
    #40
    @
  41. 观望+1 现在不急于更新到3.0

    TheWorld Browser TheWorld Browser Windows 7 x64 Edition Windows 7 x64 Edition
    #41
    @
  42. 我一不小心更新了wp

    越折腾越完美哦

    Firefox 3.5.7 Firefox 3.5.7 Windows XP Windows XP
    #42
    @
  43. 偶只希望暑假能抽得出空来换一个主题啊 😥

    Safari 5.0 Safari 5.0 Mac OS X 10.6.4 Mac OS X 10.6.4
    #43
    @
  44. 额,IE6俺也搞不定,直接忽略它

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows XP Windows XP
    #44
    @
  45. 😀 我的chrome下搜索框没有问题,可能是shadow只加在输入方框上了

    Google Chrome 5.0.366.2 Google Chrome 5.0.366.2 Windows XP Windows XP
    #45
    @
  46. 哎呀呀 真是心细呀 这么折腾代码,期待你做出一款主题啊哈哈哈 😳

    Firefox 3.0.19 Firefox 3.0.19 Windows XP Windows XP
    #46
    @
  47. 奇怪为什么我回复的是 3.0 特效不错 不过推特国内上不去,加了用处不大

    TheWorld Browser TheWorld Browser Windows 7 x64 Edition Windows 7 x64 Edition
    #47
    @
  48. 贵站颜色搭配的真是不错呢,佩服啊 😀

    Google Chrome 4.0.232.0 Google Chrome 4.0.232.0 Windows XP Windows XP
    #48
    @
  49. 字体一定要设置好固定大小,因为每个浏览器里显示的大小是不同的

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #49
    @
  50. 很能折腾啊!

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #50
    @
  51. 图片党飘过 ❗ 一致性我是用图片完成的,加载比较慢。心老了,怕折腾= =。
    另外3.0还没有喜欢的主题,默认主题在opera里显示有点错位。

    Opera 10.60 Opera 10.60 Windows 7 Windows 7
    #51
    @
    • @假鱼 wp3.0还没玩过。
      我主要是在乎速度,主题本身就不快,只能在这上面动手

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  52. 更新到了WordPress 3.0,折腾万岁哈哈~ :roll:

    Google Chrome 6.0.466.0 Google Chrome 6.0.466.0 Windows XP Windows XP
    #52
    @
  53. Netforce

    玩心不改,继续折腾。我的主题就不打算作什么改动了。

    Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 x64 Edition Windows 7 x64 Edition
    #53
    @
  54. 越来越多人用这款主题了

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #54
    @
  55. 一段时间没来,你得主题现在好酷啊。。。

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7
    #55
    @
  56. chrome不也有类似firebug的功能,查看一下到底是那个css造成的。应该可以吧。

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #56
    @
Leave a Reply to A.shun

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

点击这里取消回复。