本文基于上一篇博文《WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录》而写,上文说到WordPress插件Infinite Scroll的自动加载分页方式,这种模式的缺点显而易见——用户永远无法到达页面底部。因此介绍另一种模式:手动点击加载实现。
手动加载与自动加载在代码上的区别
手动加载,即当页面滚动到底部时,不自动读取下一页,而是显示一个“Load more”按钮,用户点击这个按钮再加载下一页。
代码与上文差别不大,仅有两点变化:
引入behavior参数,infinite scroll jquery插件作者已经写好了手动加载behavior的js脚本,下载之
使用callback功能
为什么有callback?
infinite scroll说到底不过是用jquery ajax的load方法去读取下一页的内容,load()允许只返回页面的一部分,根据设定的jquery选择符去匹配,具体到infinite scroll,我们用contentSelector参数指定返回post内容,其它的都不要。
重点是:load()返回html内容时不会去管你head中执行了多少javascript代码,偏偏你的内容就需要一段js来初始化才能正确显示,比如用masonry实现瀑布流。callback在这个时候就变得有用了,你需要执行什么js函数,放到callback里重新执行一遍,保证内容可以正确渲染。
我做的事情比较简单,不需要太多js代码,但我需要在文章加载完后把Load more按钮挪到最下面,这个放到callback中执行。
手动加载模式的代码
手动加载模式的代码,仍然分加载脚本和脚本初始化两个步骤,要多加载一个behavior文件。
load_child_theme_textdomain( 'tt_child', get_stylesheet_directory());
/**
* Load javascripts used by the theme
*/
function custom_theme_js() {
wp_register_script('infinite_scroll', get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'), null, true);
wp_register_script('infinite_scroll_behavior', get_stylesheet_directory_uri() . '/js/behaviors/manual-trigger.js', array('jquery','infinite_scroll'), null, true);
if (!is_singular()) {
wp_enqueue_script('infinite_scroll');
wp_enqueue_script('infinite_scroll_behavior');
}
}
add_action('wp_enqueue_scripts', 'custom_theme_js');
/**
* Infinite Scroll
*/
function custom_infinite_scroll_js() {
if (!is_singular() ) {
?>
<script>
jQuery(document).ready(function(){
/**
* Customize the previous navitation menu
*/
jQuery('#nav-below .nav-previous a').text('<?php _e('Load More...', 'tt_child'); ?>');
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",
finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"
},
behavior: 'twitter',
nextSelector:'#nav-below .nav-previous a',
navSelector:"#nav-below",
itemSelector:"article",
contentSelector:"#content"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){
jQuery('#nav-below').insertAfter('#content article:last');
});
});
</script>
<?php
}
}
add_action('wp_footer', 'custom_infinite_scroll_js', 100);
注意事项
在使用infinite scroll的过程中,最关键的一个内容就是指向文章下一页的链接,infinite scroll正是用ajax方式去读取下一页内容,匹配、返回。所有要保证自己主题中有这个结构。