本来在上次折腾之后，打算等上 3.0 之后再弄的。不过这段时期朋友们共享了一些不错的技巧，我也心动了。

这回拿主题评论模板开刀，优化了样式，解决了存在已久的嵌套问题，并添加了一些小功能。
评论功能是 Blogger 之间、以及访问者互动的重要手段，是必须重视的。

和往常一样，做个总结手记，也分析那些让大家受益的技巧。

评论样式优化

新的样式如图:

所做的主要修改：

添加了大量的 box-shadow 和 text-shadow 阴影效果，并去掉了一些边框。现在自我感觉良好。
这些属性不支持 IE 浏览器。

调整布局：一些位置调整，并把回复按钮和 UA 信息弄到了评论内容的下方，避免评论者名字过长造成的重叠。

给评论者 UA 信息的图片添加 opacity 属性，看起来淡一些，毕竟是点缀作用别太吸引注意嘛。鼠标放上去才恢复不透明。
当然，这个也不支持 IE 。

实现完美的 WordPress 无限嵌套回复

我比较喜欢嵌套方式的评论模板，这样回复评论更有对话的感觉。
之前的无限嵌套有一个问题：回复非主评论时，评论框错位了（跑到了主评论下面），回复并刷新后正常。
虽然基本不影响使用，不过追求完美是好事。
QiQiBoY 已经把方法折腾出来了，高手哇。效果：

解决方法见：完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>

为 WordPress 主评论加上楼层号

有个楼层号看起来像模像样，只给主评论加上也不会显得杂乱，还支持评论分页。

来自 OM：只在WP主评论加上楼层号的方法（支持评论分页）

添加评论引用功能

使用评论嵌套方式的话引用就少了，不过在说明某些问题的时候还是需要的。
在评论模板加上引用按钮，免去了不少麻烦。

同样来自 QiQiBoY 的：添加引用按钮——轻松打造属于你的WordPress引用回复功能
文章的步骤写得很详细了，不过由于那段 JavaScript 和主题的回复功能有些冲突，拜托了 om 才改好的 。

在评论框添加简单计数器

折腾一回肯定要把好东西都搜刮来。
这个评论文字计数器虽然没啥用，只是考虑到一小段 js 即可实现，无需改动主题其他部分，就用上了。可以增加点动感。

等看腻了就去掉吧。
方法见：评论框的简单计数器

P.S.

感谢上面提到的两位同学一位同学和一位老同学。

现在的评论风格看起来有点华丽了，和其他部分不怎么协调，留着下次折腾吧。
这个 zsofa-ova 越来越不朴素了，罪过吖。

» 转载请以超链接形式注明来源：A.shun's Blog » 《博客主题评论部分修改》
» 本文链接地址：http://www.a-shun.com/archives/21375.html

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

但和以往不同，这回都是偶尔添加一些东西（绝大多数来自朋友们的博客），现在只是汇总一下。也把一些资源、教材的链接和朋友们分享。

这次弄好，先休息下。 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
});

详见：Page Scroll 的幾種方法。

主题的功能改进

为博客图片添加 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's Blog » 《WordPress折腾手记 6》
» 本文链接地址：http://www.a-shun.com/archives/21372.html

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

现在继续来总结一下这次的折腾，顺便分享一些相关的教程。
其实这个应该叫做wp折腾手记 5的，不过偶尔换下名字也不错。

昨天就弄好了，这回顺便尝试下WordPress定时发布文章。

WordPress文章定时发布功能

这是wp自带的功能，无需任何插件。
如下图所示，编辑好日志之后在“发布”那里点击编辑，把发布时间设定为当前时间之后，发布的按钮就会自动变成定时，点击即可。

主题header部分

最开始，zsofa-ova的搜索框设计在了header的中间，比较方便和醒目。
不过有的访客朋友看法不同：“搜索框放中间了感觉怪怪的”、“搜索框放的位置有些不太美观”。。。

之前因为右侧有twitter输出和订阅按钮，把这些放中间也不合适。现在重新调整了布局。
去掉了feedsky的按钮，和feedburner.com放在了导航栏，twitter按钮的旁边。搜索框回到了靠右地方，嗯，感觉良好。

当然，也顺手减少了header的高度。这样可以在不滚动页面的时候显示更多内容。

评论部分

把comments-ajax更新到v1.29，点击主评论回复按钮有了平滑滚动效果。
具体看这篇：《WordPress 內置嵌套評論專用 Ajax comments》，Willin Kan真是低调的大师。

评论样式也重新设计，评论者名字、发表时间、和ua信息弄成一排了。这个其实个人不是特别满意，只是换换布局。
看上去很紧凑，这也可以在一定程度上缩短了页面高度。

主评论隔行使用不同的背景色，比较一目了然。简单的两行代码即可实现，这是特地请教om的。

