WordPress博客實現Ajax評論分頁教程

2024-09-07 00:51:52

字體：大中小

來源：轉載

供稿：網友

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

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

加載 jQuery 庫

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

開啟 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( !emptyempty($cpage) || !emptyempty($commentPage) ) {

        echo '<meta name="robots" content="noindex, nofollow" />';

        echo "/n";  //Vevb.com

    }

}

?>

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);

            }

        });

    });

});