[{"template":"item","lang":"zh-CN","langs":["zh-CN"],"summary":{"raw":"上一篇关于 Ajax 评论的文章中有两个缺点，分别是“不能输出合适的样式”和“没有回复链接”。下午对博客进行技术维护，现已基本 OK 了（对于我来说）。","html":"

上一篇关于 Ajax 评论的文章中有两个缺点，分别是“不能输出合适的样式”和“没有回复链接”。下午对博客进行技术维护，现已基本 OK 了（对于我来说）。

\n"},"visible":true,"routable":true,"title":"WordPress 完美 AJAX 嵌套评论","comment":{"enabled":true,"reply":false},"discuss":{"enabled":true},"keywords":[],"webmention":{"enabled":true,"accept":true,"callback":{"secret":{"hash":{"sha256":"44bb9da44b424c6dfc9233819e907029ff2ccdfaa89919d3696ddf8db7ff6647"}}}},"pingback":{"enabled":true,"accept":true},"slug":"wordpress-perfect-ajax-thread-comment","taxonomy":{"category":["WordPress"],"tag":["Ajax","jQuery","WordPress"],"series":[]},"route":"/wordpress-perfect-ajax-thread-comment/","toc":{"enabled":false},"published":{"date":"2009-06-04 20:27"},"modified":{"date":"2024-08-22T06:03:56.000Z"},"data":{},"author":[{"email":{"value":{"encrypted":"ODgyZjdiZDg4OTVmMjllOGZkNmFmYg==","algorithm":"aes-256-gcm","iv":"067f6d66f2ba5dd50c8443be"},"hash":{"md5":"8770854a9222b6bf1ee195220793bcf1"}},"url":"https://dallas.lu","name":"达拉斯・卢","lang":"zh-CN","user":"dallaslu"}],"contributor":[],"sponsor":[],"image":[],"audio":[],"video":[],"photo":[],"content":{"html":"

\n\n

页面 js 代码请参考上篇文章，或者参见文章结尾的演示文件。

新增一个 comment-ajax.php

依然是需要把 WordPress 根目录下的 wp-comment-post.php 复制一份，另存为 comment-ajax.php ，存到根目录（还需在 js 中指定该文件绝对路径）。

干掉 comment-ajax.php 中的第 84、85、87 行。把下面的代码复制到该文件末尾的 ?> 之前。

//$location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;\n//$location = apply_filters('comment_post_redirect', $location, $comment);\n\n//wp_redirect($location);\n\n$comment_depth = 1;   //for attribute class of new comment,such as \"depth-2\"\n$tmp_c = $comment;\nwhile($tmp_c->comment_parent != 0){\n\t$comment_depth++;\n\t$tmp_c = get_comment($tmp_c->comment_parent);\n}\n

接着，打开你的主题中的 comments.php 看一下。搜索 wp_list_comment ，找到 wp_list_comment() 或者类似 wp_list_comment('callback=dallas_list_comment') 这样的代码。如果参数中没有 callback 字样：请把下面的代码粘贴到 comment-ajax.php ~~中上段代码之后~~ 的末尾， ?>之前后（感谢zwwooooo同学的提醒）。

<ul><li> \n\tid=\"li-comment-<!--?php comment_ID() ?-->\"\n\tstyle=\"display:none\">\n<div id=\"comment-<?php comment_ID(); ?>\"></div></li></ul>\n

如果你的 comment.php 中 wp_list_comment 的函数中有 callback ，那么请打开主题下的 function.php （这种情况下没有这个文件就算是见鬼了）。找到与 callback 同名的函数，将其中的 <li>与之间</li> 的夹杂 php 代码的 html 部分复制过来。将其中两个函数 comment_class 和 comment_reply_link 的参数改成：

//……\ncomment_class('',$comment_id,$comment_post_ID);\n//……\ncomment_reply_link(\n\tarray(\n\t\t'depth' => $comment_depth,\n\t\t'max_depth' => get_option('thread_comments_depth')\n\t),$comment_id,$comment_post_ID)\n//……\n

实际就是改成与我给出的代码相似的样子。就是这些，再按照上篇文章中搞定 js 就 OK 了。

还可以更完美点儿？

很多人喜欢评论呈现隔条变色的样式，所以 WordPress 为每条评论都添加了 odd alt thread-odd thread-alt 或者 even thread-even 等 class 。现在唯一的瑕疵就是，comment-ajax.php 输出的都是 even、thread-even ……

由于不在主循环里，获取这些值就麻烦了。所以还是交给 js 处理吧。上篇文章中的 js 代码，修改 var $newc = $child_list.find('li:last'); 为：

var $newc = $child_list.find('li:last');\nif($newc.prev().length){\n\tvar $c = $newc.prev();\n\tif( $c.hasClass('even')){\n\t\t$newc.removeClass('even').addClass('odd alt');\n\t}\n\tif( $c.hasClass('thread-even')){\n\t\t$newc.removeClass('thead-even').addClass('thread-odd thread-alt');\n\t}\n}\n

本文贴出的代码，依旧与本博客所使用的不一样。
给出的 js 代码需要 jQuery 框架。
如果你还使用了其他框架，可能因命名空间问题导致 js 失效。
js 代码不适用于所有主题，如发生页面错乱，请自行修改。
如果有人应用成功，别忘记通知我下～

完整的参考文件

comment-ajax

该 php 文件修改自 WordPress 2.8 的 wp-comment-post.php ;
在 WordPress 2.8 + Default 下测试通过。
在 WordPress 2.8 中，生成的回复链接有误，没有相关 js 则不能工作，原因未知。

\n","headings":[{"level":2,"text":"新增一个 comment-ajax.php","id":"新增一个-comment-ajaxphp"},{"level":2,"text":"还可以更完美点儿？","id":"还可以更完美点儿"},{"level":2,"text":"完整的参考文件","id":"完整的参考文件"}],"meta":{"prism":true},"links":[{"href":"https://dallas.lu/wp-list-comment-not-perfect-ajax/","type":"mention"},{"href":"http://zwwooooo.com/","type":"mention"}]},"newer":"/easy2hide/","earlier":"/wp-list-comment-not-perfect-ajax/"},{"template":"item","lang":"zh-CN","langs":["zh-CN"],"summary":{"raw":"WordPress 2.7 开始原生支持嵌套评论了，但是一直没见人介绍相关的 AJAX 实现办法。或不嵌套，或用插件。实际上简单修改就能做到。","html":"

WordPress 2.7 开始原生支持嵌套评论了，但是一直没见人介绍相关的 AJAX 实现办法。或不嵌套，或用插件。实际上简单修改就能做到。

\n"},"visible":true,"routable":true,"title":"WP默认评论之非完美 AJAX","comment":{"enabled":true,"reply":false},"discuss":{"enabled":true},"keywords":[],"webmention":{"enabled":true,"accept":true,"callback":{"secret":{"hash":{"sha256":"44bb9da44b424c6dfc9233819e907029ff2ccdfaa89919d3696ddf8db7ff6647"}}}},"pingback":{"enabled":true,"accept":true},"slug":"wp-list-comment-not-perfect-ajax","taxonomy":{"category":["WordPress"],"tag":["Ajax","jQuery","WordPress"],"series":[]},"route":"/wp-list-comment-not-perfect-ajax/","toc":{"enabled":false},"published":{"date":"2009-06-01 23:16"},"modified":{"date":"2024-08-22T06:03:56.000Z"},"data":{},"author":[{"email":{"value":{"encrypted":"ODgyZjdiZDg4OTVmMjllOGZkNmFmYg==","algorithm":"aes-256-gcm","iv":"067f6d66f2ba5dd50c8443be"},"hash":{"md5":"8770854a9222b6bf1ee195220793bcf1"}},"url":"https://dallas.lu","name":"达拉斯・卢","lang":"zh-CN","user":"dallaslu"}],"contributor":[],"sponsor":[],"image":[],"audio":[],"video":[],"photo":[],"content":{"html":"

WordPress 2.7 开始原生支持嵌套评论了，但是一直没见人介绍相关的 AJAX 实现办法。或不嵌套，或用插件。实际上简单修改就能做到。

\n\n

2009/06/13 更新：
\n修正的 php 和 js 请参见《\n

关于 AJAX 评论，忧伤的 Xiaorsz 同学，有篇《使用 jQuery 实现 wordpress 的 Ajax 留言》。这篇文章之所以不适合使用 WordPress 默认评论函数，就是因为这个函数处理的比较复杂。

WordPress 函数 wp_list_comments()

这个函数生成的评论列表，每条评论都有丰富的 class 属性。还需要引入一段 js 来完成 reply 的功能。当然，这个 reply 的链接没有 js 也一样工作。

这个问题的稍难之处就在于，提交评论之后要返回合适的单条评论数据，而且需要网页的 js 来配合，呈现评论列表应有的样式。和 Xiaorsz 的教程一样，下面使用 jQuery 来实现。

PHP 文件

打开 WordPress 根目录下的 wp-comment-post.php 。将84-87行删除掉，另存为 comment-ajax.php 。这段代码是处理评论成功后跳转的。

下面这段代码改自 wp_list_comment() 的示例，比较接近默认。如果你在处理评论时回调了自己的函数，拷贝来即可。

function ajax_comment_output($comment, $args, $depth) {\n\t$GLOBALS['comment'] = $comment; ?>\n\t<li  id=\"li-comment-\" style=\"display:none\">\n\t<div id=\"comment-\">\n<div class=\"comment-author vcard\">\n\t\t<?php echo get_avatar($comment,$size='32',$default='' ); ?>\n\t\t<?php printf(__('<cite class=\"fn\">%s</cite>'), get_comment_author_link()); ?></div>\ncomment_approved == '0') : ?>\n         <em>&nbsp;</em>\n<div class=\"comment-meta commentmetadata\">\n            <a href=\"comment_ID ) ) ?>\"></div>\n<?php\n}\n\najax_comment_output($comment,null,null);\n

这坨代码粘到 comment-ajax.php 最后的 ?> 前面。

JavaScript 文件

也是看注释修改吧。

$(\"#commentform\").submit(function(){//comment-form 为评论表单 ID\n\tpass = true;\n\tvar $text = $(\"#comment\"); //评论内容输入框\n\tvar $form = $('#commentform');\n\tvar $respond = $('#respond'); //整个评论输入区，包括表单、提示什么的\n\tvar $submit = $('#submit'); //提交按钮\n\n\t//进度条，请自行在 CSS 中设定样式\n\tvar loading = '\n\n';\n\n\t/*\n\t * 简单验证表单数据\n\t */\n\t$(\"input[aria-required=true]\").each(function(){\n\t\tif(this.value == \"\") {\n\t\t\tthis.focus();\n\t\t\tpass = false;\n\t\t};\n\t});\n\tif (pass && $text.val()==\"\"){\n\t\t\t$text.focus();\n\t\t\tpass = false;\n\t\t};\n\n\t//开始处理评论\n\tif (pass){\n\t\tjQuery.ajax({\n\t\t\turl: 'https://dallas.lu/comments-ajax.php', //绝对路径\n\t\t\tdata: $form.serialize(),\n\t\t\ttype: 'POST',\n\t\t\tbeforeSend:function(){ //发送数据前\n\t\t\t\t$submit.after(loading);\n\t\t\t\t$submit.hide();\n\t\t\t\t$('#comment-load').show('slow');\n\t\t\t\t$form.find('input,textarea').attr(\"disabled\",true); //表单组件设置为不可用\n\t\t\t},\n\t\t\terror:function(request){ //出错的情况\n\t\t\t\talert(request.responseText); //我比较懒，直接蹦个对话框\n\t\t\t\t$('#comment-load').remove();\n\t\t\t\t$submit.show();\n\t\t\t\t$form.find('input').removeAttr('disabled'); //表单可用\n\t\t\t},\n\t\t\tsuccess:function(data){ //评论发表成功\n\t\t\t\t$('#comment-load').hide(\"slow\").remove(); //干掉进度条\n\t\t\t\t$submit.show();\n\t\t\t\t$text.val(''); //清空文本域中评论内容\n\t\t\t\tvar $parent = $respond.parent(); //评论区父元素\n\t\t\t\tvar $child_list; //评论列表\n\t\t\t\tif(!$('#commentlist').length){ //没有评论则加个列表先。此ID请自行添加\n\t\t\t\t\t$respond.before('\n\n');\n\t\t\t\t}\n\t\t\t\tif($parent.attr('id')=='main'){ //父元素若是main(与我模板有关)\n\t\t\t\t\t$child_list = $('#commentlist');\n\t\t\t\t}else{ //回复他人评论（嵌套）的情况\n\t\t\t\t\tif(!$parent.find('ul.children').length){ //还没有子评论则添加个列表先\n\t\t\t\t\t\t$respond.before('\n\n');\n\n\t\t\t\t\t\t// class 添加 parent 值。WP默认就是这么干的\n\t\t\t\t\t\t$parent.addClass('parent');\n\t\t\t\t\t}\n\t\t\t\t\t$child_list = $parent.find('ul.children:first');\n\t\t\t\t}\n\t\t\t\t$child_list.append(data); //新评论终于出来了\n\n\t\t\t\t//处理评论计数。这个 comment-num 已经事先放好。\n\t\t\t\tif($('#comment-num').length){\n\t\t\t\t\t$('#comment-num').text(parseInt($('#comment-num').text())+1);\n\t\t\t\t}else{\n\t\t\t\t\t$('#comments').html('<span>1</span> 条');\n\t\t\t\t}\n\t\t\t\t//\n\t\t\t\tvar $newc = $child_list.find('li:last'); //刚添加的评论\n\t\t\t\t$newc.slideDown('slow',function(){\n\n\t\t\t\t\t//slideDown 过后 display 值为 block，影响了评论样式。\n\t\t\t\t\t$newc.css('display','');\n\t\t\t\t});\n\t\t\t\t//表单恢复可用\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\t$form.find('input,textarea').removeAttr('disabled');\n\t\t\t\t\t}, 3000);\n\t\t\t}\n\t\t});\n\t}\n\treturn false;\n});\n

为啥不完美

comment-ajax.php 中 comment_class() 此时无法生成完美的 class 属性。还有一个，没有 reply 链接。所以我在考虑，能否用自定义查询来输出新增加的评论？这个就是以后的话题了。

本文中代码和博客中所用代码有所不同，暂未通过任何类似 iso-8964 等组织认证。

所以很可能造成一些诡异现象……

","headings":[{"level":2,"text":"WordPress 函数 wp_list_comments()","id":"wordpress-函数-wp_list_comments"},{"level":2,"text":"PHP 文件","id":"php-文件"},{"level":2,"text":"JavaScript 文件","id":"javascript-文件"},{"level":2,"text":"为啥不完美","id":"为啥不完美"}],"meta":{"prism":true},"links":[{"href":"http://www.xiaorsz.com/jquery-wordpress-ajax-comments/","type":"mention"},{"href":"https://dallas.lu/wordpress-perfect-ajax-thread-commen","type":"mention","content":""}]},"newer":"/wordpress-perfect-ajax-thread-comment/","earlier":"/feedburner-and-site-ssl-certificates/"}]

标签: Ajax

WordPress 完美 AJAX 嵌套评论

WP默认评论之非完美 AJAX

2009