wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现

renren

求新！求变！

一直以来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);