求新！求变！

一直以来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相关的问题到这里进行提问，会有一帮热心人帮助你的。点此浏览效果。

• wordpress 搜索自定义字段(模糊查询) (18)
• wordpress 按首字母排列文章/检索文章 (19)
• WordPress技术: 无限多级楼层显示 (61)
• 超级无语的新一代中文spam (87)
• 围观wordpress中文圈内好玩的spam (133)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/ex

• 2012年01月15日, citier say: 之前做主题就是卡在评论页面的美化上，你这个比较帅
• 2011年12月20日, hit9 say: 好cool啊，你的评论部分很给力！
• 2011年12月20日, hit9 say: 来测试下
• 2011年11月20日, MurphyL say: 哈哈～来学习啊～
• 2011年09月21日, set sail say: 介个很不错啊，有没有放淫淫网那种相册的每张图片都可以评论的创建啊
• 2011年08月13日, sprityaoyao say: 不错，我也改成这样的了
• 2011年07月22日, yetone say: 不错，尝试下
• 2011年07月21日, 套图部落 say: 很好的功能，按方法尝试下，希望能成功。

现在对这个主评论楼层进行了改进，支持了子评论楼层。

什么意思呢？

其实就是说每个评论的直接子评论(不包括孙子评论)当做一个楼层计数系统。

比如有一条评论A，有八条回复此评论的子评论（B1到B8），那么这八条评论就按照时间·顺序从1开始累计楼层。如果还有其它评论是对这八条评论的回复（即这八条评论的直接子评论，即A的孙子评论），那么他们也按照他们各自的父级评论从1开始排序。如下图所示：

正如图所示，具体的实例，大家可以到这个地址查看，请看仔细些：

多级无限楼层数展示

实现代码

其实实现思路还是原来那种主评论显示方法。主评论显示我们在wp的评论自定义显示调用函数中使用一个全局变量来存储楼层数（分页楼层的计算我这里就不说了，我以前的那篇文章里讲有，很多博友也写过）。

我这里的多级楼层其实也还是使用一个全局变量，只不过这个变量的类型变了，不是一个整型，而是一个数组。同样的我们要在函数里开头部分先声明引入全局变量$comemntcount：

global $commentcount;

然后是初始化，其实就是检测下这个变量有无定义：

$max_depth=$args['max_depth'];//获得设置的最大嵌套数

if(!$commentcount) {

    $commentcount = array();//声明为数组

    $pagenum=get_query_var('cpage')-1;//获得当前分页（减一是为了后面计算使用）

    $page_comment_count=get_option('comments_per_page');//获得设置的每页评论数

    $commentcount[0] = $pagenum * $page_comment_count;//$commentcount的第一个元素存入计算得出的前面分页的评论数目

    $commentcount[$max_depth]=0;//这里$commentcount[$max_depth]是用数组的最后一个存储上个评论的楼层数，这里初始置为0

}

上面最后一行用到了$commenntcount[$max_depth]，我们要用$commentcount数组存储每一层测楼层计数，所以最后一层，即$commenntcount[$max_depth]来存储上一条评论的楼层数，因为我们下面要用到它，来判断是否需要重置相应楼层对应的计数器。

<span class="comment-meta">//我以楼层输出处为例，介绍下后续的处理

    //$depth为当前打印的评论的楼层数，$commentcount[$depth-1]即为此楼层对应的计数器，如果不存在就置为1，否则就+1

    <?php if(!$commentcount[$depth-1])$commentcount[$depth-1]=1;else $commentcount[$depth-1]++;

        $floor = '#'.$commentcount[$depth-1];

        //输出楼层显示

        echo '<a href="' . htmlspecialchars( get_comment_link( $comment->comment_ID ) ) . '">' . $floor . '</a>';

        /* 下面就是重点了，$commentcount[$max_depth]里存储上个评论的嵌套层数，如果上个评论所在层数大于当前评论的层数，说明

            当前评论时更高一级评论，所以要重置低级层数的评论的=计数器 */

        if($commentcount[$max_depth]&&$commentcount[$max_depth]>$depth){

                for ($i=$depth;$i<$max_depth;$i++){//利用循环将低级的计数器都置为0

                    $commentcount[$i]=0;

                }

        }

        $commentcount[$max_depth]=$depth;//将当前评论层数赋给$commentcount[$max_depth]

    ?>

</span>

OK，到此就介绍完了，说的比较混乱，大家凑活着看。多级楼层支持任意嵌套层数。

也许还有人不明白何为多级嵌套层数，不明白的同学可以尽情在此篇文章下尽情灌水，尽情嵌套，来观察不同嵌套层数的楼层的变化。

• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• 超级无语的新一代中文spam (87)
• 围观wordpress中文圈内好玩的spam (133)
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (25)
• 补充《修改trackback样式，统一评论外观》中代码 (36)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/af

• 2011年12月20日, mr.citier say: ajax运用的神奇啊，来学习学习
• 2011年11月29日, vven say: @vven 如果到了最右边会怎样呢？
• 2011年11月29日, vven say: 博主，不要不让我说话呀，我是很诚心来学习的！
• 2011年11月29日, vven say: 我还能说话吗？
• 2011年11月29日, vven say: @QiQiBoY 博主大人，我刚才发的怎么没有了呀？
• 2011年11月29日, vven say: @vven nini你在哪里？
• 2011年11月29日, nini say: @vven 一直跟下去，try
• 2011年11月29日, nini say: 我评论的到哪里去鸟

现在我还想再来说一下基于原生JS的回复和引用功能的添加方法，并且是使用监听器绑定事件，不污染DOM节点，力争做到行为与内容分离。

先来看下我的一条评论的结构

可以看到，我是将每条评论放到 li#li-comment-{id} 标签里，然后紧接着有个 div#comment-{id} 的容器，这个容器中就是真正的本条评论的相关内容了。如果这条评论有子评论，那么会在与div#comment-{id} 容器平级的节点上有个 ul.children li#li-comment-{id} … 的后继结点，我们这里不用管它。

上图中绿色方框中的两个a标签即为回复和引用按钮，其中回复按钮的目标链接我简化成了个锚点，如果你使用wp的内置函数生成回复按钮，那么href中与此不同。建议你使用wp内置函数生成按钮。

接下来的橘黄色的箭头所指即为评论者名字获取的节点，这样我们可以方便的通过 a#commentauthor-{id} .innerHTMl 来取得评论者的名字。

最后的紫色箭头即为评论内容，div#commentbody-{id}，也是直接通过innerHTML取得内容。

进入javascript代码分析部分

var $$=function(c, t, p) {

    try{

        var at = p.getElementsByTagName(t);

    }catch(e){

        var at = document.getElementsByTagName(t);

    }

    var ms = new Array();

    for (var i = 0; i < at.length; i++)

        if (new RegExp("(?:^|\\s+)" + c + "(?:\\s+|$)").test(at[i].className))

            ms.push(at[i]);

    return ms;

},

