WordPress 博客评论的@引用回复

对于博客的评论回复显示效果之前非常使用嵌套回复,但看了neoease的@引用回复效果后,深深地爱上了使用@引用…

对于博客的评论回复显示效果之前非常使用嵌套回复,但看了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, "") + 'nn' + 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>

原文

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

类别:WordPress教程

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT

登录 账号发表你的看法,还没有账号?立即免费 注册