Nana主题评论框增加多功能工具条教程

2016-12-13 12:21  阅读 869 次 评论 10 条

前言:之前本博客一直使用的是畅言的评论框,看好的是它的易维护性。然而随着博主的水平提高,也越来越爱瞎折腾。畅言的成品评论框已不能满足我的需求,遂又换回了wordpress的原生评论框。

Nana主题自带的评论框已经集成了垃圾评论过滤、插入表情、评论邮件提醒等功能,但我测试了一下,似乎存在一个xss漏洞(又经过测试发现游客评论并不会触发)。在填补这个漏洞的同时,又顺手给评论框加了个工具条,使得评论的玩法更丰富。在这里顺带放出相关教程。

注:本教程仅针对Nana主题,其它主题虽异曲同工,但需要改动才能适配。具体的自己尝试。

1、打开Nana主题的目录(/wp-content/themes/Nana),新建一个 css 文件,命名为 “comment-tools.css”,往里面贴入如下代码:

2、再打开 Nana 主题目录下的 js 文件夹,在里面新建一个js文件,命名为 “comment-tools.js” ,并往里面贴入以下代码:

3、打开Nana主题目录下的 inc 文件夹,在里面新建一个php文件,命名为 “comment-tools.php” 并在里面贴入如下代码:

4、打开Nana主题目录下的“comments.php”,找到第70行

  1. <p class="smiley-box">
  2.     <?php get_template_part( 'inc/smiley' ); ?>
  3. </p>

在它的后面添加

  1. <p class="comment-tools-box">
  2.      <?php get_template_part( 'inc/comment-tools' ); ?>
  3. </p>

如图所示:

5、最后一步!打开Nana主题目录下的“functions.php”,拉到最下面,在最后一行的“ ?> ”前面加入以下代码:

  1. /**
  2. * WordPress 评论多功能工具条后台处理部分
  3. * 编写 By 孟坤博客
  4. * 文章地址: http://mkblog.cn/401/
  5. **/
  6. function comment_code_escape( $incoming_comment ) {
  7.     $incoming_comment = str_replace(array('<', '>'), array('&lt;', '&gt;'), $incoming_comment);//第一步就去掉尖括号,防止xss htmlspecialchars($incoming_comment, ENT_NOQUOTES);
  8.     $incoming_comment = preg_replace('/\[b\](.*?)\[\/b\]/is','<b class="comment-t-b">$1</b>', $incoming_comment); //转换粗体
  9.     $incoming_comment = preg_replace('/\[i\](.*?)\[\/i\]/is','<i class="comment-t-i">$1</i>', $incoming_comment); //转换斜体
  10.     $incoming_comment = preg_replace('/\[u\](.*?)\[\/u\]/is','<u class="comment-t-u">$1</u>', $incoming_comment); //转换下划线
  11.     $incoming_comment = preg_replace('/\[del\](.*?)\[\/del\]/is','<del class="comment-t-del">$1</del>', $incoming_comment); //转换删除线
  12.     $incoming_comment = preg_replace('/\[pre\](.*?)\[\/pre\]/is','<pre class="comment-t-pre">$1</pre>', $incoming_comment); //转换代码
  13.     $incoming_comment = preg_replace('/\[blockquote\](.*?)\[\/blockquote\]/is','<blockquote class="comment-t-blockquote">$1</blockquote>', $incoming_comment); //转换引用
  14.     $incoming_comment = preg_replace('/\[color=([\w|#]*?)\](.*?)\[\/color\]/is','<span style="color: $1" class="comment-t-color">$2</span>', $incoming_comment); //转换颜色
  15.     $incoming_comment = preg_replace('/\[url=(.*?)\](.*?)\[\/url\]/is','<a href="$1" target="_blank" class="comment-t-a">$2</a>', $incoming_comment); //转换超链接
  16.     $incoming_comment = preg_replace('/\[img\](.*?)\[\/img\]/is','<a href="$1" class="cboxElement comment-t-img-a" rel="example_group"><img src="$1" class="comment-t-img aligncenter size-full wp-image-393 box-hide box-show"></a>', $incoming_comment); //转换图片
  17.     return $incoming_comment;
  18. }
  19. //用户在进行评论时就进行处理(即先进行替换,再写进数据库)
  20. //add_filter( 'preprocess_comment', 'comment_code_escape' );    
  21. //在评论显示出来时进行处理(推荐) (即评论按原样写进数据库,再读出来时进行替换)
  22. add_filter( 'comment_text', 'comment_code_escape' );  //显示时替换
  23. add_filter( 'comment_text_rss', 'comment_code_escape' );  //显示时替换

注:这里提供了两种后台替换方式,各有利弊,自己权衡选择。

为了方便修改,我已将上述“comment-tools.css”、“comment-tools.js”和“comment-tools.php”打包

2016-12-5更新

我采用的是评论输出再转义替换的方法,更改完后发现wordpress会自动为链接加上超链接再输出。因为我在上面的代码把尖括号都作了转义,所以最终输出的链接变成了如下这个样子:

解决办法是将尖括号转义单独提取出来,放在评论“入库”时处理,然后去掉wordpress的评论自动解析超链接功能。最终的 function.php 里的代码如下:

  1. /**
  2. * WordPress 评论多功能工具条后台处理部分
  3. * 编写 By 孟坤博客
  4. * 文章地址: http://mkblog.cn/401/
  5. **/
  6. function comment_code_escape( $incoming_comment ) {
  7.     $incoming_comment = preg_replace('/\[b\](.*?)\[\/b\]/is','<b class="comment-t-b">$1</b>', $incoming_comment); //转换粗体
  8.     $incoming_comment = preg_replace('/\[i\](.*?)\[\/i\]/is','<i class="comment-t-i">$1</i>', $incoming_comment); //转换斜体
  9.     $incoming_comment = preg_replace('/\[u\](.*?)\[\/u\]/is','<u class="comment-t-u">$1</u>', $incoming_comment); //转换下划线
  10.     $incoming_comment = preg_replace('/\[del\](.*?)\[\/del\]/is','<del class="comment-t-del">$1</del>', $incoming_comment); //转换删除线
  11.     $incoming_comment = preg_replace('/\[pre\](.*?)\[\/pre\]/is','<pre class="comment-t-pre">$1</pre>', $incoming_comment); //转换代码
  12.     $incoming_comment = preg_replace('/\[blockquote\](.*?)\[\/blockquote\]/is','<blockquote class="comment-t-blockquote">$1</blockquote>', $incoming_comment); //转换引用
  13.     $incoming_comment = preg_replace('/\[color=([\w|#]*?)\](.*?)\[\/color\]/is','<span style="color: $1" class="comment-t-color">$2</span>', $incoming_comment); //转换颜色
  14.     $incoming_comment = preg_replace('/\[url=(.*?)\](.*?)\[\/url\]/is','<a href="$1" target="_blank" class="comment-t-a">$2</a>', $incoming_comment); //转换超链接
  15.     $incoming_comment = preg_replace('/\[img\](.*?)\[\/img\]/is','<a href="$1" class="cboxElement comment-t-img-a" rel="example_group"><img src="$1" class="comment-t-img aligncenter size-full wp-image-393 box-hide box-show"></a>', $incoming_comment); //转换图片
  16.     return $incoming_comment;
  17. }
  18. //在评论显示出来时进行处理
  19. add_filter( 'comment_text', 'comment_code_escape' );  //评论显示时替换
  20. add_filter( 'comment_text_rss', 'comment_code_escape' );  //rss显示时替换
  21. /**
  22. * WordPress 评论尖括号处理部分
  23. * 编写 By 孟坤博客
  24. **/
  25. function mk_comment_escape( $incoming_comment ) {
  26.     $incoming_comment = str_replace(array('<', '>'), array('&lt;', '&gt;'), $incoming_comment);//去掉尖括号,防止xss
  27.     return $incoming_comment;
  28. }
  29. add_filter( 'preprocess_comment', 'mk_comment_escape' );    //评论写入时就进行转义
  30. remove_filter( 'comment_text', 'make_clickable',  9 );  //去除wordpress评论链接自动解析

2016-12-17更新

请参照5楼评论

参考资料

[1]. 给wordpress评论处添加实用工具.爱找主题 http://www.2zzt.com/jcandcj/7397.html

[2]. WordPress开启颜色评论但不造成XSS漏洞的小方法.张戈博客 https://zhangge.net/5010.html

本文地址:http://mkblog.cn/401/
版权声明:本文为原创文章,版权归 mengkun 所有,欢迎分享本文,转载请保留出处!

文件下载

如遇下载链接失效,请在下方留言,我将在第一时间补上链接。

发表评论


表情

  1. 冰雨博客
    冰雨博客 Lv 1  @回复  6楼

    你好博主,你网站里的按钮是用的什么代码

  2. mengkun
    mengkun 站长  @回复  5楼

    重要提示:
    刚发现了一个小问题,如果标签内的文字有换行,则无法正常替换,原因是正则匹配那里漏了个“s”
    即把后台处理那里的 preg_replace(‘/**********/i’ 全部换成 preg_replace(‘/**********/is
    关于出现这个BUG的原因,请参照 PHP 正则表达式后面接的/isU, /is, /s含义

  3. 动感单车
    动感单车 Lv 1  @回复  4楼

    [强] 这个功能好啊,很实用!

    • mengkun
      mengkun 站长 2016-12-15 14:56   回复

      @动感单车好用是好用,改起来还是有点麻烦的 [呲牙] 所有的与评论显示相关的地方都要配套的进行修改才行~

  4. 懿古今
    懿古今 Lv 3  @回复  地板

    看起来不错啊, [强]

    • mengkun
      mengkun 站长 2016-12-14 13:39   回复

      @懿古今奇怪了,你的这个头像在评论区里不知道怎么搞的就是显示不出来,在后台又能正常显示…… [呲牙]

      • mengkun
        mengkun 站长 2016-12-15 14:55   回复

        @mengkun解决了,原来是主题头像缓存部分使用的多说镜像失效了…… [衰]
        将 functions.php 中的 311、322行的“http://gravatar.duoshuo.com/avatar/”换成“http://cn.gravatar.com/avatar/”立马就好了……

  5. 小号
    小号  @回复  板凳

    测试一下 [呲牙] 倾斜的文字
    加下划线的文字
    加删除线的文字
    超链接
    好文帮顶 & 顺便留个名~时间:下午1:16:30

  6. 小号
    小号  @回复  沙发

    测试一下彩色的文字

    代码是怎样的