addListener=function(e, n, o, u){

    if(e.addEventListener) {

        e.addEventListener(n, o, u);

        return true;

    } else if(e.attachEvent) {

        e['e' + n + o] = o;

        e[n + o] = function() {

            e['e' + n + o](window.event);

        };

        e.attachEvent('on' + n, e[n + o]);

        return true;

    }

    return false;

},

preventDefault=function(e){

    if(window.event){

        window.event.returnValue = false;

        return;

    }

    if (e.preventDefault){

        e.preventDefault();

    }

},

replyQuote={

    start : function(){

        /* 先判断页面上有无评论 */

        if(!($('thecomments')&&$('commentform')&&$('comment')))return;

        /* $$为根据类名获取结点簇的函数，function $$(className,tagName,parent) */

        var comments=$$('comment','li',$('thecomments')),

            /* 通过 input#comment_post_id 这个隐藏域获取当前页面ID */            

            postId=$('comment_post_ID').value;

        for(var i=0;i<comments.length;i++){/* 循环绑定 */

            replyQuote.reply(comments[i],postId);

            replyQuote.quote(comments[i]);

        }

    },

    reply : function(comment,postId){

            /* 过滤掉“li-comment-”来取得最终的id值

            */

        var id=comment.id.replace(/li-comment-/i,''),

            /* commentId即为取得div#comment-{id}做准备 */

            commentId='comment-'+id,

            /* replyLink即为回复按钮 */

            replyLink=$$('comment-reply-link','a',$(commentId))[0],

            /* 这里是取得父级id，应用了我以前文章中介绍的无限嵌套原理

               在最后一层评论的回复按钮上输出一个自定义的 p属性，如

                <a href="#comment-{id}" class="..." p="父级评论ID">Reply</a>

             使用JS检测是否有p属性，有的话就取这个p属性值

             */

            parentId=replyLink.getAttribute('p')?replyLink.getAttribute('p'):id,

            /* 这里得到评论者名字 */

            authorId='commentauthor-'+id,

            author=$(authorId).innerHTML.replace(/\t|\n|\r\n/g, ""),

            /* insertStr为要插入的内容 */

            insertStr='<a href="#' + commentId + '">@' + author + ' </a> \n',

            field;

        /* addListener为事件绑定函数，即监听器。这里绑定回复按钮的点击事件 */

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

            /* 移动评论框 */

            preventDefault(e)

            addComment.moveForm(commentId, parentId, 'respond', postId);

            if ($('comment') && $('comment').type == 'textarea') {

                field = $('comment')

            } else {

                alert("The comment box does not exist!");

                return false

            }

            if (field.value.indexOf(insertStr) > -1) {

                alert("已经回复过这条评论了!");

                return false

            }

            if (field.value.replace(/\s|\t|\n/g, '') == '') {

                field.value = insertStr;//如果评论为空就直接添加进去

            } else {

                //否则就先去除末尾的空格再空一行添加

                field.value = field.value.replace(/[\n]*$/g, "") + '\n\n' + insertStr;

            }

            field.focus();//最后将焦点移到评论框中

        },false);

    },

    /* 以下类似，有些自定义函数我没给出 */

    quote:function(comment){

        var id=comment.id.replace(/li-comment-/i,''),

            commentBodyId='commentbody-'+id,

            commentCont=$(commentBodyId).innerHTML,

            author=$('commentauthor-'+id).innerHTML.replace(/\t|\n|\r\n/g, ""),

            commentId='comment-'+id,

            quoteLink=$$('comment-quote-link','a',$(commentId))[0],

            insertStr='<blockquote cite="#' + commentBodyId + '">'+

                      '\n<strong><a href="#' + commentId + '">' + author + '</a> :</strong>'+

                      commentCont.replace(/\t/g, "")+'</blockquote>\n';

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

            //addEditor($('comment'),insertStr);

              preventDefault(e);

              $('comment').value+=insertStr;

        },false);

    }

}

replyQuote.start();

OK, 完事！

• 为评论框添加文字格式化编辑器 (116)
• 添加引用按钮——轻松打造属于你的WordPress引用回复功能 (32)
• javascript自定义Dialog对话框(alert, confirm, prompt) — (一) (31)
• 永不丢失的评论 – 打造wordpress评论框的本地化存储方案 (115)
• 【插件发布】wordpress主题预览插件-Wave Your Theme（换装游戏） (70)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/a9

• 2011年10月24日, 倡萌 say: 很强大的评论功能，有时间好好研究一下
• 2011年07月15日, mirror say:

  sprityaoyao : 这个我在emlog曾经没有嵌套的时候实现了，现在嵌套了，好像不行了。不过你这个方法可以借鉴

• 2011年06月26日, zdy say: good
• 2011年05月2日, sprityaoyao say: 这个我在emlog曾经没有嵌套的时候实现了，现在嵌套了，好像不行了。不过你这个方法可以借鉴
• 2011年04月22日, 小雪 say: 好久没来啦~~~赞一个评论框，我喜欢~~~~ 你的blog 特效好炫好炫啊~~~膜拜膜拜~~~看首页蛮像商业网站了呢~~~~~
• 2011年03月2日, 圣女贞德红 say: 从美观来说，JS很多特效的确可以美化网站，但是过多，会影响搜索引擎的收录，而且对自身发展也不好。
• 2011年02月16日, pepe say: @Coller
• 2011年02月16日, Coller say: @QiQiBoY Thank you for your topic.

使用wordpress的同学都知道wp的评论功能处的资料输入框是可以记录你上次评论时输入的姓名、邮箱、网站地址的。这是通过cookie记录的。你可能也想过通过cookie记录评论框输入的内容，但事实是cookie记录信息有限，太长的评论内容可能无法容身，而且由于cookie在每次http请求时都会被提交到服务器，为了尽可能的减少通信延迟，我们就要确保浏览器中存储尽量少的cookie。

客户端存储方案

而客户端存储除了cookie，其实还有好多其他方法，如Google Gears、flash、User Data、window.name等，但是这些方法或多或少都由于实现麻烦或者跨浏览器问题而不能单独使用。

综述各类方法，较为方便的一个实现方案是，对于较为现代的浏览器（IE8、IE9、chrome、Firefox、opera等），由于都已经实现了支持localStorage存储方案，所以可以使用这一W3C提倡的方案；而早期的IE则可以使用user Data方案。

wordpress上的评论内容存储实现思路

OK，有了基本的客户端存储方案，那么对于“wordpress永不丢失的评论”这个目标该怎么实现呢？

首先就是要考虑存储评论内容，由于每篇文章、每个页面都不同，所以为了区分每个存储，我们可以使用当前页面或者文章的ID来作为存储键值的参考。这个值可以通过获取页面中“input#comment_post_ID”这个隐藏域的值取得。然后我们可以通过绑定评论框的“onchange”事件来触发设置本地存储。

