WordPress的評論是普通的post提交了,為了讓頁面體驗達到更好我們需要使用ajax來操作了,但wordpress博客沒帶此功能了,下面我們就一起來看看WordPress博客實現Ajax評論分頁教程,希望文章能夠幫助到大家.

下面詳細介紹一下非插件實現 Ajax 評論分頁的實現過程.

加載 jQuery 庫

加載jQuery庫,一般主題都會加載jQuery庫的,如果你的沒有,那就在主題的header.php文件的(/head)(注意把()換成<>)前面添加以下代碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

開啟 WordPress 評論分頁

打開 WordPress 后臺 – 設置 – 討論,在“其他評論設置”中勾選分頁顯示評論，設置一下評論數目,這里的評論數目僅計算主評論,回復評論不作計算,我填了20,一是我的博文差不多這個數以內,而太多了影響整個文章的長度.

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

1. <nav class="commentnav"> 
2. <?php paginate_comments_links('prev_text=上一頁&next_text=下一頁');?> 
3. </nav> 

評論分頁的 SEO

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

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";  //Vevb.com 
9.     } 
10. } 
11. ?> 

Ajax 評論

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

1. <div class="commentshow"> 
2.   <div class="comments-loading">Loading...</div> 
3.     <ul class="commentlist"> 
4.     <?php wp_list_comments('type=comment&callback=devecomment&max_depth=10000'); ?> 
5.     </ul> 
6.  
7.   <nav class="commentnav"> 
8.   <?php paginate_comments_links('prev_text=上一頁&next_text=下一頁');?> 
9.   </nav> 
10. </div> 

在你的主題 js 文件中加入以下 js 代碼實現評論分頁.

1. // 評論分頁 
2. jQuery(document).ready(function($) { 
3.     $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');//commentnav ajax 
4.     $(document).on('click', '.commentnav a', function(e) { 
5.         e.preventDefault(); 
6.         $.ajax({ 
7.             type: "GET", 
8.             url: $(this).attr('href'), 
9.             beforeSend: function() { 
10.                 $('.commentnav').remove(); 
11.                 $('.commentlist').remove(); 
12.                 $('.comments-loading').slideDown(); 
13.             }, 
14.             dataType: "html", 
15.             success: function(out) { 
16.                 result = $(out).find('.commentlist'); 
17.                 nextlink = $(out).find('.commentnav'); 
18.                 $('.comments-loading').slideUp(550); 
19.                 $('.comments-loading').after(result.fadeIn(800)); 
20.                 $('.commentlist').after(nextlink); 
21.  
22.             } 
23.         }); 
24.     });     
25. }); 

加載條的 css(本博 css,僅供參考).

.comments-loading{display:none;background:none!important;height:50px;text-align:center;margin-bottom:20px;}