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 删除。
还没有任何评论,赶紧来占个楼吧!