如何为Nana主题评论框增加多功能工具条

转载  孟坤博客   2016-12-15 08:48:56 发布  技术文档
摘要:

前些天在孟坤博客看到《Nana主题评论框增加多功能工具条的教程》,觉得非常不错,虽然我喜欢简洁,但是我相信会有不少博主站长喜欢更多功能的评论功能,所以今天特意转载这篇文章过来,希望对大家有所帮助。

Nana主题自带的评论框已经集成了垃圾评论过滤、插入表情、评论邮件提醒等功能,为了使得评论的玩法更丰富,所以就给Nana主题的评论框加了一个工具条,今天就跟大家分享一下如何为Nana主题评论框增加多功能工具条。

如何为Nana主题评论框增加多功能工具条

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

为Nana主题评论框增加多功能工具条具体步骤:

方法一:直接替换文件法

1、点击下载“Nana主题评论框增加多功能工具条文件”压缩包并解压得到5个文件,分别是comment-tools.css、comment-tools.js、comment-tools.php、comments.php和functions.php文件。

2、将以上5个文件上传到Nana主题文件夹内覆盖原文件即可,其中comment-tools.js上传到JS文件夹,comment-tools.php上传到inc文件夹。

PS:如果已经修改过functions.php文件的,建议直接根据方法二的步骤五自行折腾。

方法二:自己动手折腾法

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>

如图所示:

如何为Nana主题评论框增加多功能工具条 第2张

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\]/i','<b class="comment-t-b">$1</b>', $incoming_comment); //转换粗体  
  9.     $incoming_comment = preg_replace('/\[i\](.*?)\[\/i\]/i','<i class="comment-t-i">$1</i>', $incoming_comment); //转换斜体  
  10.     $incoming_comment = preg_replace('/\[u\](.*?)\[\/u\]/i','<u class="comment-t-u">$1</u>', $incoming_comment); //转换下划线  
  11.     $incoming_comment = preg_replace('/\[del\](.*?)\[\/del\]/i','<del class="comment-t-del">$1</del>', $incoming_comment); //转换删除线  
  12.     $incoming_comment = preg_replace('/\[pre\](.*?)\[\/pre\]/i','<pre class="comment-t-pre">$1</pre>', $incoming_comment); //转换代码  
  13.     $incoming_comment = preg_replace('/\[blockquote\](.*?)\[\/blockquote\]/i','<blockquote class="comment-t-blockquote">$1</blockquote>', $incoming_comment); //转换引用  
  14.     $incoming_comment = preg_replace('/\[color=([\w|#]*?)\](.*?)\[\/color\]/i','<span style="color: $1" class="comment-t-color">$2</span>', $incoming_comment); //转换颜色  
  15.     $incoming_comment = preg_replace('/\(.*?)\[\/url\]/i','<a href="$1" target="_blank" class="comment-t-a">$2</a>', $incoming_comment); //转换超链接  
  16.     $incoming_comment = preg_replace('/\[img\](.*?)\[\/img\]/i','<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' );  //显示时替换 

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

你可能感兴趣的文章

