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()能有所帮助。