为 WordPress 主题启用无限滚动 [WordPress 提示]
在 Web 中,Infinite Scroll 指的是在用户向下滚动页面时不断加载下一个内容的概念。只要仍有内容可用,滚动就会继续显示下一行内容。您可以在Twitter和Facebook以及许多其他网站上找到这种体验。
如果您有理由在您的网站上实现相同的体验,并假设您使用 WordPress 构建您的网站,我们将向您展示如何启用无限滚动。
安装 Jetpack
尽管有多种插件和方法可以实现Infinte Scroll,但我更喜欢使用Jetpack中的一种。Jetpack 是由Automattic(WordPress 背后的人)开发的插件。它包含一组插件来扩展您的博客体验,包括 Infinite Scroll。
此功能在 2.0 版本中首次引入。但是,除非您使用的是TwentyTen、TwentyEleven和TwentyTwelve——默认的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 的以下页面。