mg12在他的博客里教给我们如何在wordpress中添加@样式回复功能，说实话，看的不是很懂，原因是mg12主要是对整个的实现原理进行了说明，而没有涉及到具体如何操作。殊不知像我这样对javascript完全不懂的菜鸟，必须告诉我第一步干什么，第二步干什么直到最后一步才可以，要不简直是云里雾里。不过值得庆幸的是，通过我的一番努力加上乱蒙乱猜，没想到最后还搞成了，真是该庆祝一下！前些天花了几个小时，按照mg12的方法给博客添加上了回复功能，并进行了样式化，这里，我把如何操作的步骤详细的写一下，当作是对mg12那篇文章的补充，给像我这样的菜鸟提供一个可操作的说明。关于@回复功能如何实现的原理，可以查看mg12的文章。那么我们开始。

第一步

打开Notepad++ ，将如下代码拷贝粘贴，保存为link.js，放入wordpress主题包中的javascript文件夹。

/**
 * @ 回复
 * @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);
}

第二步

将如下代码拷贝粘贴，保存为input.js，放入wordpress主题包中的javascript文件夹。

/**
 * 追加到输入框
 * @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();
}

第三步

打开header.php文件，在</head>标签之前加入如下代码：

   <script type="text/javascript" src="<?php bloginfo('template_url');
   ?>/javascript/link.js"></script>

   <script type="text/javascript" src="<?php bloginfo('template_url');
   ?>/javascript/input.js"></script>

第四步

下载我已经调整好的的comments.php文件，替换掉你的wordpress主题中的comments.php文件。

comments

第五步

根据你的主题样式对回复按钮进行设计，并使用CSS进行样式化。为了表达对捐助过GreenGaint主题的热心人士的感谢，如果你对CSS不太懂的话，我也可以帮助你。

分享到：