提醒:本文最后更新于 4160 天前,文中所描述的信息可能已发生改变,请仔细核实。
于2012-10-09日取消了这一功能,(有一调试没通过,其他主题仍然可用,如果没有使用即显评论的话)
在评论较多的文章中,如果评论没有分页,文章页面往往显得过长,但如果使用 WordPress 自带的分页,在读取下一页(或上一页)评论时又要刷新整个页面。很烦,所以搞了Ajax异步加载,这显得更具用户体验,具体的效果可以看看本博的评论部分(guestbook或者一些回复比较多的帖子)。
实现 Ajax 评论分页并不困难,只要在comments.php添加一段js,然后在style.css中加入一句css(暂时没有美化,或者图片,目前以文字loading为提醒)。当然前提是本身就已经加载了ajax,还有jQuery库。另外就是开启 WordPress 评论分页
Loper版--Js in PHP(即本博客主题):
<!-- 异步加载 --> <script type="text/javascript"> jQuery(document).ready(function($) { $body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body'); $('.commentnav a').live('click', function(e){ e.preventDefault(); $.ajax({ type: "GET", url: $(this).attr('href'), beforeSend: function(){ $('.commentnav').remove(); $('.commentlist').remove(); $('#loading-comments').slideDown(); $body.animate({scrollTop: $('.commentsays').offset().top - 65}, 800 ); }, dataType: "html", success: function(out){ result = $(out).find('.commentlist'); nextlink = $(out).find('.commentnav'); $('#loading-comments').slideUp('fast'); $('#loading-comments').after(result.fadeIn(500)); $('.commentlist').after(nextlink); } }); }); }); </script>
CSS:
#loading-comments {display: none; width: 100%; height: 45px; background: #A0D536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }
最后一句话,想要拿走,另外有些人,不想多说了。
转载请注明转自:kn007的个人博客的《添加了 AJAX 评论分页异步加载》