WordPress 评论的 @ 回复
难度: ★
所谓 @ 回复, 就是在评论者名字前添加 '@' 标记, 不涉及评论内容的, 生成带链接的代码并追加到评论输入框中.
我不喜欢那种结构复杂的, 难以维护的嵌套回复, 而是经常使用 @ 回复. 为此我写了个 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> |
后续
最近有些网友提问如何实现那个回复功能, 我觉得可以抽出来讲讲, 所以写下此文.
回复按钮就这么回事, 很简单吧. 其实引用的实现也是大同小异, 有兴趣的朋友可以自己摸索一下, 也可以留言讨论.
回复和嵌套评论都是比较好的 Wordpress 主题技巧
挺简单的一个东东.
厉害
我也来拿走表情了哟~
我用惯了嵌套评论 现在下不了贼船了...-.- 天呐
@Yacca
哈哈~
有个好处, "建楼" 很好玩.
虽然我觉得@很酷,不过还是觉得嵌套很爽
不过这样建楼很方便
又看到yacca,又看到jay
日志当中那个代码高亮文本框设计的不合理,总是盖住最后一行,无论是浏览还是复制都很费事!
应该改进一下滴!!
@Patrick
你用 IE7 吧, 微软太恶心了, 每个版本的浏览器都不一样...
已经改好了, 谢谢!
嵌套回复2.7版本不是就有么?
@Dianso
膜拜一下LS的CC米……
@mg12
嵌套多了之后,很影响美观。这种很好啊。
同膜拜之...
@bobosky
I think so.
这样的效果很方便,mg12的用户体验越做越棒了
这个回复评论的效果灰常好哇!
我也喜欢嵌套回复~~~~还可以改造成论坛的效果
发现一点,为什么你没有给Quote也加上重复提示。
@icyleaf
看重MG的主题,就是因为他的用户体验非常棒!一款比一款进步!现在我只用MG的主题,就冲这用户体验!由衷赞一个!~~
同时期待新款发布!
@mg12
我就是来测试一下的
@icyleaf
哈哈, 难道说我有潜力做前台开发?
@aunsen
是哦, 是哦. 不喜欢我也不会弄出来.
@梵尚
那是, 就是嵌套复杂了点.
@JAY
因为可能被重复引用. 回复和引用不是一个概念呀.
@Patrick
WOW~ 感谢你的支持.
@leojn
看出来了.
咔咔~~爽歪歪噜~~
btw. Reading blinds 很好玩啊~~MG兄能分享下么?
以前用过类似插件@ Reply,不过后来还是觉得嵌套的方便~~
哈哈,终于等到了,LZ效率真高~赞
先留下,明早起来研究...
@sfox
不是我做的, 你到作者网站下载吧.
http://wait-till-i.com
@JoBru
哈哈, 各有所好嘛.
@dogorgod
Yeah!~
确实是好方法,不知道能否把quote的加入方法发布下呢?
支持“开源”
好极了,简单实用的方法
我想问一下在调用@user的时候不要换行,直接就在后面加个空格怎么做?
就是说不要"@user
"
要"@user "因为我用了mailtocommenter这个插件后,他能自动识别@user 然后给用户发送邮件,如果换行了,貌似不能识别拉。
@BoBoSkY
是要在 user 后面加空格就行了!
@BoBoSkY
好像可以识别...加空格可以自己修改connent.js文件.(+''+)即可
@xiaorsz
@yinheli
已经搞定了 谢谢啊!!
@xiaorsz
@yinheli
@BoBoSkY
等一下教我怎么用! (- -!)
@mg12
额?教你怎么用?这是用来回复邮件的,装了插件就OK了!!
@xiaorsz
你把JS文件改一下,以后就可以和那个插件无缝集成啦。O(∩_∩)O哈哈~
@BoBoSkY
这个主题给这个插件带来了不少的用户啊!不得不说!!
@xiaorsz
因为他目前不支持thread comment,所以很多都改用了mailtocommenter啦。O(∩_∩)O哈哈~ MG12再把js改一下,把这个插件列到推荐插件吧。
@BoBoSkY
没改, 因为我不会用, 要用的自己弄弄吧, 哈哈~
莫非 WordPress 2.7 不支持? 但看了 ThinkAgain 的代码, 貌似 @+user+'blank' 或者 @+user+: 都可以. 有点奇怪...
好想要你这个评论回复功能.....不过实在看不懂啊....能不能做个详细点的教程!
如果能出个插件就更好了....谢谢!
函数调用
能直接调用插件里面的函数麽?
您好,发现一个问题,若是comment这个评论框我使用了编辑器,不能立即就显示的,我该怎么处理?谢谢
不知在wp2.7的套嵌评论中使用这个@呢?
这个很有趣呢~呵呵..
<a href="#co
mment-5149" rel="nofollow">@Yacca
@Fan
@辐射鱼
@e
看看效果
请问这个js脚本哪里可以下载到吗?