Go to comments ↓ 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 越来越不朴素了,罪过吖。 😐

» 转载请以超链接形式注明来源:A.shun Blog » 《博客主题评论部分修改》
» 本文链接地址:https://shun.im/21375

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. 哈哈,不错的

    Google Chrome 4.0.232.0 Google Chrome 4.0.232.0 Windows XP Windows XP
    #1
    @
  2. 会技术就是好呀,我一直想改我这个模板的评论,但是不会改,无奈

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7
    #2
    @
  3. 哇,这个评论样式很酷。。

    Google Chrome 5.0.375.125 Google Chrome 5.0.375.125 Windows XP Windows XP
    #3
    @
  4. 我就说一句,居然能在文章中间放Google广告,佩服得五体投地!

    Google Chrome 5.0.375.125 Google Chrome 5.0.375.125 Windows 7 Windows 7
    #4
    @
    • @西门 呵呵,那个设定了cookies 判断,也就是说不会针对熟悉的朋友显示广告了 🙂
      再说了,非IE同屏蔽ads的多吧~

      希望不会造成不好的体验

      Opera 10.61 Opera 10.61 Windows XP Windows XP
  5. 我觉得去除那些浏览器,操作系统,可能会好些吧

    Google Chrome 5.0.360.4 Google Chrome 5.0.360.4 Windows XP Windows XP
    #5
    @
    • @集趣
      +1
      我也这么觉得。用处不是很大,去掉可以省下一个插件呢!
      另外,quote的按钮似乎没有作用。

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

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #6
    @
    • @shaun 我的并不是这种情况,只是引用文本被覆盖了。

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

      Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
  7. 广告位也+了不少

    Firefox 3.6.6 Firefox 3.6.6 Windows XP Windows XP
    #7
    @
  8. 不错,折腾的不错,都把广告放到回复框这里让人点啊

    Google Chrome 5.0.375.127 Google Chrome 5.0.375.127 Windows 7 Windows 7
    #8
    @
  9. 悲剧的我N次修改失败。。。。。我已经对我的主题的评论修改放弃了,等换新主题再修改。。。

    Google Chrome 7.0.503.0 Google Chrome 7.0.503.0 Windows XP Windows XP
    #9
    @
  10. creolophis

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

    测试下字体效果

    Opera 10.63 Opera 10.63 Windows XP Windows XP
    #10
    @
  11. lft59598

    哎呀看到你这题目,让我很兴奋,不过到了后面,却又没看到我想看的。
    评论这个大坑已经好几天没过去了。
    我想知道如何美化主回复下面的子评论的外观。
    希望能够得到你的帮助,谢谢。

    Internet Explorer 7.0 Internet Explorer 7.0 Windows 7 Windows 7
    #11
    @
  12. 北极飞鱼

    博主你好,你能把comments.php 相关代码发给我一份吗 我看了好长时间还是搞不定啊 非常感谢

    Maxthon 3.4.2.3000 Maxthon 3.4.2.3000 Windows 7 Windows 7
    #12
    @
  13. 看上去不错!感谢分享! 🙂 🙂 🙂

    Google Chrome 29.0.1547.57 Google Chrome 29.0.1547.57 Windows 7 Windows 7
    #13
    @
Leave a Reply

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