ol.commentlist li.thread-even{background:#F2F2F2;}
ol.commentlist li.thread-odd{background:#eee;}

其他细节

侧栏加入了文章分类、月份存档下拉选择框。比较实用，不占地方。
相关的代码可以看这篇：《WordPress 月度存档、文章分类下拉框代码》。

由于分类下拉框取代了分类列表，所以把友情链接也改成双排的，各种徽标弄到下面去。

content的背景色和整个页面的色调统一起来。

去掉了日志信息、评论数和转到评论区等之前的小图标，页面更加简洁，也调整了其他背景图标的间距。

其他若干细节：简化日志底部的收藏和订阅链接、更多的运用了css3圆角。。。

已知问题

评论者名子过长的话（比如Lazyyyyyyyyyyyyyy），时间和ua信息就要挤到一起了。

两层以上的嵌套问题非常大。。暂时改回两层，不过以前就弄得很乱，无所谓了。

IE6的显示继续杯具，特别是文字大小。

Chrome环境下的搜索按钮不显示。

Opera下底部的top按钮的问题不打算修复了，反正有手势。

累了，以后再折腾吧。

» 转载请以超链接形式注明来源：A.shun's Blog » 《WP 文章定时发布 & 继续优化当前主题》
» 本文链接地址：http://www.a-shun.com/archives/21356.html

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

趁这几天比较有空，对其进行一些细节的修改。

这次算是小折腾，以后要继续完善才行。

继续发扬折腾永无止境的精神。。。

样式调整

添加了Rss订阅下滑菜单，提供几个常见阅读器的一键订阅。
渐变下拉菜单的实现方法见old man的这篇文章，需要jQuery支持，图片是从以前inove弄出来的。

去掉了twitter的输出。之前那链接格式不规范，再说我推得也不多。换成一小个按钮了。并加上去了“随便看看”和“wap”两个按钮。

稍微调整了导航栏，调整侧栏标题样式，特别是那个tab

替换了部分小图标，修改了前后文章的链接样式，以及其他若干细节

原来的-moz-border-radius和-webkit-border-radius替换为更加标准的border-radius，能通过Css3验证。

添加了博客的wap版本

个人觉得wap版本是有存在意义的。

还是用少量朋友使用手机访问的。而且碰到我自己网速杯具的时候还可以凑合下。

A.shun使用的是WP-T-WAP。
国人原创插件，设置方便。除了正常的浏览，还支持评论，文章、评论编辑，还有相关日志等。。功能很强大的说。

大家可以点导航栏靠右侧的按钮浏览。或者直接访问wap.a-shun.com

下载地址：http://wordpress.org/extend/plugins/wp-t-wap/

主题存在的问题

缓存插件的存在导致了“随便逛逛”在缓存过期之前（5分钟）会跳转到同一篇日志。

FF3.5.x和IE，搜索框依然有些许错位。但在3.6和3.7中表现完好，看来新版更为规范，也就不折腾了。

Opera环境下底部的top按钮依然有问题，不过非IE用户基本上不需要那个功能，暂且搁置。

换回border-radius后，FF和Safari下无法显示圆角，杯具的标准。更杯具的是FF3.7a也是一样，唉，还是把-moz-border-radius暂时加回去。

IE6环境下比以前更乱了。。。不管

看来折腾之路任重道远～

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

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

now，新的Wordpress主题zsofa-ova总算搞定了，欢迎围观～

希望同学们喜欢A.shun's Blog新的面貌。

如你所见，这就是新的样式了，还算简洁。布局上和之前基本上差不多，主要是色调改变、还有评论功能增强了。

在各浏览器下表现基本一致（ie6除外），有发现问题的同学麻烦提醒下。

zsofa

新的主题是在zsofa的基础上折腾出来的，主题它爸是zww。
本身就非常简洁那种，除了那些小图标之外，不使用背景图片，几乎是纯css打造。
体积很小巧，除404.php 外只用一个index.php文件，当然是靠判断来加载不同页面效果。还有n层评论嵌套设计。

拥有这么多优点，old man又热心。so，隆重推荐给大家：
官方下载页：http://wordpress.org/extend/themes/zsofa

折腾的力量

当然，这个主题虽好，但总是要追求个性嘛。
经过我一番折腾着：
修改了背景、链接的颜色，修改了侧栏布局，重新设计了header，新的页面导航栏（借鉴了mg12私人主题的样式），调整了首页文章信息位置，加入了大量的hover样式和css3圆角...

文章部分和相关日志基本上沿用之前主题的样式。不影响排版。

总之，面目全非了。说得好听点就是个性了。
不会做主题但又想要独一无二的朋友不妨也折腾折腾吧。

问题

稍微测试了下，主题在Opera10.5和chrome5.0、FF3.6下表现基本一致。
op10.1和IE8也正常，但是不支持css3圆角。

当然了，由于我的折腾也带来了不少问题。比如：
FF环境下的搜索框错位。
chrome环境侧栏Categories下的图标行距过大。
IE6环境下字体过大。
还有Opera环境下，底部的top按钮不正常。

这些影响不大，往后再慢慢解决。

» 转载请以超链接形式注明来源：A.shun's Blog » 《启用新主题zsofa-ova，欢迎围观》
» 本文链接地址：http://www.a-shun.com/archives/21340.html

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

我还想继续叨念今年过年实在太冷了。受到天气影响周围也冷冷清清的，往年在我们家门口不远处聚赌的还挺热闹，现在则不然。当然，我是不参加的，只是天气冷就没有出门的欲望。不过到相互拜年，还有小规模的同学聚会还是有的。

最近都没打理博客，现在是该好好整理一下了。

第一步就是更换主题。

对于Blogger来说，更换主题基本上是家常便饭了。

不过对于我却是大事情，这么说吧，从搭建这个wp以来，我都一直用着inove。10个多月算感情深厚了，嘿嘿 。

截图留念：

更换原因倒也不是看腻了。只是新年新气象嘛。刚好过年之前没时间折腾，现在继续。

新主题暂时不说，下回就知道。当然，不是我写的。总之会更加简洁。

目前还在折腾中，今天被搞得焦头烂额。果然需要好好学习   。不过不久就会搞定。这么一换，要是没有意外也会用很久。

另外还有其他若干调整。比如：升级到wp2.92，调整分类，去掉几个插件和比较影响速度的cnzz统计等。

» 转载请以超链接形式注明来源：A.shun's Blog » 《新年新气象：归来&准备更换主题》
» 本文链接地址：http://www.a-shun.com/archives/21339.html

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com

直到前两天，决定对现在的主题和插件来一次大修整。

经历了重重困难（对这些方面接触较少- -），昨天终于基本完工。
这个文章本应该昨天发的，无奈流量几乎耗尽，这几天都盼着11月份的到来。

主题调整

外观从整体上看来区别不大。都是细节调整。

把inove升级到了1.4.6。mg12考虑得很周到，很多东西其实都写好了。但是，其他的对我来说修改起来很困难。所以只能硬着头皮，慢慢研究了。

这主题用的人很多，多到满街都是来形容也不为过。而且原生嵌套的问题，我依然没有解决。不过都不会成为我抛弃inove的理由。

文字大小方面，之前用14px虽然方便老年人，不过也造成了比例不协调。特别是在侧栏导致了大量不必要的换行。。侧栏改到13px使布局更加合理。
到全部弄好之后还是觉得正文也13px，让整体协调下，还可以稍微减少显示面积。。眼睛不好的同学们讲究吧，也可以在浏览器里面限制最小字体。

修改评论样式

WordPress Thread Comment是个优秀的插件，但是有些小问题。虽然说插件越少越好，但我还没折腾出inove的原生嵌套，只得继续依赖它了。

不过原来的评论样式不太好看，好在这个插件提供了自定义css的功能。一番折腾后头像不再独占一行，，减少屏幕空间占用，颜色搭配上更加协调，这有Vicia的功劳。
之前的：

现在的:

5层嵌套需要的空间远远小于之前的4层，so，决定开到6层。

侧栏调整

侧栏布局并没有太大变化，但现在这次侧栏并不依赖任何插件，也不使用widget。全部功能都写在php里面了。

其实实现起来也很简单，mg12把很多东西都写好了，用widget能实现的都有了，我只是调整了东南西北几个侧栏的东西，然后去掉了一些判断语句。

停用了Top Commentators Widget插件，用代码实现“本月评论最多的朋友 ”，改为显示头像，并移到了侧栏最上方。实现方法可以参考《用代码武装你的wordpress》

性能优化

大量减少插件数量，现在是15个，虽然还是不少，但比起之前的22个那好多了。接下来会进一步精简。改天来晒下插件吧。

主题里面大张的图片都压缩了，特别是那种banner，看起来稍微丑了点，不过还在可以接受的范围之内。

把主题里面的一些判断语句去掉，一些函数替换为固定的文本和链接。开了插件后查询数在5～7，比以前好多了。

其他

1.给一些特殊的链接加入提示图标效果如图。

这些出现的频率不会太高，而且图标体积很小，对流量不会有太大影响，但是能提高浏览者的体验。当然，ie6无效。道版自木木同学。

2.在文章底部增加了用两排收藏和订阅链接取代之前的社会化书签收藏按钮。道版自老男人成熟男人。

3.加入了Comment Info Detector，显示留言者浏览器和系统信息。个人认为浏览器和系统并没有牵扯到隐私问题，纯属好看，国旗就不显示了。
这是在Showfom小盆友那里看到的。那个自带的op图标太模糊了，修改了一下，嘿。

还有，其他细节若干～～

如果发现什么问题，或者有好的建议，就麻烦反馈一下。

最好，一定要来这么一句:折腾永无止境。。。

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

© A.shun's Blog 2009-2010 | 发表评论 | 阅读评论 | Twitter | 0b509d655a529f3b7820d7fb7e63fb0e
由于 Feedburner 已经被屏蔽，国内阅读器请订阅备用的RSS feed.a-shun.com