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