【純代碼】為WordPress添加AJAX無刷新之評論分頁功能

Oct132014

作者：超级efly 发布：2014-10-13 18:13 分类：WordPress 阅读：3,500 95条评论

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 進行適當修改後方可於網頁內正常使用！

/************* 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無刷新之評論分頁功能結束 *************/

/************* 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是否已經設定正常，或者於下方留言說明問題，本站將會盡力幫你解決！

參考

WordPress Ajax 评论分页

WordPress分页评论Ajax载入

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/wordpress-ajax-comment-pages/

本文章由“超级efly”于2014年10月13日发表于“WordPress”分类

你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站

转载请注明：【純代碼】為WordPress添加AJAX無刷新之評論分頁功能 | 畅想资源

关键字：AJAX, AJAX迴響, WordPress, WordPress迴響

[上一篇] 【純代碼】為WordPress控制台首頁添加小工具教學

[下一篇] 爲WordPress添加「點擊展開/收縮」短代碼 [collapse] 功能

您可能还会对这些文章感兴趣！

【純代碼】為WordPress添加AJAX無刷新之評論分頁功能：目前有 95 条留言
访客以 55：40 大幅领先博主

评论载入中，请稍等……

44楼
1111 ：

111

2018-12-12 上午12:20 [回复]
43楼
黄小蚊 ：

博主好强这些都是wordpress经典的功能......

2018-05-14 上午1:58 [回复]
42楼
yanyan ：

真的可以吗？我试试

2016-09-05 下午3:04 [回复]
41楼
你好：

测试下，看看

2016-08-15 上午9:35 [回复]
40楼
leejon ：

测试ajax评论

2016-04-11 上午9:59 [回复]
39楼
晓庄：

分页倒是出来了。但有一个问题，点击回复，会刷新页面，时好时坏。
博主能帮忙看下嘛

2016-01-04 下午12:13 [回复]
38楼
晓庄：

唉。没弄好。一直出不来。

2016-01-02 下午9:41 [回复]
37楼
拽立网 ：

谢谢博主分享好东西，我学习研究一下！

2015-10-05 上午10:53 [回复]
- 超級efly ：
  
  感謝支持！
  
  2015-10-05 下午4:22 [回复]
  - 拽立网 ：
    
    弄不好，点击下一页消失，全部消失了！错在哪里？
    
    2015-10-06 上午8:53 [回复]
36楼
chasonma ：

路过，来看看！

2015-09-21 下午10:52 [回复]
35楼
亡月帝 ：

错过了几篇文章~~~~

2015-08-15 下午5:58 [回复]
34楼
我就有 ：

谢谢分享，学习了，博主你的头像好给力啊 - -！

2015-05-19 下午12:53 [回复]
33楼
料网：

博主，我今天尝试了一下。为什么点击页脚加载之后，评论列表重复出现了两次。。不知道这里能不能写链接，详见这里：http://www.liaosam.com/my-2014.html 。点击底部评论的页码1 之后好像页面加载的时候评论整个先后刷了两次（我注意的是右侧滚动条位置，第一次好像正常，第二次刷了以后导致出现两次评论列表。。）。

2015-03-09 下午3:37 [回复]
- 超级efly ：
  
  你好～我之前也遇到过类似问题，个人感觉是因为JS中的DIV没有设置好，才导致这样重复显示～你看看JS中的元素都按自己的需要调整了么？
  
  2015-03-09 下午6:18 [回复]
  - 料网：
    
    谢谢博主的快速回复！仔细检查了一遍，元素div和对象名称都是对的，现在怀疑可能是我用的另一个ajax提交评论的JS影响的。希望能顺利解决！
    
    2015-03-09 下午8:35 [回复]
32楼
协会主席 ：

翻页后头像加载不了了。。

2015-02-02 下午8:08 [回复]
- 超級efly ：
  
  奇怪...我這裏正常的啊？能不能F12看看是什麼錯誤呢？
  
  2015-02-03 下午7:08 [回复]
31楼
软件酷(WwW.Softku.NeT) ：

好像不兼容我主题

2015-01-25 下午11:25 [回复]
30楼
大肥羊 ：

开了图片lazyload，翻页后头像就加载不进来了。。。。

2014-11-23 上午10:49 [回复]
- 超級efly ：
  
  奇怪？我的網站麼？我這裏看起來沒問題啊...
  
  2014-11-23 下午6:57 [回复]
29楼
大肥羊 ：

评论要翻页的文章不多，就不折腾了。

2014-11-20 下午3:13 [回复]
- 超級efly ：
  
  網站變大以後就很有需要啦～
  
  2014-11-23 上午9:17 [回复]
28楼
凯凯：

帅哥，我使用了不行啊，点击下一页只显示在加载中，列表不显示

2014-11-15 下午5:54 [回复]
- 超級efly ：
  
  很可能是因爲你的主題評論DIV不同，自己拿F12看看修改對應代碼就行了～
  
  2014-11-23 上午9:16 [回复]
27楼
从良未遂 ：

我的是主题自带的哎

2014-11-06 上午9:38 [回复]
- 超級efly ：
  
  我的不是～
  
  2014-11-06 下午5:41 [回复]
26楼
fendou ：

我想问下博主这个评论功能怎么弄呢又有表情还可以插入链接

2014-10-30 上午11:29 [回复]
- 超級efly ：
  
  評論工具及表情可以分別參考「給WordPress評論框添加添加實用的小工具」及「給WordPress添加評論表情包」這兩篇文章哦！
  
  2014-10-30 下午6:20 [回复]