Home > WordPress > WP Trick > WordPress 评论的 @ 回复

WordPress 评论的 @ 回复

October 30th, 2008 Leave a comment Go to comments

难度:

所谓 @ 回复, 就是在评论者名字前添加 '@' 标记, 不涉及评论内容的, 生成带链接的代码并追加到评论输入框中.
我不喜欢那种结构复杂的, 难以维护的嵌套回复, 而是经常使用 @ 回复. 为此我写了个 JavaScript 脚本, 其中包括了这部分的处理.

参数, 信息来源

评论者 ID (为了取得评论者的名字)
评论 ID (因为点击 '@评论者名字' 后需要转跳到这个评论)
评论输入框 ID (代码需要追加到指定 ID 的输入框)

生成链接代码

为什么链接后方有一个空格和换行符号? 都是为了防止评论者名字和后面的内容贴在一块.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * @ 回复
 * @param authorId		评论者 ID
 * @param commentId		评论 ID
 * @param commentBox	评论输入框 ID
 */
function reply(authorId, commentId, commentBox) {
	// 评论者名字
	var author = document.getElementById(authorId).innerHTML;
	// 拼接成 '@评论者名字' 链接
	var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n/g, "") + '</a> \n';
 
	// 追加到评论输入框
	appendReply(insertStr, commentBox);
}

追加到评论输入框

为什么选择追加, 而不是插入? 人们习惯一个挨一个地进行回复的.
为什么检验重复回复? 我想一般人不会在一个问题上分几段回复, 所以有这么一个检测, 提示一下用户, 以免出现冗余回复.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 * 追加到输入框
 * @param insertStr		追加字符串
 * @param commentBox	评论输入框 ID
 */
