来到小站并留言的朋友不知道有没有发现：当鼠标移到留言内，留言列表的右上角会出现2个图标。

yy1.jpg

这2个图标具有2个功能：第一个是@Reply，由Mail To Commenter留言回复插件生成的，一般人都知道我也就不多说了；第二个即这篇文章将重点详细介绍的Quote Comments插件生成的，当你点击后会自己添加相关代码到留言框呢，发表留言后形成以上图片中的效果。

当你下载安装完Quote插件后，会发现每条留言内多出了2个字“引用”！是的，这是Quote插件自动加上去的，这样我们就已经轻松的把这个留言引用功能添加完成了。接下去，就剩美化工作咯，这个美化可不容易哦，我一点一点的讲，你可以一步一步的跟着做哦：

首先，我们把这难看的“引用”2字替换成图标。请打开插件内quote-comments.php文件，浏览到第44行：

$quote .= __('Quote');

把单引号内的Quote修改成图片的链接地址，如：

$quote .= __('<img src="http://immmmm.com/wp-content/themes/Js_O3/images/quote.gif" alt="" />');

OK，修改保存上传这样我们就能看到“引用”2字变成我们想要的图标了。接下去，我们要在引用的留言前加个图标，即图片中Felix前个橘红色的半引号。请打开你自己模板的CSS，添加以下代码：

blockquote {
	background: url(http://immmmm.com/wp-content/themes/Js_O3/images/start.gif) no-repeat left top;
	padding-left: 22px;
}

当然，请把代码中的图片链接地址换成你自己的哦！好了，这样美化得也差不多了。

不过若有跟我一样对美化有高要求的人肯定忍受不了这2个图标在留言列表中的位置，而且都显示在每条留言中。我在这再介绍一个酷酷的功能：就是让它们隐藏，只当鼠标移到留言内时显现。

先搞定第1个图标，请在主题模板CSS中添加如下代码：

.re_icon img {position:absolute;top:2px;right:35px;}
.commentlist li .re_icon img { display: none; }
.commentlist li:hover .re_icon img { display: inline;}

第2个图标，打开Quote插件文件夹内的quote-comments.css，修改成：

span.quote {
    position:absolute;top:7px;right:15px;
}
.commentlist li .quote img { display: none; }
.commentlist li:hover .quote img { display: inline;}

OOK，大功造成！

PS：对文中的内容还是不怎么理解请看JINWEN写的这两篇文章：WordPress中的Quote插件和让回复留言的按钮动态点。关于这个添加留言引用样式功能，个人觉得又是一个很体现UI的功能，当然之前至现在都很流行的嵌套回复也挺不错。

PSS：这个功能添加进来也有一段时间了，也很早就想写这个简明教程了。不过这段时间准备上课，小学校长要来听，所以暂时放了一下下。到今天呢，实习的任务基本完成，就等着三月底走人咯。今天，也见短歌行发话了，说好久没更新了！人家都没新东西学了，好了，这篇文章也算是应他的要求写的啦。他不说这篇文章说不定这放一下下还得很久哦！