WordPress提交評論ajax翻頁的效果會很大的提高用戶體驗度，雖然我們一般的個人WordPress博客評論也不會有很多，但是用戶體驗至上嘛，所以WordPress主題站小編為大家分享WordPress實現提交評論ajax翻頁效果教程，希望能給大家能用得上。

最終效果如下圖所示：

在使用AJAX加載評論時，需要在后臺設置-評論設置，其中每頁顯示評論數量可以根據你的需要自定義。

WordPress純代碼實現提交評論ajax翻頁效果

添加“加載更多”按鈕

首先我們在主題中查找評論分頁功能 paginate_comments_links()函數，并將其替換為以下代碼。若找不到此函數，請在代碼

1. …

$cpage = get_query_var('cpage') ? get_query_var('cpage') : 1;

if( $cpage > 1 ) {

echo '

var ajaxurl = \'' . site_url('wp-admin/admin-ajax.php') . '\',

parent_post_id = ' . get_the_ID() . ',

cpage = ' . $cpage . '

';

}

由于默認顯示最后的評論頁面，$cpage 所以等于注釋頁面的最大數量。條件 if( $cpage > 1 ) {意味著兩件事情同時發生 – 在下列情況下輸出加載更多按鈕和腳本。

無限加載 jQuery代碼

jQuery(function($){

//加載更多按鈕點擊事件

$('.comment_loadmore').click( function(){

var button = $(this);

//減少當前評論頁面的值

cpage - ;

$.ajax({

url : ajaxurl,

data : {

'action': 'cloadmore',

'post_id': parent_post_id,//當前文章

'cpage' : cpage,//當前評論頁

},

type : 'POST',

beforeSend : function ( xhr ) {

button.text('加載中...');

},

success : function( data ){

if( data ) {

$('ol.comment-list').append( data );

button.text('加載更多');

//如果最后一頁，則刪除按鈕

if ( barley.cpage == 1 )

button.remove();

} else {

button.remove();

}

}

});

return false;

});

});

這里減少 cpage 了的值，因為評論頁以降序顯示。接著就是加載這個 JQ 到頁面，這里就不詳細說了。

實現功能

最后我們在 functions.php 中插入下面代碼：

add_action('wp_ajax_cloadmore', 'comments_loadmore_handler'); // wp_ajax_{action}

add_action('wp_ajax_nopriv_cloadmore', 'comments_loadmore_handler'); // wp_ajax_nopriv_{action}

function comments_loadmore_handler(){

global $post;

$post = get_post( $_POST['post_id'] );

setup_postdata( $post );

wp_list_comments( array(

'avatar_size' => 100,

'page' => $_POST['cpage'],

'per_page' => get_option('comments_per_page'),

'style' => 'ol',

'short_ping' => true,

'reply_text' => '回復',

) );

die;

}

至此，WordPress純代碼實現提交評論ajax翻頁效果的教程就結束了，看到這里你應該也已經知道如何實現這個功能了。