在Web中,“无限滚动”是指随着用户向下滚动页面而连续加载下一个内容的概念。 只要仍有内容可用,滚动将继续显示下一行内容。 您可以在Twitter , Facebook和许多其他站点上找到这种体验。
如果您有理由在网站上实施相同的体验,并且假设您是使用WordPress构建的,则我们将向您展示如何启用无限滚动。
安装Jetpack
尽管有多种插件和方法可以实现Infinte Scroll ,但我更喜欢使用Jetpack的插件和方法 。 Jetpack是由Automattic开发的插件-WordPress背后的家伙。 它包含一组扩展您的博客体验的插件,包括Infinite Scroll。
此功能最初是在2.0版中引入的。 但是,除非您使用默认的WordPress主题 TwentyTen , TwentyEleven和TwentyTwelve ,否则体验可能不会立即在您的主题中显示。 由于每个主题都有独特的页面结构,因此Jetpack需要您的主题信息,才能使它起作用。
首先,确保已安装Jetpack并激活了无限滚动,如下所示。
![](https://i-blog.csdnimg.cn/blog_migrate/1407449b1104bf36202001f5b8ec372f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1407449b1104bf36202001f5b8ec372f.png)
添加无限滚动功能
与添加Post Thumbnail类似,Infinite Scroll是通过add_theme_support()
函数添加的,这是我更喜欢使用Jetpack而不是其他选项的原因之一,因为它与WordPress Core函数很好地集成在一起。
在此示例中,我使用的是ThemeZilla中的免费WordPress主题 ,即Launch 。
首先,我们需要创建一个函数来指定Infinite Scroll用来添加内容的帖子模板。 在这种情况下,我们将调用content-post-standard.php作为模板。
function zilla_infinite_scroll_render() {
get_template_part( 'content-post', 'standard' );
}
然后,我们可以以这种方式启用无限滚动。
add_theme_support( 'infinite-scroll', array(
'container' => 'primary',
'render' => 'zilla_infinite_scroll_render',
));
上面代码中的content
参数指定了包含我们帖子的ID。 在这种情况下, 启动主题将帖子包装在id="primary"
。
![](https://i-blog.csdnimg.cn/blog_migrate/86427295d7544a1d3979e2793b07aba9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/86427295d7544a1d3979e2793b07aba9.png)
而render
参数指定应在其上格式化内容的模板。 此时,重新加载网站时,效果应该已经在您的帖子中可见。
![](https://i-blog.csdnimg.cn/blog_migrate/6a0644c24ad8e32371acbec46fc30b6d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a0644c24ad8e32371acbec46fc30b6d.png)
但是,请注意,页脚现在已覆盖在您的帖子上。
![](https://i-blog.csdnimg.cn/blog_migrate/ebd0822bd46bbb0b279eb6ce31689645.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ebd0822bd46bbb0b279eb6ce31689645.png)
如果这不适合您的主题设计,则可以将type
参数设置为click
,这样在用户单击按钮之前,不应附加内容。
add_theme_support( 'infinite-scroll', array(
'type' => 'click',
'container' => 'primary',
'render' => 'zilla_infinite_scroll_render',
));
Jetpack将附加按钮供用户单击以显示下一个内容。
![](https://i-blog.csdnimg.cn/blog_migrate/69febb39d57d937d2130026490731757.png)
![](https://i-blog.csdnimg.cn/blog_migrate/69febb39d57d937d2130026490731757.png)
最终思想
这仅仅是Jetpack Infinite Scroll的基本实现。 在大多数情况下,这已足够。 但是,如果您想更高级,可以转到Jetpack的下一页 。
翻译自: https://www.hongkiat.com/blog/wordpress-infinite-scroll/