非插件实现WordPress评论实时预览功能

在Wordpress博客评论区添加评论预览的功能可以让你的读者在发表评论之前知道自己在写什么,以便及时发现评论的拼写和语法错误,给他们修改的机会。也有插件可以实现这个功能的,但我这里介绍的方法无需插件即可实现。

此方法采用jQuery和css来实现。

1.首先导入jQuery到主题,将下面这句代码添加到header.php中,放在wp_head(); 的前面:

<?php wp_enqueue_script('jquery'); ?>

2.在同一文件中,将下面的script代码放到< / head >的前面:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery("").add("<h3 id='preview-title'>Comment Preview</h3><div id='comment-preview'></div>").appendTo(document.body);
	jQuery("#comment-preview, #preview-title").insertAfter("#comment");
	var $comment = '';
	jQuery('#comment').keyup(function() {
		$comment = jQuery(this).val();
		$comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
		jQuery('#comment-preview').html( $comment );
	});
});
</script>

3.添加一些CSS以修饰一下评论的预览区,这里以ID为#comment-preview 和 #preview-title做例子:

#comment-preview {   
border: 1px solid #ccc;   
padding: 5px 15px 15px 15px;   
}

h3#preview-title {   
margin-bottom: 5px   
}

看看效果图:

comments preview

也可以在这里测试一下真正的评论预览效果: 评论预览测试

本文代码来源:dynamicwp

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《非插件实现WordPress评论实时预览功能》
日志链接: http://www.chenchunlin.info/add-comment-preview-function-to-your-wordpress-blog.html
博客名称: Chenchunlinblog

This entry was posted in WordPress and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

欢迎发表评论

我们不会公开您的邮箱地址, 标有*号的是必填项哦!

*
*

您可以使用这些HTML标签及其属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>