本文基于上一篇博文《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() ) {?>

注意事项

在使用infinite scroll的过程中，最关键的一个内容就是指向文章下一页的链接，infinite scroll正是用ajax方式去读取下一页内容，匹配、返回。所有要保证自己主题中有这个结构。