仿人人网新鲜事评论的评论列表实现 - [wordpress]

一直以来wordpress的评论也算一个开发重点，每个主题制作者在评论展现方式上的开发也下足了功夫，但是也不外乎都是样式上的变化。人人网的新鲜事都可以评论，我很喜欢这种即时评论的方式。下面主要的实现思路说一下：

首先是要设置评论嵌套为2层

只有两层的话，我们就可以将第一层（主评论）当做主体，然后第二层都是对其的回复。

其次在是每条主评论下插入一个输入框

这个对于自定义评论显示结构的主题来说是很容易的，只要在functions.php中的评论回调函数中加上一个textarea就行了。具体的样式就需要自己去定义了，我就不多说了，更具体些的动态变化（点击展开输入框，焦点移开复原输入框）则需要js控制了。我是将这个框简单化，只有一条，点击后用js展开（第三点要说的）。

<?php if ($depth===1): ?>

    <div class="quick-comment-form">

        <textarea class="quick-comment"></textarea>

    </div>

<?php endif; ?>

这样子插入的输入框都是直接附加到主评论后面的，本来其实我想实现的是，有子评论时我想将输入框直接输出到子评论的末尾，但是最后没有实现。

点击输入框展开完整的评论输入

就想人人网的一样，点击后展开输入区域。wordpress这里涉及到两点，第一，用户登录，第二未登录。未登录下还分有cookie记录用户名 邮箱和没有这些信息。我是通过一段js代码将这些信息输出到页面上，以供后续代码调用判断。

<?php 

    $commenter=array(

        'login' => (bool)is_user_logged_in(),

        'author' => $username,

        'email' => $useremail,

        'url' => $userurl,

        'avatar' => get_avatar($useremail, 32)

    );

    echo '<script id="guestbookcommentlist" type="text/javascript">window.commenter='.json_encode($commenter).';</script>';

?>

这样我就可以知道用户有没有登录，也可以很方便的取到用户存储在cookie中的用户名和邮箱值了，还有头像。

取得以上信息后我们就可以通过js操纵dom来将评论框展开，加上输入姓名 邮箱的部分。第一步是初始状态的输入框在获得焦点后（onfocus）后要展开，这点容易，我们直接循环对每个输入框绑定onfocus事件就行了。第二步则是要实现恢复展开的输入框为初始状态。这个不能用失焦（onblur）来做了。因为输入框下可能会有姓名 邮箱等其它输入部分，我们点击那些输入域或者回复按钮时会造成评论框失焦触发动作。所以这样是不行的。我是通过document的click事件，然后取得srcElement，通过和包含评论框、姓名 邮箱输入的那个节点（div#quick-comment-form）的contains关系比较来判断是否需要关闭恢复评论框。

addListener(document,'click',function(e){

    var target=window.event && window.event.srcElement||e && e.target;

    for(var i=0;i<quickcomments.length;i++){//quickcomments为取得的所有快速输入框的集合

        if(quickcomments[i].value=='' && !contains(quickcomments[i].parentNode,target)){

            //处理部分

        }

    }

},false);

最后就是发布评论了

这个就简单了，就是一个简单的ajax评论。登陆用户直接只取评论内容和post_id, comment_parent_id格式化后发送就行了。未登录用户还要去获取下姓名 邮箱输入的值，然后一块发送。后台加上相应的响应代码就行了。

 

Over。说的很简单，也没具体的代码，大家凑活看。主要是想说wordpress的评论其实可以千变万化，做出很多的新奇来。

我博客还没加上这个，不过这儿有一个线上例子，也欢迎大家有html5相关的问题到这里进行提问，会有一帮热心人帮助你的。点此浏览效果。

原文章链接：http://www.qiqiboy.com/2011/07/13/wordpress-comemnts-like-renren.html