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