WordPress 评论字数计数

最后更新于 2015 年 8 月 14 日

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

限制评论字数

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

<?php if( is_singular() && comments_open() ): ?>
<script type="text/javascript">
jQuery(function($) {
	//配置
	var comment_input = $( '#commentform textarea' );
	var submit_button = $( '#commentform .form-submit' );
	var comment_limit_chars = 10;

	// 计算并显示剩余字数
	$( '<div class="comment_limit_info">剩余字数:<span>' + comment_limit_chars + '</span></div>' ).insertAfter( comment_input );
	comment_input.bind( 'keyup', function() {
		// 计算剩余字数
		var comment_length = $(this).val().length;
		var chars_left = comment_limit_chars - comment_length;

		// 显示剩余字数
		$( '.comment_limit_info span' ).html( chars_left );
		// 如果超过字数限制，隐藏提交按钮
		if (submit_button)
			( chars_left < 0 ) ? submit_button.hide() : submit_button.show();
	});
});
</script>
<?php endif; ?>

显示已输入的评论次数

用法同上。

<?php if( is_singular() && comments_open() ): ?>
<script type="text/javascript">
jQuery(function($) {
	//配置
	var comment_input = $( '#commentform textarea' );
	var comment_length = 0;

	// 计算并显示已经输入的字数
	$( '<div class="comment_limit_info">已输入:<span>' +comment_length+　'</span></div>' ).insertAfter( comment_input );
	comment_input.bind( 'keyup', function() {
		// 计算已经输入的字数
		comment_length = $(this).val().length;

		// 显示已经输入的字数
		$( '.comment_limit_info span' ).html( comment_length );
	});
});
</script>
<?php endif; ?>

参考文章

代码来自《Comment Length Limiter》