如果输入的内容没有被发表成功，那么在浏览器刷新或者重新加载此页面时，就要试着去读取相关内容，并显示到评论框里。

在评论发表成功后就要清除本页面上的这个存储或者将其置为空值。

具体代码及分析注释

先看存储功能的实现代码：

/*!

 * @public

 * @update 2010/12/11, liuqiqi imqiqiboy#gmail.com http://www.qiqiboy.com

 * @param <String> key 键值

 * @param <String> value 要存储的值

 * @call 设置新值storeLocalData(key, value); || 清除某个存储storeLocalData(key, ''); ||

 *       获取某个存储storeLocalData(key); || 清除所有存储storeLocalData(); 

*/

var storeLocalData=function(key, value) {

    try {

        //先试着获取对localStorage的引用

        var storage=window.localStorage || window.globalStorage && window.globalStorage[location.hostname];

        if (storage){//如果获取localStorage对象成功，说明浏览器支持localStorage

            if (value !== undefined)//如果存在value，表示是要设置存储操作

                value == "" ? storage.removeItem(key) : storage[key] = value;

            else if (key !== undefined)//存在key值，就返回相应的存储值

                return storage[key] || "";

            else throw new Error();//抛出异常，使代码流跳到最后清除存储部分

        }else if (/MSIE/i.test(navigator.userAgent)) {//确保是IE，IE才能使用userData存储

            var userData = document.getElementById('userData') || document.createElement('input');//试着查找‘userData’这个节点，没有就开始创建

            if (!userData.id) {//没有ID值就说明页面上无此节点

                userData.id="userData";

                userData.style.display='none';

                userData.style.behavior='url(#default#userData)';//behavior:url(#default#userData)'表示开启user Data存储

                document.body.appendChild(userData);//加载到页面中

            }

            try {

                userData.load("oXMLBranch")//尝试载入存储的数据

            } catch(e) {}

            if (value !== undefined) {//这里同上面，其实也是通过value判断是设置新值还是返回存储的值

                value == "" ? userData.removeAttribute(key) : userData.setAttribute(key, value);

                userData.save("oXMLBranch");//保存

            }else if (key !== undefined)//存在key值，就返回相应的存储值

               return userData.getAttribute(key) || "";

           else throw new Error();//抛出异常，使代码流跳到最后清除存储部分

        } else return false;//操作失败

        return true;//设置成功

    } catch(e) {//捕获到上面抛出的错误

       if(storage){

            storage.clear();//使用W3C的方法清除存储

        } else if (userData) {

            var attrs = userData.xmlDocument.firstChild.attributes, i;

            while(i = attrs.length){//循环清除xml文件里的每个属性里保存的值

                var j = attrs[--i].nodeName;

                userData.removeAttribute(j);

            }

            userData.save("oXMLBranch");

        }

    }

}

//以下为对localStorage测试的补充,部署到wordpress时不必添加此段代码

//设置一个新的存储

storeLocalData('new_key', 'new_value');//即保存了一个名称为new_key，内容为new_value的存储

//获取某个存储

storeLocalData('new_key');//即会返回new_key对应的值，如果new_key上存储了内容，就返回存储的内容，否则返回空字串

//删除某个存储

storeLocalData('new_key', '');//即将某个存储设置为空，即会删除它

//删除页面上所有的存储

storeLocalData();//传递任何参数，即会执行清除操作；你可以任何时候通过在浏览器的JS控制台上输入此函数来执行清理。

//查看输出页面上所有的storage

var storage = window.localStorage;

if(!storage.length)document.write('本页面上无存储内容！');

for(var i=0; i<storage.length; i++){

    //输出格式为 "键值 = 存储值"

    document.write(storage.key(i)+' = '+storage.getItem(storage.key(i))+'<br/>');

}

根据我代码中的注释，其实可以看出，设置一个新的存储，就调用storeLocalData(键值, 新值)；获取一个存储，就只提供键值即可，storeLocalData(键值)；

然后要和wordpress的评论机制结合起来。

//这些代码务必放在评论框下方，否则就使用window.onload包含调用，或者jQuery的ready方法调用

function $(id){

    return document.getElementById(id);

}

function addListener(e, n, o, u) {

    if(e.addEventListener) {

        e.addEventListener(n, o, u);

        return true;

    } else if(e.attachEvent) {

        e['e' + n + o] = o;

        e[n + o] = function() {

            e['e' + n + o](window.event);

        };

        e.attachEvent('on' + n, e[n + o]);

        return true;

    }

    return false;

}

/*通过onchange绑定存储行为方式，已弃用该方法，新方法在下边

if($("comment")){

    //这里用作存储键值我使用了 'storage_'+数字ID 的方式，因为我测试好像数字字串不能作为localStorage的属性值，原因我暂时不明，有了解的可以提点一下

    $('comment').value=storeLocalData('storage_'+$('comment_post_ID').value);

    addListener($('comment'),'change',function(){//绑定 onchange 事件

        storeLocalData('storage_'+$('comment_post_ID').value, $('comment').value);

    },false);

    addListener($('commentform'),'submit',function(){//绑定评论表单的 onsubmit 事件

        storeLocalData('storage_'+$('comment_post_ID').value, '');//这里置为空就可以了

    },false);

}

*/

//以下内容为2010.12.14日更新

if($("comment")){

    //这里用作存储键值我使用了 'storage_'+数字ID 的方式，因为我测试好像数字字串不能作为localStorage的属性值，原因我暂时不明，有了解的可以提点一下

    var local=storeLocalData('storage_'+$('comment_post_ID').value), post_id=$('comment_post_ID').value, //获取之前存储的内容和文章id

        storeTimer, new_value, old_value=local;//声明定时器标志，新值、旧值的变量

    $('comment').value= local === undefined? '' : local;//将评论框内容更新为存储的值

    addListener($('comment'),'focus',function(){//绑定聚焦事件

        if(!storeTimer)

        storeTimer=setInterval(function(){//声明一个定时器，每秒执行一次

            //if语句的执行会先获取评论框中的值，然后和旧值比较，不同就存储新值，然后就新值赋给旧值，以便下次继续和再次取得新值比较

            if((new_value=$('comment').value)!==undefined && new_value!=old_value && (old_value=new_value)!==undefined)

                storeLocalData('storage_'+post_id, new_value);

        },1000);

    },false);

    addListener($('comment'),'blur',function(){

        clearInterval(storeTimer);storeTimer=undefined;//焦点移开就清楚定时器

    },false);

    addListener($('commentform'),'submit',function(){//绑定评论表单的 onsubmit 事件

        storeLocalData('storage_'+$('comment_post_ID').value, '');//这里置为空就可以了

    },false);

}

