为留言模板添加字数统计

2011年11月25日03:30:38 126 9,882
摘要

可能有的童鞋已发现我的评论模板有一个字数统计功能,本来只是试验一下,准备用到其它模板中,有人问咋弄的,那就按下面的方法把这个功能也加到自己的主题中。

可能有的童鞋已发现我的评论模板有一个字数统计功能,本来只是试验一下,准备用到其它模板中,有人问咋弄的,好吧,那就按下面的方法把这个功能也加到自己的主题中。

 

一、把下面的javascript代码添加到主题的JS文件中,HotNews主题加到HotNewspro\js目录custom.js中

  1. // 留言字数统计
  2. function checktext(text)
  3. {
  4.   allValid = true;
  5.   for (i = 0;  i < text.length;  i++)
  6.   {
  7.    if (text.charAt(i) != " ")
  8.    {
  9.     allValid = false;
  10.     break;
  11.    }
  12.   }
  13. return allValid;
  14. }
  15. function xx(message,total,used,remain)
  16. {
  17.  var max;
  18.  max = total.value;
  19.  if (message.value.length > max) {
  20.  message.value = message.value.substring(0,max);
  21.  used.value = max;
  22.  remain.value = 0;
  23.  alert("留言不能超过 500 个字!");
  24.  }
  25.  else {
  26.  used.value = message.value.length;
  27.  remain.value = max - used.value;
  28.  }
  29. }

二、打开评论模板comments.php找到类似:

  1. <p><textarea name="comment" id="comment" tabindex="4"></textarea></p>

替换为:

  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" size="2" value="0" class="inputtext">
  7. </span>
  8.     <p><textarea name="comment" id="comment" tabindex="4" 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></p>

其中的数字“500”是限制的字符数,可根据需要适当修改。

三、添加样式

  1.  /******** 字数统计 ********/
  2. .cs {
  3.     float: right;
  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.     }

添加上述代码后,当留言超过500字时,会弹出警告提示框,但并不具备阻止提交留言功能。

另外,想同时限制最少输入字数,可以把下面代码加到主题的functions.php模版中:

  1. // 评论最少字数限制
  2. function minComment($content){
  3.     global $comment;
  4.         $num = 10; //设置评论最少字数限制为 10
  5.     $content = $comment->comment_content;
  6.     if(str_word_count($content) < $num)
  7.         wp_die('提示:不能少于10个字');
  8. }
  9. add_action('pre_comment_on_post', 'minComment');

