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是否已經設定正常,或者於下方留言說明問題,本站將會盡力幫你解決!
111
博主好强 这些都是wordpress经典的功能......
真的可以吗?我试试
测试下,看看
测试ajax评论
分页倒是出来了。但有一个问题,点击回复,会刷新页面,时好时坏。
博主能帮忙看下嘛
唉。没弄好。一直出不来。
谢谢博主分享好东西,我学习研究一下!
感謝支持!

弄不好,点击下一页消失,全部消失了!错在哪里?
路过,来看看!
错过了几篇文章~~~~
谢谢分享,学习了,博主你的头像好给力啊 - -!
博主,我今天尝试了一下。为什么点击页脚加载之后,评论列表重复出现了两次。。不知道这里能不能写链接,详见这里:http://www.liaosam.com/my-2014.html 。点击底部评论的 页码1 之后 好像页面加载的时候评论整个先后刷了两次(我注意的是右侧滚动条位置,第一次好像正常,第二次刷了以后导致出现两次评论列表。。)。
你好~我之前也遇到过类似问题,个人感觉是因为JS中的DIV没有设置好,才导致这样重复显示~你看看JS中的元素都按自己的需要调整了么?

谢谢博主的快速回复!仔细检查了一遍,元素div和对象名称都是对的,现在怀疑可能是我用的另一个ajax提交评论的JS影响的。希望能顺利解决!
翻页后头像加载不了了。。
好像不兼容我主题
开了图片lazyload,翻页后头像就加载不进来了。。。。
评论要翻页的文章不多,就不折腾了。
帅哥,我使用了不行啊,点击下一页只显示在加载中,列表不显示
我的是主题自带的哎
我想问下博主这个评论功能怎么弄呢 又有表情还可以插入链接