清除存储我是通过submit事件来执行的，其实更好的方案是修改你的ajax评论代码，在评论发表成功后的回调函数中调用storeLocalData(‘storage_’+$(‘comment_post_ID’).value, ‘’);

对于存储评论内容，我暂时使用onchange，其实我觉得这样并不是最好的，因为onchange事件必须你修改过内容后而且使评论框失去焦点才会触发，但很有可能我们正在书写时浏览器就已经崩溃，此时就无法保存内容了。所以比较保险写的方法是绑定聚焦事件（onfocus），然后通过定时器每过一段时间就执行设置存储。

2010.12.14更新，已经改为onfocus事件与定时器结合方式。具体请详看上方代码。

具体的实例

关于本地化客户端存储的例子，像腾讯微博、新浪微博都有应用，你在微博发表框中输入一些内容，然后不要发表；接着关闭浏览器重新打开或者重载页面，就会发现已经输入的内容还会出现在输入框中。

本文所讲的wordpress的评论框存储，可以参看本博的输入框（仅限SimPaled主题，如果你在使用其他主题，请通过右下角的主题切换功能切换到SimPaled）。你可以在任意页面的评论部分输入一些内容，然后点击一下页面其他部分（目的是让评论框失去焦点，触发onchange事件）。你此时可以关闭浏览器或者刷新页面，输入的内容会自动补充进评论框里（请注意如果你以前访问过博客，先强刷浏览器清除JS文件的缓存）。

由于条件限制，我并没有测试过所有浏览器，所以请大家帮忙测试（主要是IE6、IE7），如有问题，欢迎即时告知。

注：已知IE7\IE6下貌似有问题，存储失败。请各位提供更多关于此的测试结果，谢谢。

• wordpress评论系统的回复、引用二合一 (32)
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (25)
• 让你的评论框自由粘贴代码 (66)
• 为评论框添加文字格式化编辑器 (116)
• 添加引用按钮——轻松打造属于你的WordPress引用回复功能 (32)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/a0

• 2012年01月19日, 爱疯迷Myang say: 很有用的功能，回头倒腾倒腾试试。
• 2011年10月3日, 图你妹 say: 这个不错啊，但是太麻烦了，能不能搞一个插件啊。
• 2011年08月23日, cailman say: 要的就是这个，回头研究研究，楼主写代码的习惯非常好啊。
• 2011年07月2日, liveme say: 强烈要求博主更新一下，要更加详细的教程啊
• 2011年06月16日, Bob say: 评论框旁边的那一列编辑栏实在是太帅了……不知道咋弄的……
• 2011年06月5日, Microhu say: 请问这两段代码放哪? function?还是?... 求解.
• 2011年05月12日, iphone5 say: 怎么做到的，看起来好复杂啊。mark一下，以后慢慢学
• 2011年04月10日, 扛一肩记忆 say: Hi，前辈 能不能指教一下，我如何才能获得你文章最后那幅图的效果，即在评论框的上面出现表情啊，字体啊，之类的东东。。。不甚感激。。。

文章最初以[博文]反对360，不代表支持QQ的名字出现在CB上，说实话，我不喜欢这个标题，这个标题稀释了我文章的主题，我写那篇文章的目的就是要赤裸裸的发表我反对360所作所为的立场上，在标题上就要体现——旗帜鲜明的反对不道德的360。

后来这篇文章从CB被转载到QQ校友上，被大量分享，吸引来了大量的评论，目前已有五千多评论。我大致看了下评论，绝大部分都是在激烈辱骂。更为让人愤怒的是，大量的网络暴民涌入到第一个分享此文的一个女生的空间里，大量发表辱骂言论，进行恶心的人身攻击。我晚上浏览了很多这些人的个人主页，一个个长得人模狗样的，这不由得让我想起一句话——

“在互联网上，没人知道你会幻化成一条狗！”

我博客是添加有访问统计的，所以我能获得很多转载我文章的论坛、博客地址。我抽时间看了很多这些转载地址上的评论，发现还是像IT科技类、互联网类论坛或者独立博客的小圈子中的会独立思考问题者居多，不像QQ空间和人人网的绝大部分用户，都是缺乏基本独立行事判断力的XX。

当然，所幸由于这篇文章被转载，都没直接标明我博客的地址，所以大量的SB和水军都没来到我这里。只是文章中留了个我的联系页面的地址，所以6号起床后打开QQ收到了一大堆的好友申请和MSN申请。

我的博客也已经被大量水军淹没，一百来条等待审核的评论。只不过大都是直接辱骂或者发乱码评论的。毫无自己观点，只是纯粹的对我人身攻击，并且言语下流的我直接删除了，其它一些我留了下来，仅当作不同观点。

你是腾讯的五毛吧，这么维护腾讯

我必须说明，我文中并无维护腾讯的意思。

只是，我文中并没有太多批判腾讯的言语。

因为，你要先记住我的文章标题——旗帜鲜明的反对不道德的360。没错，我标题中已明确，我写本文的目的是为了表达我反对360所作所为的观点。那么我有必要去诉说腾讯的不是吗？

如果我下次要写“旗帜鲜明的反对QQ”一文，那么文中会大量抛出我对腾讯种种恶行的所不耻的观点。

但是，抱歉，我本文仅仅想批判360。

我是腾讯的五毛吗？

我需要拿着五毛钱去发个帖吗？

请围观我博客以前的文章，我像个五毛吗？五毛有那么多闲情去写那么多根本都他妈的拿不到五毛的文章吗？

再说，周鸿祎都把人家水军费用提高到七毛一贴了，要顾我发帖，五毛、七毛的可不够啊！

你观点太主观了

这点说的太好了，我本来就是在我博客上写文章，观点当然只是代表我个人。

如果你一上来就把我绑架到一个中立的新闻媒体的高度，希望我能客观中立的点评两家公司的所作所为，那么抱歉，我不是，我做不到。我仅仅一个小博主，一个未毕业学生，一个有点热爱互联网的小网民。

所以，我的观点仅仅代表我自己，代表qiqiboy，代表liuqiqi，代表I’m qiqiboy !博客。除此，任何公司、媒体与我无关。

你希望我在批评360时也顺带着批评腾讯，对不起，那已超出本文设定主题范围。

im=internet message？没文化真可怕……

被转载的文章中我出现了一个错误，这个错误实在是不该，我现在实在难以解释我怎么写成了“Internet Message”。既然已经写错了，我接受错误，改正错误。

IM == Instant Message

这个错误被大量持相反观点的人和360水军揪着不放，恶语相向，“没文化”、“SB枪手”、“SB五毛”。。。

如果这个就说明我文化程度不高，那么我无言以对，好在我现在还在学校上学，那我就努力学习知识吧！至于，枪手、五毛、七毛或者其他毛的，对不起，我不是。

