WP的滚动加载文章插件有很多，支持最好是jetpack里的滚动设置，但是安装这个插件会调用一些wp.com的资源，会降低网站速度，所以我还是放弃这个安装jetpack了。
我这里用的是 Catch Infinite Scroll，我的主题是官方的twentytwenty 2020主题。本来我好想用2021主题的，但对比了一下，我还是更喜欢2020的一些细节局部，干脆就用2020算了
默认安装好这个插件就直接实现滚动加载了，我猜测是这个插件会识别当前主题自动设置选择器。但我用的是我自己的子主题，所以要自己设置一下选择器
- Navigation Selector是分页器的选择器 nav.navigation
- Next Selector 是下一页的链接选择器，a 元素 nav.navigation .nav-links a.next
- Content Selector 不填。填了无法实现加载，我也不知道怎么回事
- Item Selector 是单个文章的选择器 article.status-publish
填好之后这个插件就会把原来的分页器换成 read more 的按钮
但是我又发现一个问题，用2020主题加载的话，文章之间的 hr 分隔栏是正常显示的。但是子主题就不会显示 hr 元素
所以我在子主题里把hr元素放到 article 里了
while (have_posts()) {
$i++;
the_post();
get_template_part("template-parts/content", get_post_type());
}
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php if(is_archive()||is_home()) : ?>
<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
<?php endif; ?>
...接下来设置一下加载按钮的样式，默认就是个 read more 链接，我把它改成2020主题的按钮样式
#infinite-handle span button,
#infinite-handle span button:focus,
#infinite-handle span button:hover {
background: #cd2653;
border: none;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
letter-spacing: 0.0333em;
line-height: 1.25;
margin: 0;
opacity: 1;
padding: 18px 24px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: opacity 0.15s linear;
font-family: 'Lato', sans-serif;
font-size: 17px;
}加到子主题的style.css文件或者wp自定义主题里都行。
另外还要设置一下第一篇文章上面不需要分隔栏
#site-content article.status-publish:first-child hr {
display:none;
}
.archive-header + article hr {
display:none;
}
好了。到此完成，不用jetpack完美实现无限加载