跳至正文

为 WordPress 主题启用无限滚动 [WordPress 提示]

为 WordPress 主题启用无限滚动 [WordPress 提示]

在 Web 中,Infinite Scroll 指的是在用户向下滚动页面时不断加载下一个内容的概念。只要仍有内容可用,滚动就会继续显示下一行内容。您可以在TwitterFacebook以及许多其他网站上找到这种体验。

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

安装 Jetpack

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

此功能在 2.0 版本中首次引入。但是,除非您使用的是TwentyTenTwentyElevenTwentyTwelve——默认的WordPress 主题,否则您的主题中可能不会立即显示这种体验。由于每个主题都有独特的页面结构,因此 Jetpack 需要您的一些主题信息才能正常工作。

首先,确保安装了 Jetpack 并激活了 Infinite Scroll,如下所示。

添加无限滚动功能

与添加 Post Thumbnail 类似,Infinite Scroll 也添加了add_theme_support()功能,这也是我更喜欢使用 Jetpack 而不是其他选项的原因之一,因为它与 WordPress Core 功能很好地集成。

在此示例中,我使用ThemeZilla的免费WordPress 主题Launch

首先,我们需要创建一个函数来指定 Infinite Scroll 将用来附加内容的帖子模板。在这种情况下,我们将为模板调用content-post-standard.php

1个
2个
3个
function zilla_infinite_scroll_render() {
    get_template_part( 'content-post', 'standard' );
}

然后,我们可以通过这种方式启用 Infinite Scroll。

1个
2个
3个
4个
add_theme_support( 'infinite-scroll', array(
    'container' => 'primary',
    'render'    => 'zilla_infinite_scroll_render',
));

上面代码中的content参数指定了包含我们帖子的 id。在这种情况下,Launch主题将帖子包装在id="primary".

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

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

如果这与您的主题设计不相称,您可以将type参数设置为click,这样在用户单击按钮之前不会附加内容。

1个
2个
3个
4个
5个
add_theme_support( 'infinite-scroll', array(
    'type' => 'click',
    'container' => 'primary',
    'render'    => 'zilla_infinite_scroll_render',
));

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

最后的想法

这只是 Jetpack Infinite Scroll 的基本实现。对于大多数情况,这应该足够了。但是,如果您想更高级,可以转到 Jetpack 的以下页面

标签:

发表回复