最新的Ajax评论代码

首先要感谢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了!


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

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

共有 34 条评论

  1. Mozilla Compatible Mozilla Compatible iPhone iOS 7.0.4 iPhone iOS 7.0.4

    感觉这个版本那个提示框在不大给力的服务器上不大友好,因为超时了还没提交成功的话提示框没了,评论还在评论框,会以为提交失败了……不知道现在这个改进了木有。

          1. Firefox 38 Firefox 38 Windows 7 Windows 7

            @Yan 把 jQuery(‘#comment_message’).removeClass(‘hide’).html(“提交中….”);放到 jQuery.ajax({ 前面就可以了,那个什么beforesend不要了。

          1. Firefox 38 Firefox 38 Windows 7 Windows 7

            @Yan 我用的【WordPress 评论回复邮件通知代码】这里的第一种:https://cyhour.com/400.html

            加上这个【免插件实现WordPress SMTP邮件服务】:https://cyhour.com/304.html

            发信邮箱用的是 QQ 企业邮箱。

            1. Google Chrome 42 Google Chrome 42 Mac OS X 10.10 Mac OS X 10.10

              @老杨 那还真错怪163了,也是能发送的啊。只是发送间隔时间也忒长了。
              我现在还是改用QQ邮箱了,快一些感觉。

发表评论

电子邮件地址不会被公开。 必填项已用*标注