最近有一个wordpress主题需要用到无限加载文章列表,如Infinite Scroll插件的wordpress移植版,今天的话分享一个免插件实现wordpress无限加载文章的方法:
1、同样是基于Infinite Scroll插件,所以需要下载插件包:infinite-scroll-master
2、将以下loader图片下载到本地,并上传到你网站当前主题的images文件夹里面,或者去ajaxload重新生成一张。
3、将刚刚下载的压缩包内的jquery.infinitescroll.min.js文件上传到你当前主题的js文件夹。
4、添加分页代码,注意此无限加载的方法只在wordpress默认的分页代码下才能实现。
<div class="pagenavi"><?php next_posts_link('下一页 » ') ?><?php previous_posts_link('« 上一页') ?></div>
5、加载jquery.infinitescroll.min.js文件到你的主题,需要先确认你的主题是否已经载入了jquery库,并将以下代码添加到你当前主题的functions.php文件
//加载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');
6、加载无限加载配置js到你的主题,代码添加位置同上
//无限加载参数配置 function infinite_scroll_js() { if (!is_singular() ) { ?> <script type="text/javascript"> jQuery(document).ready(function(){ var infinite_scroll = { loading: { img: "<?php echo get_stylesheet_directory_uri(); ?>/images/loader.gif", msgText: "加载中...", finishedMsg: "已加载所有产品..." }, nextSelector:".pagenavi a", navSelector:".pagenavi", itemSelector:".post", contentSelector:".main", }; jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll ); }); </script> <?php } } add_action('wp_footer', 'infinite_scroll_js', 100);
6、参数说明
img: 等待加载时显示的动态图片URL路径 nextSelector: 下一页(Previous Post)链接CSS样式名称 + a标签(类选择器或ID选择器) navSelector: 包含上一页/下一页链接的样式名称(类选择器或ID选择器) itemSelector: 包含每篇文章内容的样式名称(类选择器或ID选择器) contentSelector: 包含所有文章的样式名称(类选择器或ID选择器)
7、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;} 以上,就能够实现wordpress无限加载的功能了,具体可以应用在展示类或者图片站以及移动端用户体验改善等等,代码经过测试,完美无错,如果配置不成功请多检查一下细节。
共有 0 条评论