我的WordPress主题这样做(6)-留言楼层样式技巧

在这一篇文章中,我们来说说在WordPress中留言模板(comments.php)设计中的一些技巧:譬如你想在留言中admin的样式与其它访客的不一样;或者你希望单数与双数的留言楼层能区分开来;再者,你希望对于trackback及pingback的样式也需要特别点的样式,上述这些功能你都可以简单地修改你的主题模板达到,你也可以在我的留言板块中看到相关效果。

尽管各主题模板可能有所差异,但对于comments.php来说,内容基本是相同的。下面我举例通过修改default主题的comments.php来说明:

第一步:

在模板中的开始部分的第一个<? php ?>内容中查找:

$oddcomment = 'class="alt" ';

把它改成:

$oddcomment = 'alt';

第二步:

接着在<ol>循环中查找:

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

把它改成:

<li class="<?php echo
$oddcomment;
$comment_type = get_comment_type();
if ($comment->comment_author_email == get_the_author_email()) :
echo ' authorcomment';
elseif($comment_type == 'trackback' || $comment_type == 'pingback') :
echo ' trackback';
endif;
?>" id="comment-<?php comment_ID() ?>">

说明一下:上面的语句是首先通过判断留言作者的email地址,如果其地址与admin的地址,也就是网站的管理员邮址相同的话,执行“authorcomment”这个样式;接着通过留言的类别,如果是trackback或者pingback的话,则执行“trackback”这个样式。

第三步:

在模板中</li>的标记后查找:

<?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>

改成:

<?php
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

第四步:

到这里,对于模板的更改就完成了,我们接着要做的是在style.css中决定各类样式:

  • 对于通用楼层的样式,我们用.comments ol li进行定义;
  • 对于双数楼层的样式我们则使用.comments ol li.alt进行定义;
  • 而对于admin作者的样式,则使用.comments ol li.authorcomment定义;
  • 同理,对于trackback的楼层样式是使用.comments ol li.trackback定义。

第五步:

通过第四步的工作并且发挥你的创意,你就可以看到在你的留言楼层中,能清楚地区分各层留言,区分网站主人的留言,甚至trackback的样式也能与众不同。

最后,希望你能希望这个小技巧,同时能继续支持《我的WordPress主题这样做》这个系列文章啦 icon wink 我的WordPress主题这样做(6) 留言楼层样式技巧

分类:theme skill, WordPress;标签:, , , ;收藏本文的永久链接

