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

转载 孟坤博客  2016-12-15 08:48  阅读 201 次
摘要:

前些天在孟坤博客看到《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=(.*?)\](.*?)\[\/url\]/i','<a href="$1" target="_blank" class="comment-t-a">$2</a>', $incoming_comment); //转换超链接  
  16.     $incoming_comment = preg_replace('/\ (.*?)\[\/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' );  //显示时替换 

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

历史上的今天:

本文地址:http://yigujin.cn/1044.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容系作者个人观点,不代表懿古今对观点赞同或支持。
版权声明:本文为转载文章,来源于 孟坤博客 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费清新BLOG/CMS/博客导航三合一响应式主题Three
WordPress免费响应式主题:Nana

发表评论


表情

  1. 蔚蓝
    蔚蓝 【农民】 @回复

    可以尝试一下

  2. 魔羯
    魔羯 【队长】 @回复

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

    • 懿古今
      懿古今【博主】2016-12-17 23:17  回复

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

  3. 闲鱼
    闲鱼 【村长】 @回复

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

    • 懿古今
      懿古今【博主】2016-12-17 23:19  回复

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

  4. 天中青年
    天中青年 【农民】 @回复

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

  5. 热腾网
    热腾网 【市长】 @回复

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

    • 懿古今
      懿古今【博主】2016-12-16 08:33  回复

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

    • 动感单车
      动感单车 【省长】2016-12-16 10:58  回复

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

  6. 菜鸟网赚
    菜鸟网赚 【农民】 @回复

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

  7. 姜辰
    姜辰 【县长】 @回复

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

    • 懿古今
      懿古今【博主】2016-12-16 08:35  回复

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

      • 动感单车
        动感单车 【省长】2016-12-16 10:56  回复

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

  8. Koolight
    Koolight 【省长】 @回复

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

  9. 明月登楼的博客
    明月登楼的博客 【市长】 @回复

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

  10. 动感单车
    动感单车 【省长】 @回复

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