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

comment-limiter

限制评论字数

将下面的代码拷贝到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

5条留言

  1. 我用这个之后,在提交评论按钮上面出现两个同样的计数,输入字符时,两个数字同步变化。。。

    1. 这篇文章很久没更新了,方法也是很对旧版wordpress的,新版上没试过,出问题的话说明代码过时了。

  2. […] 今天在wpsnipp.com发现了一段很实用的代码,给WordPress的摘要栏目增加字数统计功能。摘要字数计算方法是,中文一个字算一个字符,英文一个字母算一个字符,标点也算一个字符,原理跟《WordPress 评论字数计数》相同。 […]

评论功能已关闭