现在的位置: 首页Wordpress>正文
JS+PHP实现WordPress留言板字数统计
2011年12月19日 Wordpress 评论数 9 ⁄ 被围观 11,154+

在自己的博客评论区或留言模板上添加字数统计,字数限制功能即能增加用户体验又能控制留言内容,貌似多余但却是很实用的一个功能,如果不在乎那稍微会影响加载速度的后果的话就马上加上这个功能吧!(尊重原创,知更鸟,我只是再原有的基础上做了稍许改进,希望能够给大家以帮助)

以下代码均是以HotNewspro主题为参考,但不仅限于此主题!

1、首先要修改主题目录下comments.php,查询 name="comment" 或id="comment"找到相应<textarea><textarea/>替换其为以下代码

  1. <span class="cs">      
  2.     <span class="csc">      
  3.         <input name="total" size="2" value="500" class="inputtext" />      
  4.         <input name="remain" size="2" value="500" class="inputtext" />      
  5.     </span>      
  6.     留言不能超过500字,已输入字数:<input name="used" id="used" size="2" value="0" class="inputtext" disabled="disabled" />      
  7. </span>      
  8. <textarea name="comment" id="comment" tabindex="4" disabled="disabled" onKeyDown="xx(this.form.comment,this.form.total,this.form.used,this.form.remain);" onKeyUp="xx(this.form.comment,this.form.total,this.form.used,this.form.remain);"></textarea>   

2、然后找到主题文件夹中 /js/custom.js在最后添加以下代码

  1. // 留言字数统计    
  2. function xx(message,total,used,remain)      
  3. {      
  4.  var max;      
  5.  max = total.value;      
  6.  if (message.value.length > max) {      
  7.  document.getElementById("used").style.color="#FF0000";     
  8.  used.value = max-message.value.length;   
  9.  remain.value = message.value.length;      
  10.  }      
  11.  else {      
  12.  document.getElementById("used").style.color="#0196E3";   
  13.  used.value = message.value.length;      
  14.  remain.value = max - used.value;       
  15.  }      
  16. }  

3、打开主题目录下comments-ajax.php查找——(comment-ajax.php是由 WP 3.0 根目录的 wp-comment-post.php 修改的,所以如果你的主题中没有这个文件可以直接修改wp-comment-post.php)

  1. if ( '' == $comment_content )  

替换相应内容为

  1. if ( '' == $comment_content ){   
  2.     err( __('错误:请填写评论内容.') ); // 将 wp_die 改为错误提示   
  3.     }elseif(iconv_strlen($comment_content,"UTF-8") <10){   
  4.         err( __('提示:不能少于10个字'));   
  5.     }elseif(iconv_strlen($comment_content,"UTF-8") >500){   
  6.         err( __('提示:不能多于500个字'));   
  7.         }  

4、最后一步把需要的样式添加进去就好啦,放到style.css里或者别的什么地方,只要评论页能调用得到的地方就行

  1.  /******** 字数统计 ********/     
  2. .cs {      
  3.     floatrightright;      
  4.     color#757575;      
  5.     }      
  6. .csc {      
  7.     display:none;      
  8.     }      
  9. .inputtext {      
  10.     height:13px;      
  11.     color#0196e3;      
  12.     border:none;      
  13.     backgroundtransparent !important;      
  14.     }   

至此,留言字数统计字数限制功能便添加完毕!

技术参考: 为留言模板添加字数统计 | 知更鸟

目前有 9 条留言 其中:访客:9 条, 博主:0 条

  1. 蓝风火火 : 2012年04月15日01:10:11  1楼 @回复 回复

    刚学wordpress,感觉站长的文章挺使用。请教一个问题,如果实现QQ空间的说说功能。也就是我或者已注册的可以发表说说,游客只能对此评论。咋有点像微博了。。。

    • 筑梦者 : 2012年04月15日08:08:34 @回复 回复

      呵呵,我觉得wordpress还是适合于文章类的博客吧,普通博文和微博毕竟是有区别且是互补的。如果要想弄成“说说”的样子,或者说是微博的模式的话,我感觉不如直接用新浪微博,网易微博,或腾讯微博呢。

  2. 蓝风火火 : 2012年06月28日01:28:20  2楼 @回复 回复

    貌似评论框不会过滤js脚本,偶本地测试会弹出来。。。。
    alert(‘我来测试是否会过滤js脚本’);

    • 蓝风火火 : 2012年06月28日01:28:56 @回复 回复

      为什么你的会过滤了呢?

      • 筑梦者 : 2012年06月28日11:08:11 @回复 回复

        至于我这边是怎么过滤掉的忘记了,不过你可以看看Wordpress本身post过程中有一个过滤器的,还有就是主题本身好像也有这些配置。不过我觉得这些东西还是不过滤较好,把脚本性质的东西全部转化为页面文字入库,这样展示出来就不会运行脚本了。

  3. 孙宇博客 : 2013年02月14日09:36:11  3楼 @回复 回复

    来参观一下,话说你这个评论还得滑动解锁,够奇葩的

  4. 木木 : 2013年05月18日08:05:59  4楼 @回复 回复

    你的评论管理员背景图怎么弄的 可以分享吗

筑梦者坚信,您的评论是最宝贵的!

(嘿嘿,只需要填写昵称和邮箱就OK)

留言无头像?

插入图片 留言不能超过500字,已输入字数: