用户体验|WordPress 评论字数计数

前言:

利用jQuery可以为WordPress页面添加更丰富的交互功能,比如评论计数,包括限制评论字数和显示已输入的评论字数。

 

comment-limiter

这儿是代码:

限制评论字数

将下面的代码拷贝到footer.php中,需要页面已经加载jquery才能使用。代码中使用is_singular()和comments_open()限制这段脚本只能在可以显示评论输入框的页面(一般为post、page或attachment)且允许评论的情况下加载。只在需要时加载脚本是一个很好的习惯,可以提升页面加载速度。

  1. <?php if( is_singular() && comments_open() ): ?>
  2. <script type=“text/javascript”>
  3. jQuery(function($) {
  4.     //配置
  5.     var comment_input = $( ‘#commentform textarea’ );
  6.     var submit_button = $( ‘#commentform .form-submit’ );
  7.     var comment_limit_chars = 10;
  8.     // 计算并显示剩余字数
  9.     $( ‘<div class=“comment_limit_info”>剩余字数:<span>’ + comment_limit_chars + ‘</span></div>’ ).insertAfter( comment_input );
  10.     comment_input.bind( ‘keyup’, function() {
  11.         // 计算剩余字数
  12.         var comment_length = $(this).val().length;
  13.         var chars_left = comment_limit_chars – comment_length;
  14.         // 显示剩余字数
  15.         $( ‘.comment_limit_info span’ ).html( chars_left );
  16.         // 如果超过字数限制,隐藏提交按钮
  17.         if (submit_button)
  18.             ( chars_left < 0 ) ? submit_button.hide() : submit_button.show();
  19.     });
  20. });
  21. </script>
  22. <?php endif; ?>
显示已输入的评论次数

用法同上。

  1. <?php if( is_singular() && comments_open() ): ?>
  2. <script type=“text/javascript”>
  3. jQuery(function($) {
  4.     //配置
  5.     var comment_input = $( ‘#commentform textarea’ );
  6.     var comment_length = 0;
  7.     // 计算并显示已经输入的字数
  8.     $( ‘<div class=“comment_limit_info”>已输入:<span>’ +comment_length+ '</span></div>’ ).insertAfter( comment_input );
  9.     comment_input.bind( ‘keyup’, function() {
  10.         // 计算已经输入的字数
  11.         comment_length = $(this).val().length;
  12.         // 显示已经输入的字数
  13.         $( ‘.comment_limit_info span’ ).html( comment_length );
  14.     });
  15. });
  16. </script>
  17. <?php endif; ?>

写在后面:

干净漂亮,还能抵挡抵挡垃圾评论哦。

本文参考于http://www.solagirl.net/wordpress-comment-limiter.html   ,若有任何来源问题,请联系QQ:1516677079 及时更正。

最有意思的设计站点


最好的UI素材库

我们极力推荐: