WordPress 博客评论的@引用回复

WordPress教程 5766

对于博客的评论回复显示效果之前非常使用嵌套回复，但看了neoease的@引用回复效果后，深深地爱上了使用@引用回复的效果，不过由于博客吧一开始为了方便就使用插件，所以也就没有把博客吧的评论回复修改成@引用回复的效果，但在其外的博客上修改了。下面是转载neoease博客发表的WordPress 评论的@回复效果的教程。

WordPress 评论的@回复效果介绍：

所谓 @ 引用回复，就是在评论者名字前添加 ‘@’ 标记，不涉及评论内容的，生成带链接的代码并追加到评论输入框中，如“@板凳”

WordPress 评论的@回复修改方法步骤：

  • 参数、信息来源
    评论者 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() 是评论的编号。

    <!-- 所有评论 -->
<ol>
	<?php foreach ($comments as $comment) : ?>
		<!-- 评论 -->
		<li id="comment-<?php comment_ID() ?>">
			<!-- 评论内容 -->
		</li>
	<?php endforeach; ?>
</ol>

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

    <!-- 评论输入框 -->
<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’);” 这段就是调用 @ 回复的代码。

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

原文

提醒：演示效果请前往原作者博客欣赏~~

精品推荐：