function appendReply(insertStr, commentBox) {
	// 如果指定的输入框存在, 将它设为目标区域
	if(document.getElementById(commentBox) && document.getElementById(commentBox).type == 'textarea') {
		field = document.getElementById(commentBox);
	// 否则提示不能追加, 并退出操作
	} else {
		alert("The comment box does not exist!");
		return false;
	}
 
	// 如果一次评论中重复回复, 提示并退出操作
	if (field.value.indexOf(insertStr) > -1) {
		alert("You've already appended this reply!");
		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();
}

使用脚本

前面是关于脚本处理的原理和说明, 这就说说要怎么使用吧.

评论者 ID
这个比较麻烦, 得判断评论者 URL 是否存在, 如果存在则在链接上添加评论者 ID, 否则在外层 span 上添加评论者 ID.
为什么不用 comment_author_link() 直接获显示评论者名字 (有 URL 的带有链接) 呢? 我们需要从指定 ID 的元素中获取评论者的名字, 所以必须在评论者名字的外层定义评论者 ID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 评论者名字 -->
<?php if (get_comment_author_url()) : ?>
	<a id="commentauthor-<?php comment_ID() ?>" href="<?php comment_author_url() ?>">
<?php else : ?>
	<span id="commentauthor-<?php comment_ID() ?>">
<?php endif; ?>
 
<?php comment_author() ?>
 
<?php if(get_comment_author_url()) : ?>
	</a>
<?php else : ?>
	</span>
<?php endif; ?>

评论 ID
一般主题都有添加的, comment_ID() 是评论的编号.

1
2
3
4
5
6
7
8
9
<!-- 所有评论 -->
<ol>
	<?php foreach ($comments as $comment) : ?>
		<!-- 评论 -->
		<li id="comment-<?php comment_ID() ?>">
			<!-- 评论内容 -->
		</li>
	<?php endforeach; ?>
</ol>

评论输入框 ID
comment 是评论输入框的 ID, 这几乎已经成为 WordPress 主题开发者无言的约定了.

1
2
<!-- 评论输入框 -->
<textarea name="comment" id="comment" tabindex="4" rows="8" cols="50"></textarea>

回复按钮
调用前面讨论的 JavaScript 脚本, 完成 @ 回复处理.
href="javascript:void(0);" 是链接调用 JavaScript 空处理. 为什么不干脆撤掉 href 属性呢? 如果 a 标签没有 href 属性, 当鼠标悬停在链接上, 你将无法看到 "手指" 指针.
onclick="reply('commentauthor-', 'comment-', 'comment');" 这段就是调用 @ 回复的代码.

1
2
<!-- 回复按钮 -->
<a href="javascript:void(0);" onclick="reply('commentauthor-<?php comment_ID() ?>', 'comment-<?php comment_ID() ?>', 'comment');"><?php _e('Reply'); ?></a>

后续

最近有些网友提问如何实现那个回复功能, 我觉得可以抽出来讲讲, 所以写下此文.
回复按钮就这么回事, 很简单吧. 其实引用的实现也是大同小异, 有兴趣的朋友可以自己摸索一下, 也可以留言讨论.

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 NeoEase
  1. October 30th, 2008 at 19:21 | #1

    回复和嵌套评论都是比较好的 Wordpress 主题技巧

  2. October 30th, 2008 at 19:23 | #2

    挺简单的一个东东.

  3. October 30th, 2008 at 19:53 | #3

    厉害

  4. October 30th, 2008 at 19:59 | #4

    我也来拿走表情了哟~

  5. October 30th, 2008 at 20:18 | #5

    我用惯了嵌套评论 现在下不了贼船了...-.- 天呐 :idea:

  6. October 30th, 2008 at 20:32 | #6

    @Yacca
    哈哈~
    有个好处, "建楼" 很好玩.

  7. October 30th, 2008 at 21:51 | #7

    虽然我觉得@很酷,不过还是觉得嵌套很爽
    不过这样建楼很方便

    又看到yacca,又看到jay

  8. October 30th, 2008 at 21:55 | #8

    日志当中那个代码高亮文本框设计的不合理,总是盖住最后一行,无论是浏览还是复制都很费事! :idea: 应该改进一下滴!!

  9. October 30th, 2008 at 22:02 | #9

    @Patrick
    你用 IE7 吧, 微软太恶心了, 每个版本的浏览器都不一样...
    已经改好了, 谢谢!

  10. October 30th, 2008 at 22:07 | #10

    嵌套回复2.7版本不是就有么?

  11. JAY
    October 30th, 2008 at 22:43 | #11

    @Dianso
    膜拜一下LS的CC米……

  12. October 31st, 2008 at 00:34 | #12

    @mg12
    嵌套多了之后,很影响美观。这种很好啊。 :arrow:

  13. October 31st, 2008 at 00:43 | #13

    JAY :

    @Dianso
    膜拜一下LS的CC米……

    同膜拜之...

    @bobosky
    I think so.

  14. October 31st, 2008 at 09:52 | #14

    这样的效果很方便,mg12的用户体验越做越棒了

  15. October 31st, 2008 at 10:19 | #15

    这个回复评论的效果灰常好哇!

  16. October 31st, 2008 at 10:40 | #16

    我也喜欢嵌套回复~~~~还可以改造成论坛的效果

  17. October 31st, 2008 at 12:04 | #17

    发现一点,为什么你没有给Quote也加上重复提示。

  18. October 31st, 2008 at 14:11 | #18

    icyleaf :这样的效果很方便,mg12的用户体验越做越棒了

    @icyleaf
    看重MG的主题,就是因为他的用户体验非常棒!一款比一款进步!现在我只用MG的主题,就冲这用户体验!由衷赞一个!~~ :roll:
    同时期待新款发布! :razz:

  19. October 31st, 2008 at 16:03 | #19

    @mg12
    我就是来测试一下的

  20. October 31st, 2008 at 17:20 | #20

    @icyleaf
    哈哈, 难道说我有潜力做前台开发?

    @aunsen
    是哦, 是哦. 不喜欢我也不会弄出来.

    @梵尚
    那是, 就是嵌套复杂了点.

    @JAY
    因为可能被重复引用. 回复和引用不是一个概念呀.

    @Patrick
    WOW~ 感谢你的支持.

    @leojn
    看出来了.

  21. October 31st, 2008 at 20:04 | #21

    咔咔~~爽歪歪噜~~ :evil:

    btw. Reading blinds 很好玩啊~~MG兄能分享下么?

  22. October 31st, 2008 at 22:57 | #22

    以前用过类似插件@ Reply,不过后来还是觉得嵌套的方便~~

  23. October 31st, 2008 at 23:04 | #23

    哈哈,终于等到了,LZ效率真高~赞
    先留下,明早起来研究...

  24. November 1st, 2008 at 00:15 | #24

    @sfox
    不是我做的, 你到作者网站下载吧.
    http://wait-till-i.com

    @JoBru
    哈哈, 各有所好嘛.

    @dogorgod
    Yeah!~

  25. November 4th, 2008 at 18:36 | #25

    确实是好方法,不知道能否把quote的加入方法发布下呢?

  26. November 5th, 2008 at 00:46 | #26

    支持“开源” :grin:

  27. November 18th, 2008 at 15:02 | #27

    好极了,简单实用的方法

  28. November 27th, 2008 at 12:26 | #28

    我想问一下在调用@user的时候不要换行,直接就在后面加个空格怎么做?
    就是说不要"@user
    "
    要"@user "因为我用了mailtocommenter这个插件后,他能自动识别@user 然后给用户发送邮件,如果换行了,貌似不能识别拉。

  29. November 27th, 2008 at 13:06 | #29

    @BoBoSkY
    是要在 user 后面加空格就行了!

  30. November 27th, 2008 at 19:04 | #30

    @BoBoSkY
    好像可以识别...加空格可以自己修改connent.js文件.(+''+)即可

  31. November 28th, 2008 at 23:38 | #31

    @xiaorsz
    @yinheli
    已经搞定了 谢谢啊!!

  32. November 29th, 2008 at 09:28 | #32

    @xiaorsz
    @yinheli
    @BoBoSkY
    等一下教我怎么用! (- -!)

  33. November 29th, 2008 at 14:52 | #33

    @mg12
    额?教你怎么用?这是用来回复邮件的,装了插件就OK了!! :grin:

  34. November 29th, 2008 at 18:48 | #34

    @xiaorsz
    你把JS文件改一下,以后就可以和那个插件无缝集成啦。O(∩_∩)O哈哈~

  35. November 29th, 2008 at 19:35 | #35

    @BoBoSkY
    这个主题给这个插件带来了不少的用户啊!不得不说!!

  36. November 29th, 2008 at 20:51 | #36

    @xiaorsz
    因为他目前不支持thread comment,所以很多都改用了mailtocommenter啦。O(∩_∩)O哈哈~ MG12再把js改一下,把这个插件列到推荐插件吧。

  37. November 29th, 2008 at 22:58 | #37

    @BoBoSkY
    没改, 因为我不会用, 要用的自己弄弄吧, 哈哈~
    莫非 WordPress 2.7 不支持? 但看了 ThinkAgain 的代码, 貌似 @+user+'blank' 或者 @+user+: 都可以. 有点奇怪...

  38. 达米安
    December 23rd, 2008 at 12:01 | #38

    好想要你这个评论回复功能.....不过实在看不懂啊....能不能做个详细点的教程!

    如果能出个插件就更好了....谢谢! :evil:

  39. January 16th, 2009 at 15:02 | #39

    函数调用
    能直接调用插件里面的函数麽?

  40. loosky
    January 23rd, 2009 at 22:35 | #40

    您好,发现一个问题,若是comment这个评论框我使用了编辑器,不能立即就显示的,我该怎么处理?谢谢

  41. February 11th, 2009 at 15:31 | #41

    不知在wp2.7的套嵌评论中使用这个@呢?

  42. Fan
    March 31st, 2009 at 00:57 | #42

    这个很有趣呢~呵呵..

  43. May 16th, 2009 at 17:32 | #43

    BoBoSkY :
    @xiaorsz
    因为他目前不支持thread comment,所以很多都改用了mailtocommenter啦。O(∩_∩)O哈哈~ MG12再把js改一下,把这个插件列到推荐插件吧。

    <a href="#co

    Fan :
    这个很有趣呢~呵呵..

    Rui Shen :
    不知在wp2.7的套嵌评论中使用这个@呢?

    loosky :
    您好,发现一个问题,若是comment这个评论框我使用了编辑器,不能立即就显示的,我该怎么处理?谢谢

    loosky :
    您好,发现一个问题,若是comment这个评论框我使用了编辑器,不能立即就显示的,我该怎么处理?谢谢

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    Fan :
    这个很有趣呢~呵呵..

    mment-5149" rel="nofollow">@Yacca

    @Fan

  44. June 28th, 2009 at 19:59 | #44

    @辐射鱼

    @e
    看看效果

  45. July 2nd, 2009 at 09:56 | #45

    请问这个js脚本哪里可以下载到吗?

  1. November 28th, 2008 at 23:32 | #1
  2. January 7th, 2009 at 16:32 | #2