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 代替即可。）

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

評論分頁的 SEO

從 SEO 的角度看，評論分頁會造成重複內容（分頁的內容本文都一樣，並且 keywords 和 description 也相同），這樣對於評論很多的部落格很容易因為重複內容太多而降權，因此需要在 SEO 方面作出一些處理，最為方便有效方法是使用 meta 標籤。在你的 header.php 原有的 meta 標籤下加入以下代碼，這樣分頁的頁面便會禁止被搜尋引擎收錄，防止內容重複。

 

<?php if( is_single() || is_page() ) {
    if( function_exists('get_query_var') ) {
        $cpage = intval(get_query_var('cpage'));
        $commentPage = intval(get_query_var('comment-page'));
    }
    if( !empty($cpage) || !empty($commentPage) ) {
        echo '<meta name="robots" content="noindex, nofollow" />';
        echo "\n";
    }
}
?>

Ajax 評論

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

 

<div class="commentshow">
  <div class="comments-loading">Loading...</div>
    <ul class="commentlist">
    <?php wp_list_comments('type=comment&callback=devecomment&max_depth=10000'); ?>
    </ul>
 
  <nav class="commentnav">
  <?php paginate_comments_links('prev_text=上一頁&next_text=下一頁');?>
  </nav>
</div>

在你的主題 js 檔案中加入以下 js 代碼實現評論分頁。

 

// 評論分頁
jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');//commentnav ajax
    $(document).on('click', '.commentnav a', function(e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: $(this).attr('href'),
            beforeSend: function() {
                $('.commentnav').remove();
                $('.commentlist').remove();
                $('.comments-loading').slideDown();
            },
            dataType: "html",
            success: function(out) {
                result = $(out).find('.commentlist');
                nextlink = $(out).find('.commentnav');
                $('.comments-loading').slideUp(550);
                $('.comments-loading').after(result.fadeIn(800));
                $('.commentlist').after(nextlink);
 
            }
        });
    });   
});

載入條的 css （本博 css ，僅供參考）

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