当输入文字少于设定值,会有错误提示

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:126   其中:访客  106   博主  17   引用   2

    • 小坚 4

      哈哈~~成功啦,求围观~
      我在widget复制一个主题侧边广告代码,然后把这个小工具放在右侧,图片直接用代码【参考鸟哥《添加多个广告位》的方法】~然后修改css~

      貌似还挺麻烦的啊,不过好有成就感啊,哈哈哈哈哈,谢谢鸟哥~

      P.S 顶部banner下面有缝隙,不知道调哪个css?

        • 知更鸟 Admin

          @小坚 试着在主题样式中加一句:

          .banner img {   
              margin: 0 !important;   
          }  

        • 石家庄婚纱摄影 3

          每次到鸟哥文章,都能学到不少东西,谢谢!

          • cooonline 1

            求助鸟哥,我的博客除首页外,其它页面底部错位,请问怎么解决呢?

            • 忆昔年 3

              我安装您的主题以前视频还可以正常播放,现在不行了 我又重新安装了两遍还是不行。请鸟哥看看是神马情况。。

              • 泰溪 2

                这个不错,,我来试用一下!

                • 泰溪 2

                  好是好了!就是输入字后不显示多少字,一直为0!

                  • 北京婚纱 0

                    用PHP代码也可以实现吧,我们用PHP做过留言板

                    • mobile crusher 2

                      能让他在输入字数超出部分给截取掉就好了

                      • 四川人 6

                        博主现在也忙了把,年底了, 没见你怎么更新了!

                        • ThePoweroflove 3

                          很好的东西 谢谢博主了 可以注册收到邮件 留言回复还是没反应 要安装插件 还是什么其他的

                          • 郑州设计师 5

                            发现最近访问你博客的速度极慢

                              • 知更鸟 Admin

                                @郑州设计师 天朝的网络环境就是这样了
                                不过我这里访问还是很正常

                                  • 及时雨 2

                                    @知更鸟 鸟哥的空间,近一个月来ping值都维持在250-260之间,非常稳定,无论是早上、下午、晚上或者凌晨。

                                • 石家庄艺术写真 4

                                  不错过来学习了啊

                                  • 永恒之塔基地 3

                                    围观一下。哈哈。

                                    • sunny 1

                                      博主,你好,我想请问一下,怎么新建一个页面,再在上面添加文章呢?我想建个页面来存放公告跟留言板,但是不知道怎么弄,博主能小弟解答一下吗?

                                      • 漯彬客 2

                                        求助!为什么我最新发布的文章页面出现,侧边栏错位到留言下方,谷歌和火狐浏览器显示正常,IE,搜狗,360都出现错位现象;http://www.lhbin.com/baidufenxiang-2/这是出现错位文章页面。这问题我找了有一个星期好多;鸟哥拜托了!

                                        • 杨大叔 0

                                          如果我的EMLOG可以用这个板板多好啊

                                          • 强龙 3

                                            鸟哥好。这个很早以前就问过你。现在终于出教程了啊。。

                                            • 石家庄婚纱影楼 4

                                              过来看看鸟哥了啊

                                              • 小坚 4

                                                鸟哥,今天wp出3.3啦,我用上了,可是背景变成了灰色。

                                                你好久没有动作了哦。你快回来~~~~~~~~~~~~~~~~~~~~

                                                  • 第一滴血 2

                                                    @小坚 同样的问题。。不能自定义,期待解决啊

                                                      • 小坚 4

                                                        @第一滴血 我已经解决了,你修改一下style.css就可以了 在css里面把背景改成你想要的颜色

                                                          • 第一滴血 2

                                                            @小坚 不会改style.css,我Q739532997加我指导我下

                                                              • 小坚 4

                                                                @第一滴血 外观–编辑–
                                                                找到body {
                                                                background: #f2f2f2;

                                                                把f2f2f2改成你想要的颜色编号,白色就是fff

                                                            • www.softku.net 5

                                                              @第一滴血 找到 wp-includestheme.php 搜索 body.custom-background 去掉 .custom-background 保存
                                                              这样的话就可以实现了
                                                              因为3.3的程序在custom_background_cb() 这个函数的背景设置中 增加了custom-background 的id原来的是只有body的所以造成主题的背景的图片失效

                                                              演示:www.softku.net

                                                            • www.softku.net 5

                                                              @小坚 找到 wp-includestheme.php 搜索 body.custom-background 去掉 .custom-background 保存
                                                              这样的话就可以实现了
                                                              因为3.3的程序在custom_background_cb() 这个函数的背景设置中 增加了custom-background 的id原来的是只有body的所以造成主题的背景的图片失效。

                                                              演示:www.softku.net

                                                            • 影楼营销 3

                                                              这个功能很好,感谢鸟哥分享!

                                                              • cwksem 1

                                                                鸟哥请问 作者发表的所有文章 怎么看啊

                                                                • 领淘网 2

                                                                  鸟哥的文章都能学到东西

                                                                  • 五度空间 4

                                                                    鸟哥,有问题急需你的帮助,我的给我留言的框里面的字“留言是种美德,写点什么…
                                                                    ”,用鼠标点击时怎么消失不了,而你这网站访客留言时,鼠标点击留言框后,里面的字会消失掉。请鸟哥指点一下。再就是怎么去掉留言框上面的链接图标,留言框下面的表情图标也加不到留言框里面去。还请鸟哥不吝赐教。
                                                                    五度空间:http://www.wudu.me

                                                                    • 筑梦者 2

                                                                      学到了,呵呵,刚刚集成到自己主题上

                                                                      • 情侣 1

                                                                        这个比较不错,拿去测试一下

                                                                        • heimukai007 3

                                                                          你好,添加样式的代码是放style.css还是css.css?

                                                                          • bohua 1

                                                                            请问有没有什么方法统计文章的字数呢?我想在文章末尾放上,“本文共XXX字” 的效果。

                                                                            • 排行榜 2

                                                                              这个功能不错啊!!!!!!!!!!!!!!!!

                                                                              • 苏人主意 4

                                                                                我按上面的一步一步操作,只有谷歌浏览器能正常显示 已输入字数,其他浏览器都还是显示 已输入字数 0

                                                                                • 鸟人会飞 2

                                                                                  应该按字符算

                                                                                  • 有点蓝 4

                                                                                    请问我的主题评论模板在这个位置是这样一段代码:
                                                                                    );
                                                                                    $args = array(
                                                                                    ‘fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),
                                                                                    );
                                                                                    comment_form($args);

                                                                                    没有评论内容框和提交按钮的代码,改怎么加呢?

                                                                                    • lanmengorg 0

                                                                                      这功能不错,看看加上

                                                                                      • 蓝风火火 3

                                                                                        显示字数的input没有readonly。。。

                                                                                        • 第9空间 2

                                                                                          functions.php模版中加了那段代码后,输入的字数大于10也一样提示不能少于10个字了,还提交不了留言。不能少于500字功能正常。

                                                                                            • 第9空间 2

                                                                                              @第9空间 代码是直接在这里复制的,复制的时候会把前面标示行数的数字也复制上,每次都要手动删除

                                                                                                • 知更鸟 Admin

                                                                                                  @第9空间 请使用火狐、chrome等浏览器复制代码,低版本的IE不行

                                                                                              • 银行承兑汇票 0

                                                                                                不知道啊 有些看不懂

                                                                                                • yaxin 0

                                                                                                  我想请问你,你确定不是随便copy别人的文章?为什么限制最少输入字数的功能不管用?

                                                                                                  • 易资讯网 0

                                                                                                    确实没多大用处。。这么多限制,别人还不想留言了

                                                                                                  • 来自外部的引用: 2

                                                                                                    • 为留言模板添加js字数统计 | 张自云(朋)的博客
                                                                                                    • JS+PHP实现Wordpress留言板字数统计 | 筑梦者