如果说一个常识错误就代表我是五毛，那么我也无可奈何。

但是，我想说，如果说揪着我的这个错误能激发你的G点，那你就尽情兴奋吧！！

我为什么写这样一篇文章

源于我文中已经抛出的种种观点，我一直讨厌360公司的所做所为。但是身边人很多人都在用360，我并不想费此口水向他们一一解释360的恶行。

所以，借此次机会，我想写一篇文章来表明我的观点，当然，主要是想让周围认识的人看看的，因为他们可能网上看到别人对360公司的指责批评，会觉得这篇文章是枪文，是陷害360公司，而我亲自写一篇，让都是认识的人看看，我的亲戚、朋友、同学等等，他们至少会多少相信我所说的吧。所以我才在文章中留下了我的联系页面地址，是希望认识我的人，加过我QQ的那些已经决定不再使用QQ的能加上我的MSN。结果，文章被转载后，却招来了很多陌生人来加好友。

至于造成这么大风波，非我能预料。

想用QQ，又想摆个高姿态，您装逼就到此吧！

世界第八大奇迹：两亿网民忍辱负重上QQ！

如果还有人来骂，那我只怪我手贱，我脑残得去写那篇文章。

观点不同，可以各自表述，但是拒绝激烈的人身攻击。

这是对我直接人身攻击的，邮箱fanconglei@yahoo.cn

这个是两篇新闻对比，请看红框中所圈部分，评论数，CB的新闻正常情况下只有几十条评论，最多一百多条。而我这篇新闻的评论却达到了四百余条（截图系六号所截，七号CB一度关闭评论，至八号中午已有四百五十余条。其实应该会远多于这个，因为中午时评论数就是324了，一直到晚上都没变过，不知怎么回事，包括热门评论的支持反对数，也都不变了。），多出的这二百多条评论从哪里来？当然是360顾的七毛党水军啦！！

欢迎大家去围观CB上的评论，地址在这儿http://cnbeta.com/articles/126332.htm

这个是某人从CB转载到了QQ空间，被很多人分享。截至6号下午四点，已有5024次分享，5160人发表观点，三千多条评论（看来大家讨论很激烈呀）。当然，依然是绝大部分都是辱骂博主和腾讯公司的。还好，没多少人顺藤摸瓜摸来我博客骂我。

QQ空间及校友围观地址：http://pengyou.qq.com/index.php?mod=usershare&act=show&sid=1289008702&u=c265e4bd629300c559ad69fcf3c35da66d8ff7b507f66077&ADTAG=HZ_feed_T2

一些真相

当然，也有一些人专门加我好友，专门说一句支持我，赞同我的观点。我很感谢这些网友。

• 旗帜鲜明的反对不道德的360 (114)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• WordPress技术: 无限多级楼层显示 (61)
• wordpress评论系统的回复、引用二合一 (32)
• 永不丢失的评论 – 打造wordpress评论框的本地化存储方案 (115)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/9l

• 2011年11月26日, Bob say: 其实不用理会，这个社会啥人都有，just take it easy...
• 2011年08月26日, 电视剧里开始 say: 不错，原来的360还不错，我在做网吧网关是，把电脑里的所有电脑都撞上了360，但是这两年再也不装了，360的用户都是死忠，他们愿意用就用吧。反正是他的电脑，不用为他们发愁。
• 2011年08月14日, 断竹挽风 say: 360明显的外挂行为，直接将QQ的安全页给绑架了。
• 2011年07月16日, 代码回音 say: 坚持表达自己的观点
• 2011年06月7日, 熊猫小子 say: 额，网络很可怕。还是潜水比较好。
• 2011年05月16日, sprityaoyao say: 哎，现在的网络呀，太恐怖了。我支持博主
• 2011年05月14日, Melody say: 天朝人的素质吗？
• 2011年04月24日, 千与琥珀 say: 唉，五毛是多了点

我开发了WP RC Reply AJAX插件后，使用本插件的同学，现在你只要更新到2.0.3，也可以使用WP RC Reply AJAX的公共接口了。

/**

    * @Overview WP RC Reply AJAX插件刷新接口

    * @author liuqiqi

    * @public interface: WIDGET.RCCMT

    * @param none

    * @version 1.0

    */

    if(window.WIDGET && window.WIDGET.RCCMT != undefined){

        window.WIDGET.RCCMT();

    }

如上面所示，你只需在合适时候调用WIDGET.RCCMT()这个函数就行了。为了防止插件失效或者其他原因导致接口失效，我加了个if判断。

具体的这个接口怎么使用呢？

比如，你可以写一个定时刷新的JS函数，通过此接口来设定一个固定时间刷新评论列表

/**

    * @Overview 定时刷新边栏最新评论列表DEMO

    * @author liuqiqi

    * @param time 刷新间隔，单位是分钟。默认值是三分钟

    * @date 2010/10/08

    */

    function setRefrush(_time){

        var time = (_time || 3) *60*1000;

        setInterval(function(){

            if(window.WIDGET && window.WIDGET.RCCMT != undefined){

                window.WIDGET.RCCMT();

            }

        }, time);

    }

    setRefrush(5);//调用函数，每五分钟刷新评论列表

就是这么简单。另外，我修改了一下willin kan的ajax评论方案中的JS文件，版本是1.29(貌似说是1.30不兼容3.0.1之前版本，所以我的修改基于1.29版本)。其实也就是在ajax评论的success方法中直接调用了接口函数，如下图

我修改过的文件，你可以直接到此下载，然后替换你以前的ajax评论中的JS文件即可：

http://u.115.com/file/f46b026a9

如果文件共享过期，请通知我。

至于这个效果的DEMO嘛。。你直接在我这里评论，然后到边栏最新评论处去瞅自己的评论吧。。哈哈。。

注意是SimPaled主题。ajaxPaled下。。嘿嘿。。。

• Widget Ajax评论查看回复插件-WP RC Reply AJAX 升到1.2.1 (73)
• 插件发布：边栏最新评论及ajax回复——WP RC Reply AJAX (188)
• 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (25)
• 修正关于Ajax comments的一个小问题 (46)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/92

• 2011年06月24日, iyunloian say: 看一下~~~~~~~~
• 2011年01月26日, QiQiBoY say: @demo 已经更新了，可以下载了
• 2011年01月26日, demo say: 下载失效了呢
• 2010年10月18日, QiQiBoY say: @宿迁学院论坛 我已经是全站ajax了。。http://qiqi.boy.im/ajax 任何人也都可以全站ajax了、、http://www.qiqiboy.com/plugins/enjoy-reading
• 2010年10月18日, 宿迁学院论坛 say: 你的WP要成全ajax站了~
• 2010年10月16日, QiQiBoY say: @MOPVHS 不是，是你的主题里的smokeeffect-min.js在IE8下出错，导致插件的JS无法运行。。。你要解决你的这个JS在IE8下的错误才行
• 2010年10月16日, QiQiBoY say: @MOPVHS 刷新浏览器就好了。。是JS没加载。。
• 2010年10月16日, MOPVHS say: 对了，Chrome下： WordPress 先生 嗨，这是一条评论。要删除一条评论...» IE8下： WordPress 先生 嗨，这是一条评论。要删除一条评论...

