0
篇帖子
实现步骤: 1、下载jQuery插件 infinite-scroll-master.zip ,解压后,把根目录的jquery.infinitescroll.min.js文件上传至当前主题的js文件夹; 2、下载动态图片(把鼠标移动图片上,右击,图片另存为),把该图片上传至当前主题的images文件夹; ajax-loder.gif 非wordpress插件实现滚动自动无限分页 3、分页代码:该方法只对wordpress默认“上一页、下一页”链接生效
4、在当前主题的functions.php文件中,添加以下代码:
<?php next_posts_link(‘下一页 » ‘) ?> <?php previous_posts_link(’« 上一页’) ?>
/* 加载infinite scroll插件脚本 / function infinitescroll_js() { wp_register_script(‘infinite_scroll’, get_stylesheet_directory_uri() . ‘/js/jquery.infinitescroll.min.js’, array(‘jquery’), null, true); if (!is_singular()) { wp_enqueue_script(‘infinite_scroll’); } } add_action(‘wp_enqueue_scripts’, ‘infinitescroll_js’); / 初始化infinite scroll插件配置参数 */ function infinite_scroll_js() { if (!is_singular() ) { ?> <?php } } add_action(‘wp_footer’, ‘infinite_scroll_js’, 100);参数说明:
img
: 等待加载时显示的动态图片URL路径
nextSelector
: 下一页(Previous Post)链接CSS样式名称 + a标签(类选择器或ID选择器)
navSelector
: 包含上一页/下一页链接的样式名称(类选择器或ID选择器)
itemSelector
: 包含每篇文章内容的样式名称(类选择器或ID选择器)
contentSelector
: 包含所有文章的样式名称(类选择器或ID选择器)
提醒:如果按上面方法没有生效,请检查样式是否选择错。
5、CSS样式代码:(把下面的CSS代码添加到当前主题的样式文件中,一般是style.css,可根据自己的喜欢修改对应代码)
/*无限加载*/ .pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}.pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}#infscr-loading img {display:block; margin:0 auto; text-align:center;}
本博客内所有原创和翻译的文章的版权归本人所有,允许第三方转载,但转载时请务必保留作者名,并注明出处链接,否则本人将保留追究其法律责任的权利。
「人生在世,留句话给我吧」