/ 博客 / 4388浏览

最新的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 · iPhone iOS 7.0.4
    1. S

      @老杨确实有这个瑕疵……后续看看怎么改进。想到是不是用loading图标来表示加载中。

      Safari 8 · iPhone iOS 8.3
      1. 大肥羊

        @S可以把那个等待时间改长点,不过不能完美解决,找大发吧,那大神肯定可以搞定的。

        Firefox 37 · Windows 7
        1. S

          @大肥羊确实可以改长点。再说吧。

          Safari 8 · iPhone iOS 8.3
          1. 老杨

            @S大发那有更新了。

            Firefox 38 · Windows 7
        2. S

          @大肥羊测了,貌似有点问题。他改动大了点,换了个模板貌似就调用wp-comments-post.php了。

          Google Chrome 31 · Windows XP
          1. 老杨

            @S把 jQuery('#comment_message').removeClass('hide').html("提交中....");放到 jQuery.ajax({ 前面就可以了,那个什么beforesend不要了。

            Firefox 38 · Windows 7
        3. S

          @大肥羊嗯我直接重新下了你的代码,这次行了。 😀

          Google Chrome 31 · Windows XP
          1. 老杨

            @S你这木有评论回复邮件通知功能呢。。。

            Firefox 38 · Windows 7
        4. S

          @大肥羊我装的comment-reply-notification,最近貌似不灵光了。有合适代码推荐不。

          Safari 8 · iPhone iOS 8.3
          1. 老杨

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

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

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

            Firefox 38 · Windows 7
        5. S

          @大肥羊这两个代码都用了,都用不了……看来折腾的路好艰辛啊。 ❓

          Google Chrome 34 · Windows XP
        6. S

          @大肥羊改成qq邮箱后好了。

          Google Chrome 34 · Windows XP
          1. 老杨

            @S收到回复通知了,特来发贺电。

            Firefox 38 · Windows 7
            1. S

              @老杨好~感谢你 🙂

              Google Chrome 42 · Mac OS X 10.10
          2. 老杨

            @S话说这条回复通知发信邮箱是 ****an@163.com 哦。

            Firefox 38 · Windows 7
            1. S

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

              Google Chrome 42 · Mac OS X 10.10
  2. 锋子

    Ajax本身对服务器要求就高

    Internet Explorer 9 · Windows 7
    1. maie

      @锋子测试一下

      Firefox 37 · Windows XP
    2. S

      @锋子确实有点,不过还行。

      Google Chrome 42 · Mac OS X 10.10
  3. Betty

    完全就不是我的功劳,该把我省去,独留bigfa才是。

    Safari 8 · Mac OS X 10.10
    1. S

      @Betty你推荐的,也有功。 😎

      Google Chrome 42 · Mac OS X 10.10
    2. 大发

      @Betty你有苦劳

      Firefox 38 · Mac OS X 10.10
  4. 大发

    。。。。。。。

    Firefox 38 · Mac OS X 10.10
    1. S

      @大发是吧,有点问题…… 找半天不知道哪里。

      Google Chrome 31 · Windows XP
  5. 大发

    。。。。。。

    Firefox 38 · Mac OS X 10.10
    1. S

      @大发好啦。 😀

      Google Chrome 31 · Windows XP
  6. 从良未遂

    ajax提交吗?

    Safari 8 · Mac OS X 10.10
  7. 从良未遂

    你连提交的快捷键都没有设置啊?

    Safari 8 · Mac OS X 10.10
    1. S

      @从良未遂需要快捷键吗?好吧,有空给我一段代码呗

      Wordpress App 5 · iPhone iOS 8.3
  8. Captain

    那个下载链接失效了,能麻烦提供一份吗?

    Firefox 39 · Windows 10
    1. S

      @Captain可以啊,发你邮箱。

      Google Chrome 34 · Windows XP
      1. Captain

        @S好的,麻烦了!jqx1991#gmail.com

        Firefox 39 · Windows 10
        1. S

          @Captain已发。原文中的更新地址也已更新。 😎

          Google Chrome 34 · Windows XP

发表回复

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