Hermit Cottage

最新的 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 条评论

发表评论 →
Mozilla Compatible Mozilla Compatible iPhone iOS 7.0.4 iPhone iOS 7.0.4

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

Firefox 38 Firefox 38 Windows 7 Windows 7

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

Firefox 38 Firefox 38 Windows 7 Windows 7

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

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

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

Google Chrome 42 Google Chrome 42 Mac OS X 10.10 Mac OS X 10.10

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

发表评论

2004-2019 © Hermit Cottage