我说过，我判断spam的标准就是看有无gravatar头像，无头像的统统垃圾评论，有头像的是spam也要被我拉出来。但是，从昨天起，我发现我不能这么做了，因为新一代、令人超级无语的spam二代出炉了。。。

铛铛☭☭☭☭☭☭☭☭☭☭….(没想到搜狗还能打出党的标志)。。

请围观

这些spam个个顶着一个好看、养眼的、不是帅锅就是木女的头像，操着一口带着你的博客名的地道崇拜语，一会说“天来看你的博客，一会说自己的博客太烂，一会儿又装作无辜的仿佛小白问些二里吧唧的问题。。。。。

炯炯。。。。这些spam二代。。。多的不说，大家自己看。。。。

以后的spam不朝这些spam看齐，你说你还好意思出来混吗？

• 围观wordpress中文圈内好玩的spam (133)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• WordPress技术: 无限多级楼层显示 (61)
• 修正关于Ajax comments的一个小问题 (46)
• wordpress评论系统的回复、引用二合一 (32)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/8u

• 2011年11月27日, 小米04 say: 直接在把他们IP封了 现在很少有了
• 2011年06月25日, 情歌 say: 为毛我收到的都是英文的。。。。看也看不懂
• 2011年05月19日, EIIE say: 都是AOL的邮箱...
• 2011年05月19日, 明月登楼 say: 呵呵，这spam也太给力了吧！人工生成的吗？如果是机器自动生成的，那可是太牛X了！
• 2010年10月27日, 唱歌的笨金鱼 say: spam年年有，今年特别多
• 2010年10月24日, zhy say: 真是太敬业了，都不知道拿他怎么办了~~要是我一天最多一个就放过了——不知道你封了IP没有
• 2010年10月16日, Suyos say: @liuqiqi 不过不怕。我有小墙，小墙拦截了这类的。杯具的是，英文的很明显的Spam却没判断出来。
• 2010年10月16日, liuqiqi say: @Suyos 嘿嘿。。。这下你如愿了。。

从12:26到13:26正好一个小时内换了三个马甲来发spam，看来时间把握这么精准，一定是定时spam的。

类型二，无知装逼型

特点，客客气气的先说句客套话，然后就出现个傻逼的问题“你用的什么主题？”主题信息底部写有。

类型三，谎话连篇型

其实一分钟也没在俺博客呆过。

类型五，纯粹废话型

要是spam也能坐上沙发，那我真是发那篇文章时倒霉到家了，这都能和spam遇上！！！

类型六，毫不羞耻吹捧型

其实夸赞俺，俺也很高兴，但是别发错文章呀，这个spam却正好发在一篇写我上当受骗的文章下面，靠，我倒霉你还在下面叫好！！！

类型七，论坛灌水积分党

这种贴子的出现源于很多人士想在天涯看连载小说，但是天涯一些论坛的功能只有一定积分才能使用，于是出现了一大堆类似的帖子，专门用来刷积分。

但是，拜托，我这里不是天涯论坛。

类型八，狗咬狗

我想说的是，WP的垃圾评论早已出了，akismet。

类型九，两个蠢蛋型

你老板够蠢，居然不知道你在假装工作，你更蠢，明知道他在假装付你薪水，还为他工作浪费时间。

类型十，非人类

这位发评论的都说了，人家是咔咕。

类型十一，类新手型

刚开博客的新手大概都会有段时间喜欢去别人博客留这样的话

类型十二，alibibi

此位域名实在太个性。马云看到了就震精了。

类型十三，让我无语型

男科医生都来了，还自称砖家，请问前列腺能治吗？

• 超级无语的新一代中文spam (87)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• WordPress技术: 无限多级楼层显示 (61)
• 修正关于Ajax comments的一个小问题 (46)
• wordpress评论系统的回复、引用二合一 (32)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7u

• 2011年03月25日, 布布 say: 总结的很多啊，看来是因为你的博客比较火。 我的就不是你这样了，里面最多的就是一大堆英文的那种，虽说是英文，但看起来好像有中文直接翻译的影子，弄不好也是国人所为。
• 2011年02月24日, 何苦呢 say: 最后一个男科医生 我也遇到过哦 哈哈
• 2010年10月12日, Hello WordPress! - I'm qiqiboy ! say: [...] 2010.08 我继续折腾，期间我修改trackback样式，统一评论外观，也分享了这个修改中的一些涉及到的代码补充《修改trackback样式，统一评论外观》中代码。这期间，我对ajax兴趣逐渐浓厚起来，所以便有了这个博客加入若干Ajax效果。在折腾ajax、延迟加载中，我遇到了页面文档初始化的一些问题，于是查阅文档便有了这篇JavaScript页面文档初始化 window.onload的替代办法；后来，我有了在侧边栏开发ajax即时评论的想法，于是便出现了【效果测试展示篇】Ajax版即时侧边栏评论回复功能，掉了几天大家的胃口，然后又简单的蜻蜓点水般【原理指导篇】无时不在的评论 侧边栏即时回复功能。八月份期间，我的SimPaled主题基本上成型了，于是我将它介绍了给大家【SimPaled篇】Introduce My Blog Theme For You。很哟意思的是，我看到了腾讯微博的头像悬浮显示，于是便仿了下来仿腾讯微博式访客信息悬浮显示（JavaScript & ajax）。基于边栏评论，为了方便大家，我开发了插件发布：边栏最新评论及ajax回复——WP RC Reply AJAX。后来发现wordpress的无限嵌套的邮件回复有问题，于是有了完美解决wordpress无限嵌套<二> 【邮件发送相关问题】。因为SimPaled主题用到了很多延迟加载，所以有同学问我延迟加载怎样实现，于是我分享了自己当时的思路JS延迟加载机制函数(Lazyload)。八月份最后一件事大概要算我在博客中曝光了中文spam里的那些极品好玩的spam吧围观wordpress中文圈内好玩的spam [...]
• 2010年10月6日, Google不爱我 say: 我對付這些spamer的措施就是把有意思的放出來圍觀～不過至今還沒遇到這裡這麼搞喜的……感覺我的那個地方沒有spam的話還蠻冷清的
• 2010年10月3日, 超级无语的新一代中文spam - I'm qiqiboy ! say: [...] 接上一篇《围观wordpress中文圈内好玩的spam》，最近又发现了好好多多的spam，但是一直觉得他们新意不够，总是那一套：“国庆愉快”、“中秋快乐”、“拜读您的大作了”、“博主最近很少更新了呵呵”、“学习了，马上折腾去”、“我为啥总是出错呢，博主您就折腾的这么好”。。。。 [...]
• 2010年09月18日, 小王子 say: 没办法啊确实让人愤恨，现在开始人肉输入垃圾评论的时代了，怎么办，怎么禁止？
• 2010年09月13日, IM路人 say: 我勒个去，看到这些就恶心，厚颜无耻，一群自以为是的SEOer，一边玩蛋去吧
• 2010年09月13日, 毕扬 say: 互访么~互访也很必要，就像我现在不就是在做援交　哈哈 @QiQiBoY

