使用wordpress博客的朋友可能都會發現一個問題,就是評論都是直接調用php的而不是ajax的,下面我來給各位介紹一下WordPress中Ajax評論分頁方法.

一.準備

加載 jQuery 庫,這個不解釋了.

二.開啟 WordPress 評論分頁

打開 WordPress 后臺 – 設置 – 討論,在“其他評論設置”中勾選分頁顯示評論,設置一下評論數目,這里的評論數目僅計算主評論,回復評論不作計算,這里 Kayo 填了比較大的數字(15),因為評論分頁分得太細會使用戶不便于閱讀之前的評論。

在后臺開啟評論分頁后,在 comments.php 中需要添加分頁導航的地方加入以下代碼(如主題中有類似代碼則無須再添加,另外代碼中的 nav 標簽為 HTML5 標簽，若主題沒有使用 HTML5 則有 div 代替即可,代碼如下:

1. <nav id="comments-navi">  
2.     <?php paginate_comments_links('prev_text=«&next_text=»');?>  
3. </nav> 

三.評論分頁的 SEO

從 SEO 的角度看,評論分頁會造成重復內容(分頁的內容正文都一樣，并且 keywords 和 description 也相同),這樣對于評論很多的博客很容易因為重復內容太多而降權,因此需要在 SEO 方面作出一些處理,最為方便有效的方法是使用 meta 標簽,在你的 header.php 原有的 meta 標簽下加入以下代碼，這樣分頁的頁面便會禁止被seo/seo.html" target="_blank">搜索引擎收錄,防止內容重復,代碼如下:

1. <?php if( is_single() || is_page() ) {  
2.     if( function_exists('get_query_var') ) {  
3.         $cpage = intval(get_query_var('cpage'));  
4.         $commentPage = intval(get_query_var('comment-page'));  
5.     }  
6.     if( !emptyempty($cpage) || !emptyempty($commentPage) ) {  
7.         echo '<meta name="robots" content="noindex, nofollow" />';  
8.         echo "n";  
9.     }  
10. }  
11. ?> 

四.Ajax 評論分頁

根據上文所述,現在主題中已經有評論分頁了,要做到 Ajax 的評論分頁,只需 JavaScript 的配合,不過在這之前首先要在評論列表前加入一個元素,用于在顯示新一頁評論列表時表示列表正在加載,假設主題模板 comments.php 的評論模塊結構如下:

1. <div class="comments">  
2.     <h3 id="comments-list-title">Comments</h3>  
3.     <!-- 顯示正在加載新評論 --> 
4.     <div id="loading-comments"><span>Loading...</span></div>  
5.     <!-- 評論列表 --> 
6.     <ol class="comment_list">          
7.         <li>...</li>  
8.         <li>...</li>  
9.         <li>...</li>  
10.     </ol>  
11.     <!-- 評論分頁導航 --> 
12.     <nav id="comments-navi">  
13.         <a class="prev page-numbers" href="#">1</a>  
14.         ...  
15.     </nav>  
16. </div> 

在你的 js 文件中加入以下 js 代碼實現評論分頁,代碼如下:

1. // 評論分頁  
2. $body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');  
3. // 點擊分頁導航鏈接時觸發分頁  
4. $('#comments-navi a').live('click', function(e){  
5.     e.preventDefault();  
6.     $.ajax({  
7.         type: "GET",  
8.         url: $(this).attr('href'),  
9.         beforeSend: function(){  
10.             $('#comments-navi').remove();  
11.             $('.comment_list').remove();  
12.             $('#loading-comments').slideDown();  
13.             $body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 );  
14.         },  
15.         dataType: "html",  
16.         success: function(out){  
17.             result = $(out).find('.comment_list');  
18.             nextlink = $(out).find('#comments-navi');  
19.             $('#loading-comments').slideUp('fast');  
20.             $('#loading-comments').after(result.fadeIn(500));  
21.             $('.comment_list').after(nextlink);  
22.         }  
23.     });  
24. }); 

加載條的 css (僅供參考),代碼如下:

#loading-comments {display: none; width: 100%; height: 45px; background: #a0d536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }

如果大家覺得這個很麻煩我們可使用分頁插件AJAX Comment Pager來實例

AJAX Comment Pager插件介紹：

AJAX Comment Pager插件的評論分頁功能增加 AJAX 處理功能，它不依賴任何 JavaScript 框架，若您要使用該才插件, 請確保滿足以下條件:

1.您正在使用 WordPress 2.7 或以上版本. (包括 beta 測試版)

2.您正在使用的主題定義了自定義的評論顯示方法. (基本上支持嵌套回復的都會定義該方法)

AJAX Comment Pager插件安裝：

1.下載AJAX Comment Pager插件,將壓縮包解壓到 "/wp-content/plugins/" 目錄中.

2.到 WordPress 后臺的 "Plugins" 頁面激活該插件.

3.到 WordPress 后臺的 "Settings -> AJAX Comment Pager" 頁面, 輸入相關信息和保存設置.

4.在 "comments.php" 文件中將 "<span id="cp_post_id"><?php echo $post->ID; ?></span>" 追加到 "<?php paginate_comments_links(); ?>" 的后面.

如果主題目錄下存在命名為 "ajax-comment-pager.css" 的文件,插件會它將作為樣式文件加載到頁面,如果該文件不存在,主題會將插件自帶的作為默認的樣式文件,并加載到頁面.