36 Responses to “我的WordPress主题这样做(6)-留言楼层样式技巧”

  1. Frozens 回复此留言 2008/07/30 04:09 #comment-2799

    好东西呀,转了

  2. dora 回复此留言 2008/07/30 04:40 #comment-2798

    要是通过email来判断,别人如果知道作者的email 就很容易伪造出作者回复的样子了

  3. ZH CEXO 回复此留言 2008/07/30 04:49 #comment-2797

    一直都觉得很多人的留言本不一样,我最近改成了倒序的,但是像你上面说的我还没试过,改天试一下,呵呵。

  4. lokr 回复此留言 2008/07/30 05:52 #comment-2795

    哎 看不懂啊

  5. stephen 回复此留言 2008/07/30 05:30 #comment-2796

    好文章,我博客分离PB/TB都是直接使用BOB主题的comment模板,自己在修改一下。
    这段时间也准备修改一下评论系统,这个周末回去折腾一下!!
    PS:我刚才到你的链接页面看了一下,把我博客链接更新到www.caxblog.com吧^_^,谢谢了。

  6. 香水 回复此留言 2008/07/30 06:58 #comment-2794

    很多的主题的评论留言都是li里面套很多div或者干脆全部div,完全没有必要,其实可以抛弃li或者div标签排版,改用dl、dt、dd感觉更好一些,不仅语义明确,样式化也更方便一些。

  7. Jinwen 回复此留言 2008/07/30 09:20 #comment-2793

    @dora: 说的是,一般情况下不会吧,如果真的出现,那我们改用户ID来进行区别。
    @stephen: 呵,已经改了。
    @香水: 是的,但我是从default模板中改的,所以也懒得多做点。

  8. 痞子C 回复此留言 2008/08/01 06:20 #comment-2792

    你这个1234。。。怎么加上去的?

  9. Jinwen 回复此留言 2008/08/01 09:20 #comment-2791

    @痞子C:序号的增加我在这里介绍过:http://www.saywp.com/wordpress/add-number-to-wordpress-comments.html

  10. shamas 回复此留言 2008/10/13 06:46 #comment-2803

    弄很多次,都不行,你这个评论样式,我看过源码,好像也不行的吧

  11. Jinwen 回复此留言 2008/10/14 10:24 #comment-2804

    @shamas: 你说的不行是什么呢?在我这里能高亮自己的评论啊,能说具体点不?应该是可以的。

  12. shamas 回复此留言 2008/10/15 09:57 #comment-2806

    @Jinwen: 我用ID来判断了

  13. Jinwen 回复此留言 2008/10/15 10:23 #comment-2807

    @shamas: 这也是个办法。但对于单双数的楼层样式,ID判断也可以吗?

  14. D.Chou 回复此留言 2009/01/14 13:18 #comment-4073

    饿,要是wp2.7里面怎么改呢?default theme里面的foreach函数被修改成wp-list-comments,原来包含在foreach下的诸如楼层,还有在前面的判断函数oddcomment,都找不到了。我从classic theme复制foreach函数过去替换wp-list-comments,添加oddcomment,结果出错信息显示在oddcomment。BTW,更改过的嵌套回复也无法显示。整个comments.php崩溃。

  15. Jinwen 回复此留言 2009/01/15 19:00 #comment-4082

    @D.Chou: 对2.7的样式修改我没进行,但如果要修改,必须修改functions.php内的相应段落,其实2.7就是把之前版本的OL段移到functions.php内去的。

  16. dakun 回复此留言 2009/05/05 02:34 #comment-6551

    2.7中也有这些东西,也照着改了,可是无效啊

  17. veapon 回复此留言 2009/10/23 19:18 #comment-10135

    您好,我想要你现在这个主题的comments.php+style.css行吗?

    可以的话发到我邮箱里吧~

    谢谢~:)

  18. veapon 回复此留言 2009/10/23 19:20 #comment-10136

    你回复这块应该用了插件的吧?能把插件名称也给我吗?

    我是新手,想学自己做主题,屁颠屁颠来到你这里,发现你的主题也很符合我的口味~

    • Jinwen 回复此留言 2009/10/23 19:21 #comment-10137

      我现在这个主题是公开下载的,你在下载页面下载它就行了。导航栏第二个有各个主题的下载链接。回复全部是用JS实现的,没有插件。

    • sameasy 回复此留言 2010/02/27 12:49 #comment-13044

      @Jinwen 正在研究怎么弄出效果

  19. myymi 回复此留言 2009/12/02 23:06 #comment-11268

    窝给你发信求救,你都木有理我 :arrow: :arrow: :cry:

  20. myymi 回复此留言 2009/12/05 06:37 #comment-11384

    太感谢了,谢谢Jinwen~ :oops: :grin: :oops:

  21. ibuffalo 回复此留言 2010/02/22 21:36 #comment-12907

    还是到Jinwen这里才取到真经。你的名字总让我想起“金文”,哈哈 :smile:

  22. woiweb 回复此留言 2010/08/11 21:55 #comment-15384

    学习了,我也试试,如有问题还需问博主 啊 :smile:

  23. 边风炜的官方博客 回复此留言 2010/09/05 21:31 #comment-15698

    你好,博主,我的网站主题和你的是同一个。觉得你的修改的挺好的,想向你请教一二。有空可以看看我的站。希望你能加我QQ。我的QQ是3631476 谢谢啦。

  24. 香袭人精油怎么样 回复此留言 2011/01/20 20:36 #comment-17587

    :evil: :razz:

  25. 香袭人精油怎么样 回复此留言 2011/01/20 20:40 #comment-17588

    :cool: :evil:

  26. 吵吵 回复此留言 2011/06/26 10:50 #comment-20255

    感觉好像是没有什么必要的,可能还是嵌套就ok了吧。

  27. 所以呢 回复此留言 2011/06/28 10:41 #comment-20319

    这个不错,好用的说!


The trackbacks and pingpacks:

  • 留言楼层样式技巧 | This season - Pingback on 08/07/30 03:30
  • 评论层样式技巧 | ::冰封:: - Pingback on 08/07/30 04:11
  • YY吧 » Blog Archive » 我的WordPress主题这样做 - Pingback on 08/08/30 09:55
  • WordPress Theme Greyville - Moxida网摘 - Pingback on 08/09/29 14:42
  • 现用主题通过CSS3和XHTML1.1.的认证 | www.saywp.com - Pingback on 08/11/28 12:59