但是，后来出现一个问题，让我不得不重新思考无限嵌套这一方式，从而也就有了本文——《完美无限嵌套<二>》。这个问题就是邮件回复问题。了解我实现无限嵌套原理的，应该的都知道其实在对最后一层进行回复时，是在变相的对倒数第二层进行回复。很多人可能在使用willin修改的邮件发送方式，即是通过hook到comment_post，获取新评论的父级评论ID，如果ID不为0，说明这是一条子评论，然后就将邮件发送给父级评论。父级评论的邮箱是来自get_comment()函数获取数据库查询。前面已经说了，对最后一层的回复是变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

我注意到上面的问题，来自于一次我在开发自己的ajax评论时对我在最后一层的评论进行回复测试时，结果zww跑来跟我说，收到一大堆我的邮件。我研究了一下，发现存在上述问题，在搁置了N天后，今天我终于解决了它。

这个问题的解决需要换个思路，不能还是局限于通过查询一条评论的父级ID来判断需不需要发送邮件。我注意到我的每条评论中都有@回复链接，而其中的href中就包含了被回复者的评论id，所以我就从这里着手，想通过获取评论中的存在的@回复来进行邮件发送。而且这种方式，你可以一次回复多个人，比如你想在一条评论里同时回复A、B、C三个人，你只需要依次点击A、B、C下面的reply按钮（如果不想让评论框出现在这三人任何一人下方，则点击一下取消回复，评论框会回到底部，这条回复会被当做一条主评论。但是，别担心，评论框内容不会清空，你的回复依然会通过邮件发送至这三人），然后书写回复内容即可。

主要代码如下：

   1: function comment_mail_notify($comment_id) {

   2:     $comment = get_comment($comment_id);//根据id获取这条评论相关数据

   3:     $content = $comment->;comment_content;

   4:     //对评论内容进行匹配

   5:     $match_count=preg_match_all('/<;a href="#comment-([0-9]+)?" rel="nofollow">/si',$content,$matchs);

   6:     if($match_count>;0){//如果匹配到了

   7:         foreach($matchs[1] as $parent_id){//对每个子匹配都进行邮件发送操作

   8:             SimPaled_send_email($parent_id,$comment);

   9:         }

  10:     }elseif($comment->;comment_parent!='0'){//以防万一，有人故意删了@回复，还可以通过查找父级评论id来确定邮件发送对象

  11:         $parent_id=$comment->;comment_parent;

  12:         SimPaled_send_email($parent_id,$comment);

  13:     }else return;

  14: }

  15: add_action('comment_post', 'comment_mail_notify');

然后就是发送邮件的函数，简单给个思路

   1: function SimPaled_send_email($parent_id,$comment){

   2:     $admin_email = get_bloginfo ('admin_email');//管理员邮箱

   3:     $parent_comment=get_comment($parent_id);//获取被回复人（或叫父级评论）相关信息

   4:     $author_email=$comment->;comment_author_email;//评论人邮箱

   5:     $to = trim($parent_comment->;comment_author_email);//被回复人邮箱

   6:     $spam_confirmed = $comment->;comment_approved;

   7:     if ($spam_confirmed != 'spam' &;& $to != $admin_email && $to != $author_email) {

   8:         ....//自由发挥

   9:         wp_mail( $to, $subject, $message, $headers );

  10:     }

  11: }

至此，就完美解决了邮件发送混乱这一问题。你可以在我这里测试，你的任何回复都会准确无误的发送至你要回复的人。

需要注意的是，对评论内容进行匹配@回复相关内容时，你的@回复需要符合上面正则里的规则。我建议，在向评论框里添加@回复时，依照此格式

   1: <;a href="comment-"$id>@XXX </a>

你不用画蛇添足去往里面添加什么rel=”nofollow”，因为wordpress会自动给评论里的链接添加这一属性。

然后，当然，只以上部分两段代码就完了吗？如果有人引用了另外一条带@回复的评论，是不是也应该先剥离<blockquote>标签内容里的内容呢？否则，被引用人所回复的那个人不是也会被发送一封邮件吗？这些不是本文内容，所以不在此讨论，仅作提醒。

• 完美解决WordPress嵌套回复的层深问题（无限嵌套）<一> (80)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• WordPress技术: 无限多级楼层显示 (61)
• wordpress评论系统的回复、引用二合一 (32)
• 永不丢失的评论 – 打造wordpress评论框的本地化存储方案 (115)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/7n

• 2011年01月18日, wisfern say: 正好是我要的功能，有时间再回头研究。
• 2010年10月17日, WordPress打造无限嵌套评论 | WordPress Of MOPVHS say: [...] @QiQiboy：《完美解决wordpress无限嵌套<二> 【邮件发送相关问题】》 [...]
• 2010年09月9日, 安装VnstatVPS流量监控与伪无限嵌套 | 邪罗刹的菠萝阁 say: [...] > 完美解决WordPress嵌套回复的层深问题 - http://www.qiqiboy.com/2010/07/07/erfe...s.html > 完美解决wordpress无限嵌套 - http://www.qiqiboy.com/2010/08/23/perfect-solut..ted-2.html [...]
• 2010年09月5日, QiQiBoY say: @zwwooooo 恩，确实，谢谢提醒哈。
• 2010年09月5日, zwwooooo say: 折腾了，文章代码有个小错误，第3行代码：$content=comment->comment_content;少了$
• 2010年09月5日, QiQiBoY say: @winy 嵌套层数足够深，就不会出现邮件发送混乱问题。你的不用改了。

  变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

  这句在我这里是指如果你对第五层进行回复，其实是在对第四层进行回复，所以如果使用wilin原来的邮件回复，就会发送到第四层那个人那里去了。
• 2010年09月5日, winy say: @QiQiBoY 就是这个意思
• 2010年09月5日, winy say: @QiQiBoY 没说清楚，我的意思是如果嵌套层数足够深，就不会出现

  变相地对倒数第二层进行回复，所以此时邮件全部发送到倒数第二层那里去了。

  这种情况了，是不是？

1.在评论下插入“回复”按钮

