竹炉山房

首先要感谢Bigfa和Betty推荐了最新Ajax评论代码，确实比从前的Ajax评论代码好用的多，且效果还棒棒的。经过两天来的修订摸索，目前的效果我基本满意，想看效果直接评论本文即可。

这里把代码共享一下，并结合我的体验说一下修改方法。

1、Bigfa的原文点这里。源代码点这里。

2、解压缩到自己的主题目录下。

3、修改其中的do.php文件，把其中//这里修改成你的评论结构部分这段，按照自己的主题评论格式改好。这一步稍微有点技巧，但也不难。有个窍门，用Chrome的审查元素功能，随便找一篇自己的文章，找到评论部分，拷贝自己评论的格式，将其中的一些元素，替换成do.php中的php代码。比如我的主题评论是这个样子的：

//这里修改成你的评论结构
    ?>
<!--这是原来代码中的评论结构-->
    <!--li <?php comment_class(); ?>>
        <article class="comment-body">
            <footer class="comment-meta">
                <div class="comment-author vcard">
                    <?php echo get_avatar( $comment, $size = '56')?>
                    <b class="fn">
                        <?php echo get_comment_author_link();?>
                    </b>
                </div>
                <div class="comment-metadata">
                    <?php echo get_comment_date(); ?>
                </div>
            </footer>
            <div class="comment-content">
                <?php comment_text(); ?>
            </div>
        </article>
    </li-->
	    
<!--这是根据自己的主题评论结构，参照上面的代码做出的样子-->
    <li <?php comment_class(); ?>> 
 	   <div class="comment">		
 			<?php echo get_avatar( $comment, $size = '150')?>" 
 			<div class="comment-inner">
 				<div class="comment-header">				
 					<h4><?php echo get_comment_author_link();?>
						<span>says:</span></h4>
 				</div>	
 				<div class="comment-content post-content">				
 					<p><?php comment_text(); ?></p>
 				</div><!-- /comment-content -->
 				<div class="comment-actions">
 					<div class="fleft">
 						<p class="comment-date">
						<?php echo get_comment_date(); ?>
						</p>
 					</div>
 					<div class="fright">	
 					</div> <!-- /fright -->
 					<div class="clear"></div>
 				</div> <!-- /comment-actions -->
 			</div> <!-- /comment-inner -->
 		</div>
     </li>

4、修改ajax-comment.js，找到其中 // your comments wrapper 这句注解，将前面的语句中的jQuery('.comment-list')替换为自己的评论容器。这个容器怎么找呢？简单办法是去到自己的后台，comments.php这个文件，点进去，查找一下是comment-list还是commentlist还是类似这样的class。比如我的主题的评论容器查出来是commentlist。

<ol class="commentlist">
	<?php wp_list_comments( array( 'type' => 'comment', 'callback' => 'hoffman_comment' ) ); ?>
</ol>

相应把ajax-comment.js中的jQuery部分改了。

jQuery('.commentlist').append(data);// your comments wrapper

5、修改ajax-comment.css。为什么要修改呢？原因是我发现在博主自己登录的情况下因为顶上有个系统内置的登录黑条导致无法看到效果……坑死人了，一度以为是代码不起作用改了好久好久……

我的css样式如下：

.butterBar{
	margin-left:36%;
	max-width:640px;
	position:fixed;
	text-align:center;
	top:0;
//这里特意加上padding-top就是想让博主自己在前台评论时也能看到效果……
padding-top:300px;
	width:58%;
	z-index:800
}
.butterBar--center{
	left:50%;
	margin-left:-320px
}
.butterBar-message{
//将弹出的窗口背景色(255,255,255,0.97)白色改成符合自己主题的颜色比如湖蓝色是background:rgba(30,115,190,0.9);，洋红色是background-color:rgba(233,88,106,0.9);。相关rgba与16位hex代码转化，可以度娘
//	background:rgba(255,255,255,0.97);
	background:rgba(30,115,190,0.9);
//不喜欢原来的底部圆角，改成四个角2px
//	border-bottom-left-radius:4px;
//	border-bottom-right-radius:4px;
	border-radius:2px;
	box-shadow:0 1px 1px rgba(0,0,0,0.25),0 0 1px rgba(0,0,0,0.35);
	display:inline-block;
	font-size:14px;
//相应添加字体颜色为白色
	color:#fff;
	margin-bottom:0;
	padding:12px 25px
}

另外，如果你的主题像我一样有对@media的判断，建议在css中加入类似这样的判断语句：

@media (max-width: 600px) {
.butterBar--center{
	left:50%;
	margin-left:-80px;//更改使其居中
}
}

然后就OK了！

---

更新：Bigfa更新了代码，主要是对性能不大好的服务器设置了等待动画，且简化了CSS代码。相应的代码下载服务器也更新了。详情见他的文章。

注意：在上文第4步中，ajax-comment.js这个文件中现在有三处要更改wrapper容器的id为你自己的id，详细位置见第29、30、32行。