«
»

以背景色区分Blog作者评论与普通评论

2009年04月14日 - 5 条留言 - WordPress - 1 | 大小:小 中 大 | 繁體
此页面的短网址为：http://urldad.com/h

这里指的是在WordPress中，判断是否Blog作者，并且在评论内容调用不同的CSS来实现Blog作者评论跟普通评论的区分。实现方法很简单，网上也有很多实现方法。自从使用了PureCSS这个主题后，炜煜或多或少对主题的摆弄有点了点兴趣。所以下面我继续用我这个修改过的主题来举例说明。

根据文章开头的意思，其实就是自定评论样式的一种。会修改到2个文件，1个是functions.php 。一个是style.css 。判断是否为Blog作者并且使用不同样式的主要代码如下： 

<?php
	$isByAuthor = false;
	if($comment->user_id != 0)
	{
		$isByAuthor = true;
	}
	if ($isByAuthor == true)
	{
	$oddcomment = 'commentcontent-author';
	}
	else
	{
	$oddcomment = 'commentcontent';
	}
?>

解释：commentcontent-author和commentcontent就是2个不同的样式。当判断为Blog作者时，调用了commentcontent-author这个样式。我把这个判断放到了自定义 Comments 列表函数里面。接着把需要变色的那个div的样式修改为

class="<?php _e($oddcomment); ?>"

这样functions.php就修改好了。这样，我的整个自定义评论的函数如下： 

<?php
function custom_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    global $commentcount;
    if(!$commentcount) $commentcount = 0;
    $commentcount ++;
    global $commentalt;
    ($commentalt == "alt")?$commentalt="":$commentalt="alt";   
?>
    <?php
			$isByAuthor = false;
			if($comment->user_id != 0)
			{
				$isByAuthor = true;
			}
			if ($isByAuthor == true)
			{
				$oddcomment = 'commentcontent-author';
			}
			else
			{
				$oddcomment = 'commentcontent';
			}
		?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
 
    <div class="commentmetadata <?php echo $commentalt?>"><strong><?php echo $commentcount ?>.</strong> <cite><?php comment_author_link( ); ?></cite> | <small><?php comment_date( ); ?> at <?php comment_time(); ?> | <a href="#comment-<?php comment_ID( ); ?>">#</a></small></div>
        <?php echo get_avatar( $comment, 32 ); ?>
        <div class="<?php _e($oddcomment); ?>"><?php comment_text( ); ?>
        <?php edit_comment_link('Edit Comment','<span class="editlink">','</span>'); ?>
        <?php comment_reply_link(array('depth' => $depth, 'max_depth'=> $args['max_depth'], 'reply_text' => "回复该留言"));?></div>
<?php } ?>

style.css中，我增加了commentcontent-author这个样式。其实就是拷贝一次commentcontent，然后修改为commentcontent-author，另外加上背景颜色或是背景图片的样式即可。我这里的内容如下： 

.commentcontent-author{
  border: 1px solid #bfbfbf;
  padding: 2px 8px;
  background:#f2f7f8
}

这里的实现方法是参考了dupola的主题：Twitter Theme。
另外，推荐乔布鲁的这篇文章：如何高亮你的评论背景色。有举例说明哦。而且我这里使用的其实就是该篇文章介绍的方法一。


相关日志 随机文章 最新文章 留言排行

读过这篇日志的读者同时也读了：

标签： , , ,

>欢迎您的来访。喜欢这篇文章么? 发表一下您的看法 好让我们能交流交流一下。
> 建议您 订阅这里的RSS，这样您及时地获取更多精彩内容!
>Permalink：http://firefore.com/2009/04/author-comments-bg.html
>Trackback Address：http://firefore.com/2009/04/author-comments-bg.html/trackback

  1. 1. cluries | 2009年04月15号 at 06:58:34 | #

    呵呵 这是开始整WP了所~

    回复该留言
  2. 3. 虫儿 | 2009年04月15号 at 15:20:12 | #

    很漂亮的评论设计

    回复该留言
  3. 4. 动漫驿站 | 2009年05月8号 at 12:40:17 | #

    这个不错很实用！

    回复该留言
  4. 5. 仁心博客 | 2009年05月23号 at 17:27:15 | #

    这个设计挺漂亮的

    回复该留言