增加ajax评论小记

ajax评论脚本修改

这里使用的是非插件方式增加ajax评论,使用的是经过zwwooooo修改之后的 Willin 版的comments-ajax。在该版本的基础上修复了一个bug,用户可以利用此bug任意修改别人的评论内容,具体修改方法请走 传送门。修改完成之后的js和php下载,请点击

子主题方式引入尝试

以上完成了最主要的js和php修改,网上看大家的修改方式基本都是直接修改主题中的几个header.php,functions.php等文件,觉得这种方式不利于主题更新,因此想做成子主题(child theme)的方式把上面的文件引入到当前主题。子主题的制作没有问题,但是使用起来之后页面会不能正常加载,不知是否与缓存插件有关。于是还是改为使用直接修改主题的方式来实现,还好需要修改的地方不多,此处做个小记,方便以后换主题之后好修改。

直接修改主题

  1. 把comments-ajax.js和comments-ajax.php放到主题更目录下
  2. 然后在functions.php文件中增加
1
2
3
4
5
6
7
8
9
10
11
//comments-ajax by liang at 20140808
if (!is_admin()) {
function proliang_load_comment_ajax_scripts() {
#wp_enqueue_script('jquery');
if (is_singular()) {
wp_enqueue_script('comments_ajax_js', (get_template_directory_uri()."/comments-ajax.js"), false, '1.3', true);
}
}
add_action('wp_enqueue_scripts', 'proliang_load_comment_ajax_scripts');
}
//comments-ajax end
  1. 注释掉header.php中的 wp_enqueue_script( ‘comment-reply’ ); 代码
1
2
//if ( is_singular() && get_option( 'thread_comments' ) )
//wp_enqueue_script( 'comment-reply' );
  1. 如果用了缓存插件或者js合并插件,则还需要增加规则忽略掉comments-ajax.js的缓存和合并操作,原因还赞不明确,只是如果不这么做,ajax评论会不起作用。
  2. 至此,修改完成,不出意外的话ajax评论功能已经OK。

2014-11-22更新,评论列表图片显示异常

当前主题评论列表中,评论成功的icon和用户头像的css混淆分不清楚,导致评论成功的icon显示异常,因此需要修改头像的css

1
2
3
4
5
6
7
//头像大小和旋转的css
//大约207,208行(此为本人使用的主题,此处做个记录,其他人的话要根据实际情况修改)
.commentlist img{width:40px;height:40px...
.commentlist img:hover{transform:rotate(720deg)...
//改为
.commentlist li div.vcard img.avatar{width:40px;height:40px...
.commentlist li div.vcard img.avatar:hover{transform:rotate(720deg)...

 

后记

如果能用子主题的方式引入到当前主题中,那是最完美的,后续有时间再继续研究
相关参考资料:
评论脚本和bug修复的相关文章请看前面传送门
子主题简单教程请看使用WordPress的子主题功能修改你的WordPress主题