这个当然是能够直接从后台输出页面时加上最好了。就拿现在最流行的那个带头像最新评论来说，可以在foreach循环输出部分的加入回复按钮。这个按钮包含的动作处理就用“onclick”，所以要在此添加

   1: <a id="rc_comment-reply-link" href="javascript:void(0)" onclick="rc_reply(arg1,arg2(,...))">回复</a>

调用函数rc_reply()中我们要传递进去一些需要的参数，那么需要什么呢？因为点击回复按钮后我们是要在此插入评论的表单，而wordpress的发表评论表单包含用户名（author）、邮箱（email）、网址（url）和评论框（comment），但是除此之外，其实还有两个参数，他们是隐藏的input，分别是评论所在页面ID（comment_post_ID）和嵌套时父级评论ID（comment_parent）。这两个参数是必不可少的，author email url则不是必须的，如要你要实现自动填入cookie中访客相关信息，则可以将这三个也当做参数传递。所以，完整的回复按钮如下

   1: <;a id="rc_comment-reply-link" href="javascript:void(0)" onclick="rc_reply('<?php $comment->comment_ID ?>', '<?php $comment->comment_post_ID ?>')">回复</a>

2.点击回复后在评论下插入评论表单

这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接将表单以串形式赋值到一个js变量，点击回复后直接在页面中插入。这两种方法各有各的好，我是使用第二种，这种方法·较第一种更好接受参数。

一个完整的大致的表单如下：

   1: <div id="rc_respond">

   2:     <form id="rc_commentform" method="post" action="http://你的域名/wp-comments-post.php"><!--你的域名最好手写上去，如果使用第一种方法，则可以通过wp的the_bloginfo获取博客地址，使用第二种方法则可用window.location.host等。建议直接写上自己的博客地址-->

   3:         <p><input type="text" tabindex="1" size="22" value="" id="rc_author" name="author"><label for="author"><small>Name</small></label></p>

   4:         <p><input type="text" aria-required="true" tabindex="2" size="22" value="" id="rc_email" name="email"><label for="email"><small>Mail</small></label></p>

   5:         <p><input type="text" tabindex="3" size="22" value="'" id="rc_url" name="url"><label for="url"><small>Website</small></label></p>

   6:         <p><textarea tabindex="4" rows="5" cols="35" id="rc_comment" name="comment"></textarea></p>

   7:         <p><input type="submit" value="Submit" tabindex="5" id="rc_submit" name="submit">

   8:         <input type="hidden" id="rc_comment_post_ID" value="'" name="comment_post_ID">

   9:         <input type="hidden" value="" id="rc_comment_parent" name="comment_parent"></p>

  10:     </form>

  11: </div>

使用第种方法你就将这个表单所在的div#rc_respond加上style=”displaynone“。如果是使用第二种方法，则可以在js中将这个变成字符串形式交给一个变量。

3.相关JS处理部分

本来想要贴一段代码的，但是后来发现这段代码和具体的页面结构结合很深。由于大家的模板千变万化，所以直接贴出某一具体的代码很可能会误导一些人，所以我就说一下JS里需要处理的部分。首先是要将表单插入到正确的位置，如果你的表单预先输出在页面上，此时就可以使用结点操作将表单移动到需要的位置（如js的appendChild、insertBefore等，以及jQuery的一些结点操作）；如果你的表单还是一窜字符串存在js变量里，则可用innerHTML方式写入到页面的位置上或者是jQuery的html()方法。当然，最重要的是向表单中的comment_post_ID和comment_parent=中填入相关参数，这两个参数值已经是作为函数的参数传递进来了，只需要将值填入即可。

4.解决嵌套问题

边栏的最新评论你并不知道是不是最后一层回复了，即使知道，我们也要想办法能够对其进行回复。如果不对嵌套做相关处理，如果是最后一层评论，你即使回复了，也是无效的，仍然会被当做主评论显示。所以我们要知道一条评论目前的所在层深。怎么取得呢？我们可以循环查询数据库中一条评论表中的commet_parent键值，如果不为0，则说明他有父级评论，则再去查询它的父级评论的comment_parent键值，依次循环。

   1: //这段代码依然是加在后台foreach循环中

   2: $comment_depth = 1;//层深初始化为1

   3: $tmp_c = $comment;$comment_parent

   4: while($tmp_c->;comment_parent != 0){//循环查询

   5:     $comment_depth++;

   6:     $tmp_c = get_comment($tmp_c->comment_parent);

   7: }

   8: //关键处，这里依然是用了父级ID替换方法，将对最后一层的回复替换为对倒数第二层的回复

   9: if($comment_depth <; get_option('thread_comments_depth'))

  10:     $comment_parent=$comment->;comment_ID;

  11: else $comment_parent=get_comment($comment->;comment_parent)->comment_ID;

然后你就可以用$comment_parent去替换第一步中的$comment->comment_ID。

做完以上四步，基本上边栏回复的雏形就完成了。当然，此时你回复后点击提交会跳转刷新页面，并不是ajax方式，其实这个也简单，你甚至可以照搬你文章评论处的ajax提交方式，只需改改相关id值即可。

OK，具体中有什么问题还可以留言询问，我尽量解决。

• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (107)
• 添加引用按钮——轻松打造属于你的WordPress引用回复功能 (32)
• WordPress技术: 无限多级楼层显示 (61)
• wordpress评论系统的回复、引用二合一 (32)
• 永不丢失的评论 – 打造wordpress评论框的本地化存储方案 (115)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/76

• 2011年03月30日, 颠覆你的wordpress体验-ajaxPaled(全站ajax，杂志型布局) | 忘川彼岸 say: [...] 【原理指导篇】无时不在的评论 侧边栏即时回复功能 (24)这个表单插入到页面上你有两种选择，一是预先在页面上输出一个完整的评论表单，如在footer.php处，注意要在<body>标签闭合前，然后设置display:none，使之在页面上隐藏。二是直接… [...]
• 2010年08月16日, 【SimPaled篇】Introduce My Blog Theme For You - I'm qiqiboy ! say: [...] 边栏的最新评论支持翻页浏览、单条评论查看、即时ajax回复等功能。其中最新文章(recent post)部分支持more无限下滚查看。——注：边栏回复参考《无时不在的评论 侧边栏即时回复功能》 [...]
• 2010年08月15日, 超人 say: @QiQiBoY 哈哈。。你在ad
• 2010年08月15日, QiQiBoY say: @超人 额。。我试用后觉得很方便的功能。。 有了这个，我回复你这三条不在一个页面的评论，在侧边栏不用翻页就可以全部回复了。。
• 2010年08月15日, 超人 say: 这功能有点奢侈了。。 基本用不上啦~
• 2010年08月15日, 小邪 say: @liuqiqi 拖出去切JJ ~
• 2010年08月14日, 江流 say: 这个挺实用的 不过我不折腾了- -
• 2010年08月14日, QiQiBoY say: @Alan 哈哈，无折腾，不WP。。。