文章标签: ,   ,   ,  
版权声明:本文为转载文章,来源于 孟坤博客 ,版权归原作者所有!转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 动感单车
    动感单车 @回复

    [强] 真的很佩服这些朋友,不但能折腾,更重要的是有技术呀!

    • 懿古今
      懿古今2016-12-15 13:29  回复

      @动感单车很多东西都是折腾出来的,多动手就会了

      • 动感单车
        动感单车2016-12-16 10:53  回复

        @懿古今我是一个不爱折腾的人,比较来得知足常乐,功能够用或是自己喜欢就行!

  2. 明月登楼的博客
    明月登楼的博客 @回复

    拜访“站长圈子”博客,支持一下!
    其实评论框里不需要太多复杂的东西的!

    • 懿古今
      懿古今2016-12-15 13:28  回复

      @明月登楼的博客是的,所以我就没有整合到Nana主题中,而且分享教程,让有需要的博主站长自行折腾

  3. Koolight
    Koolight @回复

    又引入了好几个js/css呢!

  4. 姜辰
    姜辰 @回复

    表示,评论框不是写文章,没必要那么多东西吧?

    • 懿古今
      懿古今2016-12-16 08:35  回复

      @姜辰[强] 跟我的想法一样,其实有一个表情搭配文字,评论就很强大的,毕竟我们的重点是在文章

      • 动感单车
        动感单车2016-12-16 10:56  回复

        @懿古今其实,我一直觉得评论的功能越多,如果评论的朋友喜欢用到其中的粗体、下划线呀等等,反倒将评论文字弄得花里胡哨,看得人事眼花缭乱,最终效果适得其反。

  5. 菜鸟网赚
    菜鸟网赚 @回复

    不错的创意 但是会有几个人用呢

    • 懿古今
      懿古今2016-12-16 08:34  回复

      @菜鸟网赚还是挺多博主站长喜欢复杂的功能的,我个人就比较喜欢简简单单的

  6. 热腾网
    热腾网 @回复

    虽然是教程,不一定非要集成到主题里,那样这个主题就成了第二个Git主题了。

    • 懿古今
      懿古今2016-12-16 08:33  回复

      @热腾网[强] 是的,我就想弄一个简简单单的主题,适合大部分新手使用,所以不想集成太多太复杂的东西,不过可以提供教程,让有需要的自行折腾

    • 动感单车
      动感单车2016-12-16 10:58  回复

      @热腾网[惊讶] 对于Git主题,其实本人从来都不大喜欢,觉得它弄得太过于花哨了,比较适合喜欢扮酷的人群使用吧,呵呵!

  7. 天中青年
    天中青年 @回复

    老古的主题真心不错啊,渐渐的走技术路线了,赞。

    • 懿古今
      懿古今2016-12-16 08:32  回复

      @天中青年[呲牙] 技术都是业余折腾的

    • 动感单车
      动感单车2016-12-16 11:00  回复

      @天中青年[呲牙] 反正我是早就决定了,今后再建博客的话,老古的这个主题是我的不二选择!

  8. 闲鱼
    闲鱼 @回复

    之前看到别人弄这个,考虑过要不要也折腾下,最后还是放弃了,有个表情就够了,这个用的也少

    • 懿古今
      懿古今2016-12-17 23:19  回复

      @闲鱼是的,我个人认为评论有文字和表情就足够了,太多功能反而不好

  9. 魔羯
    魔羯 @回复

    创意不错!但评论还是简单清爽些好!

    • 懿古今
      懿古今2016-12-17 23:17  回复

      @魔羯是的,我也是这个观点,所以就分享教程给有需要的人自行折腾

  10. 蔚蓝
    蔚蓝 @回复

    可以尝试一下

    • 懿古今
      懿古今2016-12-22 22:53  回复

      @蔚蓝喜欢可以试试,这个实现起来还是挺简单的

  11. mengkun
    mengkun @回复

    Nana升级到 2.06后出了个 bug ,会把文中的代码部分也“变成”图册。比如说这篇文章的 第五点 中的代码就“中招”了 [偷笑]

    • 懿古今
      懿古今2017-02-01 12:47  回复

      @mengkun[给力] 谢谢告知,已经修复,就是把functions.php文件里面的[img]连续插入N张图片[/img]改为[imgs]连续插入N张图片[/imgs],add_shortcode(‘img’, ‘gallery’);改为add_shortcode(‘imgs’, ‘gallery’);

  12. 男人不可以穷
    男人不可以穷 @回复

    我有一个问题就是评论的表情要有空格才能被识别 ( 前后有文字出现必须要有空格 )
    不然就会出现如下现象[无奈]

    • 懿古今
      懿古今2018-12-16 16:45  回复

      @男人不可以穷默认添加就有空格,一般人添加完就继续输入文字,谁那么有空特意去删除空格?介意的话可以不发表表情