WordPress 无限滚动Infinite scroll折腾记录

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完美实现无限加载

昨日当年

WordPress 无限滚动Infinite scroll折腾记录