Go to comments ↓ 2010年07月21日 - Home » Blog

博客主题评论部分修改

Wordpress又开始折腾 WordPress 了～

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

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

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

评论样式优化

新的样式如图:

Wordpress 主题评论模板

所做的主要修改：

  1. 添加了大量的 box-shadow 和 text-shadow 阴影效果，并去掉了一些边框。现在自我感觉良好。
    这些属性不支持 IE 浏览器。
  2. 调整布局：一些位置调整，并把回复按钮和 UA 信息弄到了评论内容的下方，避免评论者名字过长造成的重叠。
  3. 给评论者 UA 信息的图片添加 opacity 属性，看起来淡一些，毕竟是点缀作用别太吸引注意嘛。鼠标放上去才恢复不透明。
    当然，这个也不支持 IE 。

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

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

Wordpress 评论无限嵌套

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

为 WordPress 主评论加上楼层号

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

Wordpress 评论楼层号

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

添加评论引用功能

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

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

在评论框添加简单计数器

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

博客评论计数器

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

P.S.

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

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

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

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Google Reader | Feedburner | Feedsky )方式及时获取更新。
  1. eleven eleven 2010/07/23 13:57

    输入框的阴影挺漂亮的 像Safari的风格

    Google Chrome 3.0.184.0 Google Chrome 3.0.184.0 Windows 7 Windows 7
    #41
    @
  2. 毕业生 毕业生 2010/07/23 14:38

    :eek: 收藏了~！

    Opera 10.60 Opera 10.60 Windows XP Windows XP
    #42
    @
  3. Lazyyyyyy Lazyyyyyy 2010/07/23 17:13

    这些小改善都很好吖~
    琢磨着怎么用到自己的blog上~哈哈~

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #43
    @
  4. mealdy mealdy 2010/07/23 18:33

    你博客主题最喜欢的还是其色调，还有h2标签的样式 :grin:

    Firefox 3.6.7 Firefox 3.6.7 Windows 7 Windows 7
    #44
    @
  5. LAONB LAONB 2010/07/23 20:12

    我特意加宽了评论布局，打算来个N层嵌套，可是用系统默认主题的评论模板，没找到修改哪里。 :!:

    Firefox 3.6.7 Firefox 3.6.7 Windows 7 Windows 7
    #45
    @
  6. 麦子 麦子 2010/07/24 10:57

    修改的非常美观，嘿嘿，我那个修改的太难看了

    Google Chrome 6.0.472.0 Google Chrome 6.0.472.0 Windows 7 Windows 7
    #46
    @
  7. huangjun huangjun 2010/07/24 11:03

    我刚才留言怎么跑到404页面了？！

    Maxthon Maxthon Windows XP Windows XP
    #47
    @
  8. SErHo SErHo 2010/07/24 11:38

    哇，这个评论列表样式太好看了，非技术狂表示难以做到。

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows XP Windows XP
    #48
    @
  9. 元胜 元胜 2010/07/24 16:42

    :smile: 支持一下

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #49
    @
  10. 元胜 元胜 2010/07/24 16:45

    [ 小牆判斷這是Spam! ] :!:

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #50
    @
  11. 世纪之光 世纪之光 2010/07/24 20:36

    这些功能都挺实用的，你这款主题真是越来越精致了。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #51
    @
  12. zwwooooo zwwooooo 2010/07/25 21:30

    华丽的下半身 :grin:

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP
    #52
    @
  13. 小小 小小 2010/07/26 10:56

    很炫的评论模式啊

    Firefox 3.5.7 Firefox 3.5.7 Windows XP Windows XP
    #53
    @
  14. yywr yywr 2010/07/26 11:58

    哈哈，看来我得好好处理下下半身的问题了 :roll:

    Opera 10.60 Opera 10.60 Windows 7 Windows 7
    #54
    @
  15. junjun junjun 2010/07/26 12:00

    问一个问题啊，我照你的方法加载了lazyload后，在google浏览器会报错，firefox在内页的时候没有效果呢

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows XP Windows XP
    #55
    @
  16. junjun junjun 2010/07/26 12:11

    好了我知道为什么报错了，仔细一看你的代码少写了一个”>”,不过我的内页还是没有效果

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows XP Windows XP
    #56
    @
    • A.shun A.shun 2010/07/26 22:41

      @junjun 少了个”>”，是我粗心了，惭愧啊 :!:

      文章页无效是因为路径问题，你定义的是
      src="jquery.lazyload.js"
      这样首页的路径就正确，但文章页则变成
      日志url/jquery.lazyload.js

      你把
      src="jquery.lazyload.js"
      改成
      src="http://www.wjunjun.com/jquery.lazyload.js"
      即可

      Opera 10.70 Opera 10.70 Windows XP Windows XP
      Reply
  17. junjun junjun 2010/07/26 12:13

    你这个评论的弄得有点漂亮啊， :eek:

    Google Chrome 5.0.375.99 Google Chrome 5.0.375.99 Windows XP Windows XP
    #57
    @
  18. merror merror 2010/07/28 12:22

    嗯，挺好看的。
    我就添加一个插件 就懒得动了呵呵。

    Google Chrome 6.0.472.0 Google Chrome 6.0.472.0 Windows XP Windows XP
    #58
    @
  19. Bee君 Bee君 2010/07/28 17:05

    哇！效果太美了~~wow~ ⊙o⊙我还上镜头了~ :cool: :cool: :cool:

    其实更期待修改的方法~代码什么的~Ohohoho…..

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP
    #59
    @
    • A.shun A.shun 2010/07/29 15:18

      @Bee君 每一段都给出了相应方法的链接 :lol:
      样式的话就是圆角+阴影（box-shadow）嘛

      Opera 10.61 Opera 10.61 Windows XP Windows XP
      Reply
  20. Code之行人 Code之行人 2010/07/29 12:23

    很不错啊，我喜欢这些笑脸 :grin:

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista
    #60
    @
  21. sky sky 2010/07/29 18:58

    哈哈,不错的

    Google Chrome 4.0.232.0 Google Chrome 4.0.232.0 Windows XP Windows XP
    #61
    @
  22. 门新闻 门新闻 2010/08/02 23:57

    会技术就是好呀，我一直想改我这个模板的评论，但是不会改，无奈

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7
    #62
    @
  23. 琉雅 琉雅 2010/08/03 14:16

    哇，这个评论样式很酷。。

    Google Chrome 5.0.375.125 Google Chrome 5.0.375.125 Windows XP Windows XP
    #63
    @
  24. 西门 西门 2010/08/03 22:32

    我就说一句，居然能在文章中间放Google广告，佩服得五体投地！

    Google Chrome 5.0.375.125 Google Chrome 5.0.375.125 Windows 7 Windows 7
    #64
    @
    • A.shun A.shun 2010/08/04 00:11

      @西门 呵呵，那个设定了cookies 判断，也就是说不会针对熟悉的朋友显示广告了 :smile:
      再说了，非IE同屏蔽ads的多吧～

      希望不会造成不好的体验

      Opera 10.61 Opera 10.61 Windows XP Windows XP
      Reply
  25. 集趣 集趣 2010/08/05 11:39

    我觉得去除那些浏览器，操作系统，可能会好些吧

    Google Chrome 5.0.360.4 Google Chrome 5.0.360.4 Windows XP Windows XP
    #65
    @
    • cho cho 2010/08/23 22:32

      @集趣
      +1
      我也这么觉得。用处不是很大，去掉可以省下一个插件呢！
      另外，quote的按钮似乎没有作用。

      Google Chrome 5.0.375.127 Google Chrome 5.0.375.127 Windows XP Windows XP
      Reply
  26. shaun shaun 2010/08/08 13:53

    恩 我用了QIQIBOY那个方法添加了QUOTE 结果在点击QUOTE 再发表评论后会有一小句错误返回，是不是你说的那个和回复的冲突呢？ 提示错误是Warning: array_merge()…一长串，请问该怎么改啊 呵呵。。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #66
    @
    • A.shun A.shun 2010/08/08 17:35

      @shaun 我的并不是这种情况，只是引用文本被覆盖了。

      这个问题你可以直接请教QIQIBOY :smile:

      Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
      Reply
  27. 江流 江流 2010/08/10 11:19

    广告位也+了不少

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #67
    @
  28. yesureadmin yesureadmin 2010/08/30 18:13

    不错，折腾的不错，都把广告放到回复框这里让人点啊

    Google Chrome 5.0.375.127 Google Chrome 5.0.375.127 Windows 7 Windows 7
    #68
    @
  29. 老曦 老曦 2010/09/08 03:50

    悲剧的我N次修改失败。。。。。我已经对我的主题的评论修改放弃了，等换新主题再修改。。。

    Google Chrome 7.0.503.0 Google Chrome 7.0.503.0 Windows XP Windows XP
    #69
    @
  30. creolophis creolophis 2010/11/29 12:07

    测试下字体效果
    测试下字体效果

    测试下字体效果

    Opera 10.63 Opera 10.63 Windows XP Windows XP
    #70
    @
Leave a Reply

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