wordpress简单修改无刷新翻页和提交
很多朋友在做留言板的时候,会发现,wordpress默认的提交评论和评论翻页的方式是整页的刷新,这样的用户体验似乎并不是非常友好,于是AJAX提交方式成为制作评论时候的专属利器。
在很多wordpress网页模板中,使用AJAX提交方式是使用插件来完成的,还有一些需要替换评论文件(comments.php)为AJAX文件,这样的方式都能够成功的进行AJAX无刷新提交wordpress评论和无刷新的翻页,但是对于不想过多使用插件和过多改动代码的朋友们来说,这样的方式似乎复杂了些,对程序的压力大了一些,那么有没有一种简单的方法去实现这两种功能呢?
下面,我们就来介绍一下,以最简单的方式,使用jQuery+Ajax实现wordpress网站主题的无刷新提交和无刷新翻页把!~
首先 ,打开你的comments.php,这个文件的评论列表在有的wordpress主题中直接输出的,有的则是wordpress默认的样式,没关系,这两种我们都能够轻轻松松的实现。
在comments.php中,我们主要需要注意的只有列表的判断,默认的comments.php为例如下图:找到评论列表判断。
这里,我们需要修改的是,如果没有评论,也要输出评论列表,将 else:以上的输出复制到 else:下,这样的做法是,实现刷新列表时,如果没有评论,也能够刷新出来第一条评论。
现在,我们在comments.php开始书写jQuery代码,这也是本文最重要一段代码:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”></script> <!– 载入ajax–>
<script src=“http://malsup.github.com/jquery.form.js”></script> <!– 载入jquery表单提交–>
<!– jquery无刷新翻页开始–>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘.previous a‘).live(‘click’, function(e){//找到分页文件的A标签
e.preventDefault();
var link = $(this).attr(‘href‘);
$(‘#container‘).html(‘Loading…’);//载入时的加载显示为:loading
$(‘.commentlist‘).fadeOut(500).load(link + ‘ .commentlist’, function(){ $(‘.commentlist’).fadeIn(500); });//使用淡入淡出的方式显示效果刷新列表(.commentlist)
});});
</script>
<!– jquery无刷新翻页完–>
<!– jquery无刷新提交表单开始–>
<script>
$(document).ready(function()
$(‘#commentform‘).ajaxForm(function() { //找到表的ID
$(‘.commentlist‘).fadeOut(500).load(‘#’ + ‘ .commentlist’, function(){ $(‘.commentlist’).fadeIn(500); });//提交表之后,刷新评论列表
$(‘.tishi‘).fadeIn(‘500’);//这里做一个文本或者图片的提示效果,默认CSS为 .tishi CSS中显示方式默认为 display:none
setTimeout(“$(‘.tishi’).fadeOut(‘slow’)”,3000); // 提示效果显示3秒消失
});
});
</script>
<!– jquery无刷新提交表单完–>
这里加入了一个提示的效果,你可以用文本或者图片的提示,默认CSS为 .tishi, CSS中显示方式为 display:none,提示三秒后消失,正好三秒内,提交也完成了,提交者就能看到自己的评论了。
这里,最主要的是在jQuery中,需要填写你自己wordpress主题文件中的表单名称和评论列表名称,基本上就不会有问题。
至此,整个无刷新提交表单和无刷新评论翻页就完成了~,是不是很简单呢? 你也可以用这些来举一反三,实现更多酷炫的效果哦~
附:jQuery+Ajax实现wordpress网站主题的无刷新提交和无刷新翻页的comments.php下载(全注释,你懂得)
原创文章,转载请保留原址:http://www.themepark.com.cn/?p=1264
大哥我搞半天,还是没有搞对。忘了评论的插件也可以实现这样的效果??比如多说
是的,多说是自带的ajax提交,对于表单提交,你可以参阅这篇文章:http://www.themepark.com.cn/ajaxformzjddajaxbdtjjquerycj.html