Infinite Ajax Scroll一個jQuery插件應用介紹

Infinite Ajax Scroll jQuery插件應用介紹

Infinite Ajax Scroll是一個jQuery插件，能夠將Wordpress分頁導航變爲相似瀑布流的樣子（小問題：瀑布有什麼特色呢？若是你知道答案，就明白我爲何說「相似瀑布流的樣子了」），具備良好的用戶體驗，一個顯著的問題是，這種ajax效果的SEO效果很差。

瀑布流
1.Infinite Ajax Scroll的相關連接

下載地址：

https://github.com/webcreate/infinite-ajax-scroll

infinite-ajax-scroll的插件首頁：http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin

演示頁：http://www.fieg.nl/ias-demo
 2.將Infinite Ajax Scroll集成到wordpress中

使用paginate_links()函數，便可方便的將Wordpress的分頁導航更換爲瀑布流導航，上代碼：

    <div class="pagination">  
    <?php  
    global $wp_query;   
    $big = 999999999;    
    echo paginate_links( array(   
            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),   
            'format' => '?paged=%#%',   
            'current' => max( 1, get_query_var('paged') ),   
            'total' => $wp_query->max_num_pages   
        ));   
    ?>  
    </div>  

 

能夠將上面的php看成一個函數寫進functions.php中：

    // Pagination for paged posts, Page 1, Page 2, Page 3, with Next and Previous Links, No plugin   
    function html5wp_pagination()   
    {   
        global $wp_query;   
        $big = 999999999;//足夠大吧！   
        echo paginate_links(array(   
            'base' => str_replace($big, '%#%', get_pagenum_link($big)),   
            'format' => '?paged=%#%',   
            'current' => max(1, get_query_var('paged')),   
            'total' => $wp_query->max_num_pages   
        ));   
    }  

 
3.引入Infinite Ajax Scroll文件並寫必要的代碼

    jQuery(document).ready(function($) {   
      jQuery.ias({   
        container : '.posts',   
        item: '.post',   
        pagination: '.pagination',   
        next: '.next',   
        loader: '<i class="icon-spinner icon-spin"></i> 載入更多...',   
        trigger: '下一頁',   
        onRenderComplete: function() {   
            $("abbr.timeago").timeago();   
        },   
      
      });   
    });  

上面的<i class="icon-spinner icon-spin">是圖標字體Font Awesome3.0（最新版本是4.0，官網連接：http://fontawesome.io/）裏的一個圖標，用來表示正在載入更多內容。
4.小結

Ajax的瀑布流分頁具備良好的用戶體驗，雖然在網站自己的SEO有優化上可能暫時有所欠缺，可是也是值得一用的。因此，建議在製做Wordpress主題的時候，在後臺加上設置：默認採用這種無限滾動的分頁方式，可選通常的分頁方式，並給出說明，例如：

Wordpress分頁導航

本文介紹瞭如何將免費的jQuery插件：Infinite Ajax Scroll集成到Wordpress中去，用的是Wordpress原生的函數paginate_links()，惟一須要修改的就是CSS樣式表裏的：posts（文章列表的CSS類）、post（文章列表中單篇文章的CSS類）。

但願本文能對你瞭解Infinite Ajax Scroll這個免費插件和Wordpress的原生函數paginate_links()能有所幫助。