2011/08/21 与本文章内容相关的改进和增强:WordPress @回复与评论邮件通知的配合

我之前在 WordPress 中设置的回复嵌套层数为四层,嵌套多层之后非常难看,当然这并不是说主题的样式不好,而是过多的 padding-left 容易造成头轻脚重的感觉,对页面的整体效果有很大的负面影响。于是我将嵌套改为 2 层,这样就能比较整体效果比较清晰。但是问题也同时出现了,如果对某一个父级评论的子评论进行回复的话,就不能很直观的看到究竟对谁作了回复。正好人人网最近也推出了非常火的 Twitter 回复方式:“@ 作者”,而且我看不少知名的独立博客站点,也都启用了这种方式,手痒的我也想加到自己的博客中,于是在互联网上爬文,从 mg12 那里找到了一个非插件@回复的方法,纯 JavaScript 实现:

WordPress 评论的@回复

不过由于我的技术水平有限,无论如何调试,都无法实现回复时添加@并同时将 textarea 移动到对应评论下方。

今天再爬文的时候,发现林木木那里有个使用 jQuery 实现@回复的方法:

WordPress 无限嵌套评论的那些事儿

前面实现无限嵌套的功能我并不需要,有点担心如果某天不再需要无限嵌套,而数据库中评论的 ID 父子继承关系不会改变,也许会对程序造成影响。后面实现@回复功能的代码非常简单,于是决定试一试。由于博客头部已经调用了 jQuery 库,所以只需要在 header.php 中加入代码即可。由于主题评论结构的不同,造成加入@的功能可以实现,却不能获取作者名称的字段。研究了一下 jQuery 选择器和代码,然后分析了一下我的主题的评论结构:

    <div id="comments-templates">
        <h3 id="comments">% 评论数量 %</h3>
        <ol class="commentlist">
            ##<li id="li-comment-%ID%" class="comment even thread-even depth-%1%">
                <div id="comment-%ID%>
                    <div class="comment-author vcard">
                        <img %Avatar%">
                        <div class="comment-meta commentmetadata">
                            <strong class="commentmetadata">
                                <p>% 作者与网站链接 %</p></strong>
                            <span class="commentmetadata">
                                <a % 日期与楼层链接 %></a>
                            </span>
                        </div>
                    </div>
                    <div class="comment_text">
                        <p>% 评论内容 %</p>
                    </div>
                    <div class="replay">
                        <a % 回复按钮 %></a>
                    </div>
                </div>
                </li>##
                <ul class="children">
                   % 重复 ## 内的内容 %
                </ul>
           </ol>
     <div>

是源代码 jQuery 选择器对标签的父子继承关系的选择与我的主题不对应,只要用好对应的.parent(), .children(), .find()功能就可以完美适配在自己的主题上。

同时也发现一个问题,就是最子层的评论,无法出现回复按钮,这样我把林木木的代码改成从第二级评论开始实现@回复的功能就完全没有效果了,因为第一级回复根本无需@回复!

不过还好有牛人解决了这个问题:

完美的 WordPress 无限嵌套回复方法
完美解决 WordPress 嵌套回复的层深问题(无限嵌套)(一)

使用过程中发现,这个代码只能对某一回复添加@,如果想在同一评论内实现对多人的@回复是不可能的,只能手动添加。研究了一下代码,只要预先将 textarea 内的内容存在一个字符串中,然后将代码中获取的评论 ID 与作者名与上述字符串一并输出,这样就可以不完美的实现多人@回复了。
做到这,发现对 jQuery 已经有了非常浅薄的认识,于是照猫画虎也做了一个 quote 的功能,不过这个功能也非常简单,只是重点是将.text()函数换成.html()函数。否则原评论中的链接或者其他含有标签的内容将全部丢失。

然后顺手还给评论框添加了一个清空的功能,照猫画虎,非常简单:

jQuery(document).ready(
function($){
$('.depth-1').children('.children').find('.comment-reply-link').click(function(){ //class=".depth-1" 子元素 class=".children" 下的 class=".reply" 的点击事件,注意:模板不同 HTML 结构可能不同,需调整!
	var rid= $(this).parent().parent().attr("id"); // 取得所回复的评论 ID,可能需要调整!
	var rna= $(this).parent().parent().find('strong').text(); // 取得所回复的评论用户名,可能需要调整!
	var oric=$("#comment").attr("value");
	$("#comment").attr("value",oric+"<a href='#"+rid+"'>@"+rna+"</a> \n").focus(); // 在输入框添加"@ 用户名" 和链接
});
$('.quotebutton').click(function(){ 
	var rnq= $(this).parent().parent().children('.comment_text').html(); 
	var oriq=$("#comment").attr("value");
	rnq=$.trim(rnq);
	$("#comment").attr("value",oriq+"<blockquote>"+rnq+"</blockquote> \n").focus(); 
});
 
$('#resettextarea').click(function() {
		$("#comment").attr("value",''); // 点击清空时清空输入框
});
$('#cancel-comment-reply-link').click(function() {
		$("#comment").attr("value",''); // 点击取消回复时清空输入框
});
});

目前的问题就是 quote 时光标定位的问题,在 Firefox 中会自动定位到末端,IE 和 webkit 下有问题,但是@用户名没有问题。不知道问题出在哪里。

在合适的位置插入插入两个链接即可:

<input name="resettextarea" type="button" id="resettextarea" class="resettextarea" tabindex="5" value="清空" /> // 按钮式样的清空
<a class="quotebutton">引用</a> // 链接式样的引用

由于 href 属性为空的链接没有手型指针,我也不想用"javascript:void(0)" 的空指针来实现,那么就需要在 CSS 中定义了:

.quotebutton {cursor:pointer;}

感觉 jQuery 这个东西的确能实现不少东西,而且像我这种菜鸟也可以从中举一反三实现一些简单的东西,onclick,onmousedown 等等可以玩出不少花样来 :smile:

20111021 补充,20120417 更新为适合 3.8.3 的代码:
在后台加入@回复功能,代码加入到主题 functions.php 中。

// 后台的@回复
function at_reply_admin(){
wp_print_scripts( array( 'jquery' ));
?>
<script>
jQuery('.vim-r').live('click',function(){
	try{
		var id = jQuery(this).parent().parent().parent().parent().attr('id');
		id = jQuery.trim(id);
		var author = jQuery(this).parent().parent().parent().find(".comment-author")[0].innerText.replace(/(.*?)\n.*/g,"$1");
		author = jQuery.trim(author);
		jQuery("#replycontent").attr("value","<a href=\"#"+id+"\">@"+author+"</a>\n").focus();
	}catch(err){
		return false;
	}
});
</script>
<?php
}
add_action('admin_print_scripts', 'at_reply_admin');
  1. 有没有自动在后台添加@的形式呢,而且前台不用嵌套

    • @welpher.yu
      前台不嵌套,在后台设置一下就行了。自动在后台添加,请参考文章的补充,放到主题functions.php,我在本机的 WordPress 3.1.4 测试通过,主页和评论页面都能添加。

  2. 非常好的分享