首先要感谢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行。
老杨 广东
感觉这个版本那个提示框在不大给力的服务器上不大友好,因为超时了还没提交成功的话提示框没了,评论还在评论框,会以为提交失败了……不知道现在这个改进了木有。
十年前 Mozilla Compatible · iPhone iOS 7.0.4S 江苏 *
@老杨 确实有这个瑕疵……后续看看怎么改进。想到是不是用loading图标来表示加载中。
十年前 Safari 8 · iPhone iOS 8.3大肥羊 香港
@S 可以把那个等待时间改长点,不过不能完美解决,找大发吧,那大神肯定可以搞定的。
十年前 Firefox 37 · Windows 7S 江苏 *
@大肥羊 确实可以改长点。再说吧。
十年前 Safari 8 · iPhone iOS 8.3老杨 广东
@S 大发那有更新了。
十年前 Firefox 38 · Windows 7S 江苏 *
@大肥羊 测了,貌似有点问题。他改动大了点,换了个模板貌似就调用wp-comments-post.php了。
十年前 Google Chrome 31 · Windows XP老杨 广东
@S 把 jQuery('#comment_message').removeClass('hide').html("提交中....");放到 jQuery.ajax({ 前面就可以了,那个什么beforesend不要了。
十年前 Firefox 38 · Windows 7S 江苏 *
@大肥羊 嗯我直接重新下了你的代码,这次行了。 😀
十年前 Google Chrome 31 · Windows XP老杨 广东
@S 你这木有评论回复邮件通知功能呢。。。
十年前 Firefox 38 · Windows 7S 江苏 *
@大肥羊 我装的comment-reply-notification,最近貌似不灵光了。有合适代码推荐不。
十年前 Safari 8 · iPhone iOS 8.3老杨 广东
@S 我用的【WordPress 评论回复邮件通知代码】这里的第一种:https://cyhour.com/400.html
加上这个【免插件实现WordPress SMTP邮件服务】:https://cyhour.com/304.html
发信邮箱用的是 QQ 企业邮箱。
十年前 Firefox 38 · Windows 7S 江苏 *
@大肥羊 这两个代码都用了,都用不了……看来折腾的路好艰辛啊。 ❓
十年前 Google Chrome 34 · Windows XPS 江苏 *
@大肥羊 改成qq邮箱后好了。
十年前 Google Chrome 34 · Windows XP老杨 广东
@S 收到回复通知了,特来发贺电。
十年前 Firefox 38 · Windows 7S 江苏 *
@老杨 好~感谢你 🙂
十年前 Google Chrome 42 · Mac OS X 10.10老杨 广东
@S 话说这条回复通知发信邮箱是 ****an@163.com 哦。
十年前 Firefox 38 · Windows 7S 江苏 *
@老杨 那还真错怪163了,也是能发送的啊。只是发送间隔时间也忒长了。
十年前 Google Chrome 42 · Mac OS X 10.10我现在还是改用QQ邮箱了,快一些感觉。
锋子 江苏
Ajax本身对服务器要求就高
十年前 Internet Explorer 9 · Windows 7maie 四川
@锋子 测试一下
十年前 Firefox 37 · Windows XPS 江苏 *
@锋子 确实有点,不过还行。
十年前 Google Chrome 42 · Mac OS X 10.10Betty 上海
完全就不是我的功劳,该把我省去,独留bigfa才是。
十年前 Safari 8 · Mac OS X 10.10S 江苏 *
@Betty 你推荐的,也有功。 😎
十年前 Google Chrome 42 · Mac OS X 10.10大发 黑龙江
@Betty 你有苦劳
十年前 Firefox 38 · Mac OS X 10.10大发 黑龙江
。。。。。。。
十年前 Firefox 38 · Mac OS X 10.10S 江苏 *
@大发 是吧,有点问题…… 找半天不知道哪里。
十年前 Google Chrome 31 · Windows XP大发 黑龙江
。。。。。。
十年前 Firefox 38 · Mac OS X 10.10S 江苏 *
@大发 好啦。 😀
十年前 Google Chrome 31 · Windows XP