关于主题嵌套评论的设计

这两天制作新的Retweet主题,除了在后台功能设定做了一些工作比较繁琐,另一个头疼的问题就是评论样式的制作。Wordpress功能丰富,每个人习惯不同设定不同,从而显示效果就不同。设计的效果用户可能不用,用户的设定可能又体现不出设计的样式。这个就很纠结,所以我已经抱着凑合着用的心态来制作诸如“嵌套评论”这样的地方。而说到“嵌套评论”,那就谈谈这几天制作用到的一些设计。

WordPress更新到2.7后,采用了新的函数wp_list_comments来调取评论列表。我们制作主题的时候可能希望自己修改评论样式,在function.php设定评论样式然后在comment.php中用callback来调出样式。而这时我们需要注意一个问题,就是在function.php设定评论样式时,不要在最后添上</li>来闭合前面的<li>。

为什么这么做呢?

  1. 如果在这里闭合<li>,那么当该评论有嵌套评论时,代码会像下面这样。
    • 评论内容第一层
      • 评论内容第二层
    • ……

    如果这里不闭合<li>,那么代码如下

    • 评论内容第一层
      • 评论内容第二层
    • ……
  2. 即便在自定义评论样式里最后不闭合 </li>,最后输出的html中也会闭合。不会有任何问题。
  3. 代码更清晰,更有层次。

区别在哪?

在IE里,在<ul>前面是否闭合是看不出区别的。但在其他浏览器中譬如火狐,<ul>的部分则是显示在<li>下面的而不是里面。如下所示,使用:hover在IE中(图一)整个<li>都会被选中,效果等同于<ul>包在<li>里面,而在Firefox里面(图二)使用:hover只选中了当前<li>,下面的<ul>好像没有关系。(图示不是很明了,如果使用border作示范效果应该更好 😛 )
2009-07-12_tc02.gif
2009-07-12_tc01.gif
可以简单的说:如果嵌套评论的ul在闭合的li后面,这个li在火狐中是无法包住ul的,而在IE中可以。

我记得以前看的一些主题自定义评论最后都没有闭合</li>,可能因为我们学习的教程就不小心遗留下了最后的</li>,所以就让IE的这个bug影响设计。

如果没法改HTML的部分,又要分开定义各层嵌套回复的样式怎么办?

如果遇到这个问题我们又不能自己修改主题,怎么办?也不麻烦,我们可以通过CSS里的高级选择器(P.S.该功能IE6不支持)来实现。

使用相邻同胞选择器(adjacent sibling selector):由于现在<li>跟<ul>平级了,<ul>在<li>后面而<li>又没有包住<ul>,我们可以使用相邻同胞选择器给<li>后面紧跟着的第一个<ul>赋予样式。用法是在li跟ul的类中用“+”连接,如“li.depth-1 + ul.children li.depth-2”。这样就给li.depth-1后面的第一个类名为children的ul赋予样式。这个代码也有缺点,如果楼层比较清晰一层一层顺着下去还好。如果有人插楼,一层回了好几个评论样式就乱了。该选择器可用来定义第一层的嵌套回复(即首层回复),从第二层的回复开始的我们就可以用“ul.commentlist ul.children ul.children li.depth-3”这样赋予样式了。

使用子选择器(child selector):使用子选择器可以避免相邻同胞选择器只能给第一个合适的ul定义样式的问题。如“ul.commentlist > ul.children”这样可以给所有跟“li.depth-1”一层的嵌套评论都赋予样式。不过使用子选择器也是只能针对一层设定样式,再往里还要依次进行设置。

当然,一般独立假设WP的朋友不会遇到这种问题,只需要注意前面说的闭合li的问题,让页面输出一种IE跟火狐识别效果一样的HTML代码就好了。

Tags : ,

本博文章均为Sivan原创,内容遵循 署名-非商业性使用 2.5 共享协议,转载请注明来自 Sivan's Blog
原文链接为 //sivan.in/blog/design-of-threading-comments/
这篇日志发表于2009年07月13日 00:53。你可以订阅该日志的所有评论通过RSS 2.0。评论跟引用通告当前被关闭。

7 条回应

评论(7)引用通告(0)

  1. Showfom

    我顶你个废

    2009-07-13 01:29 | #1
    • 淡如水

      @Showfom , 我来看看这个嵌套样式!

      2010-07-22 21:17 | #2
  2. Jinwen

    我自己是没有在function中闭合;但我也从来没去试过把它闭合后的效果。还是研究的认真,但你说得还挺复杂的,我要看了几遍才知道个大概。

    2009-07-13 03:56 | #3
    • Sivan

      我说的太复杂了,表达能力不太好。等精简一下。

      2009-07-13 10:03 | #4
  3. derekpm

    Rather interesting. Has few times re-read for this purpose to remember. Thanks for interesting article. Waiting for trackback

    2009-07-13 09:34 | #5
  4. lvy

    额,不管怎么样谢谢分享~

    2009-07-13 10:50 | #6
  5. 菠萝

    支持!!!

    2009-11-06 14:57 | #7

站点评论关闭

有问题请联系 sun.sivan[at]gmail.com 或新浪微博 @Sivan