自从实现了Ajax的评论后,俺还是对评论部分有点不太满意,于是又开始拿评论开刀了。
1.首先想到的,是评论没有分页显示的功能,如果评论数量太多,会把页面拖得很长,在google搜索了一下,原来WordPress原生已经支持评论分页的功能了,所以一不做二不休,继续改动。 其实改动很简单,打开模板的comments.php,在类似wp_list_comments();列出评论的代码后面,加入下面的代码即可:
<div id="commentnavi">
</div>
- 实现Enter+Ctrl快捷回复,这个比较简单,用jQuery实现,正好这两天也在学jQuery,就当练练手吧。为了增加代码可读性,方便以后维护,将这部分自定义的jQuery代码放在单独的js文件中:timothy.js
$(document).ready(function(){
//Ctrl+Enter for fast submit
$("#comment").keydown(
function(event){
if(event.ctrlKey && event.keyCode == 13)
{
$("#submit").click();
}
});
});
代码比较简单,检测评论框的keydown时间,并判断是否同时按下了Ctrl键和Enter键,如果条件成立,则直接出发提交按钮的点击事件。将此部分js代码上传,并在header.php引入此脚本文件,效果立马就有了。这下同学们可以通过Ctrl+Enter快捷提交评论了。不过后来发现一个问题,这种用Ctrl+Enter快捷提交的评论,不会触发Ajax评论的效果,后来仔细找了找原因,发现Ajax评论的jQuery脚本中,并没有绑定提交按钮的点击事件,而是绑定的整个Form的submit事件,所以把刚才的脚本小小修改一下即可:
$(document).ready(function(){
//Ctrl+Enter for fast submit
$("#comment").keydown(
function(event){
if(event.ctrlKey && event.keyCode == 13)
{
$("#commentform").submit();
}
});
});
这下就搞定了,支持Ctrl+Enter提交的Ajax评论,呵呵。
3.这个修改源自Zww同学的提议,在每条评论中增加”回复”按钮,原以为我的皮肤不支持嵌套评论的,尝试着在WordPress的设置项中,把嵌套评论给Enable了,这样的话,每条评论就自动有了个回复按钮。接下来,想实现点击回复的时候,自动把评论的同学的名字填入到评论框中,也就是类似 @XXX: 的形式。大体思路是通过jQuery来实现,绑定这些回复按钮的click事件,获取评论的同学的名称,设置到评论框中。其实Zww同学早就实现了这样的功能(前去围观),所以jQuery也可以偷师过来了:
$(".reply").click(
function(){
var name = $(this).prevAll().find("cite:first").text();
$("#comment").text("@"+name+":").focus();
});
同样,放在$(document).ready里面即可。这次改动,俺意外的发现,原来我的皮肤支持嵌套评论……或许是加入了Ajax评论组件的原因,嘿嘿。
此文很菜,没啥技术含量, 算是学习jQuery的一点心得吧,前路茫茫,吾将继续折腾下去……