infinite scroll WordPress插件 wordpress滚动插件

在Web中，“无限滚动”是指随着用户向下滚动页面而连续加载下一个内容的概念。 只要仍有内容可用，滚动将继续显示下一行内容。 您可以在Twitter ， Facebook和许多其他站点上找到这种体验。

如果您有理由在网站上实施相同的体验，并且假设您是使用WordPress构建的，则我们将向您展示如何启用无限滚动。

安装Jetpack

尽管有多种插件和方法可以实现Infinte Scroll ，但我更喜欢使用Jetpack的插件和方法 。 Jetpack是由Automattic开发的插件-WordPress背后的家伙。 它包含一组扩展您的博客体验的插件，包括Infinite Scroll。

此功能最初是在2.0版中引入的。 但是，除非您使用默认的WordPress主题 TwentyTen ， TwentyEleven和TwentyTwelve ，否则体验可能不会立即在您的主题中显示。 由于每个主题都有独特的页面结构，因此Jetpack需要您的主题信息，才能使它起作用。

首先，确保已安装Jetpack并激活了无限滚动，如下所示。

添加无限滚动功能

与添加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" 。

而render参数指定应在其上格式化内容的模板。 此时，重新加载网站时，效果应该已经在您的帖子中可见。

但是，请注意，页脚现在已覆盖在您的帖子上。

如果这不适合您的主题设计，则可以将type参数设置为click ，这样在用户单击按钮之前，不应附加内容。

add_theme_support( 'infinite-scroll', array(
    'type' => 'click',
    'container' => 'primary',
    'render'    => 'zilla_infinite_scroll_render',
));

Jetpack将附加按钮供用户单击以显示下一个内容。

最终思想

这仅仅是Jetpack Infinite Scroll的基本实现。 在大多数情况下，这已足够。 但是，如果您想更高级，可以转到Jetpack的下一页 。

翻译自: https://www.hongkiat.com/blog/wordpress-infinite-scroll/