WordPress预设自带一个「评论分页」功能，可以方便的防止过多评论导致页面过长，但是当访客在切换评论时，页面需要不停地经过刷新、加载，降低访客体验，而今天「畅想资源」就来教大家如何为WordPress添加AJAX无刷新的评论分页功能，提升网站的用户体验！ 
预览
可参考本站「留言本」页面！ 
教学
提示：在开始进行以下步骤前，请先确定你的网站已经成功加载jQuery库！
1、首先于主题的「评论 (comments.php)」文件内的「评论主题DIV（例如 commentlist 等）」的DIV外添加 <div id="loading-comments"><span>评论载入中，请稍等...</span></div>
2、然后将下列代码新增为JS文件（例如「ajax-comment-pages.js」等）并储存至WordPress主题目录下，然后在网页内使用 script 来引用该文件即可！
注意：请根据各行注释将相关DIV的 id 或 class 进行适当修改后方可于网页内正常使用！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/************* WordPress jQuery 添加AJAX无刷新之评论分页功能开始 *************/ /**** 详细教学请见：https://www.arefly.com/wordpress-ajax-comment-pages/ ****/ jQuery(document).ready(function($) { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // 请将下方的「#comments-navi」改为你的评论导航栏ID/CLASS！ $(document).on('click', '#comments-navi a', function(e) { e.preventDefault(); $.ajax({ type: "GET", url: $(this).attr('href'), beforeSend: function() { // 请将下方的「#comments_content」改为你的评论区块顶部任意ID/CLASS！ $body.animate({scrollTop: $('#comments_content').offset().top - 65}, 1500); setTimeout(function (){ $('#loading-comments').slideDown(); // 请将下方的「.navigation」改为你的导航栏ID/CLASS！ $('.navigation').remove(); // 请将下方的「.commentlist」改为你的整体评论内容之ID/CLASS！ $('.commentlist').fadeOut(800); }, 1700); }, dataType: "html", success: function(out) { // 请将下方的「.commentlist」改为你的整体评论内容之ID/CLASS！ result = $(out).find('.commentlist'); // 请将下方的「.navigation」改为你的导航栏ID/CLASS！ belownav = $(out).find('.navigation'); $('#loading-comments').slideUp(550); $('#loading-comments').after(result.fadeIn(800)); result.after(belownav); } }); }); }); /************* WordPress jQuery 添加AJAX无刷新之评论分页功能结束 *************/ |
3、现在在网页内试试看点击你的评论分页，是不是已经可以实现无刷新加载了？如果还不行，请确定DIV是否已经设定正常，或者于下方留言说明问题，本站将会尽力帮你解决！ 
