Support Home > 外观 > 无限滚动

无限滚动

利用“无限滚动”功能,当读者到达页面底部时,系统会在屏幕上自动显示接下来的文章,而无需点击链接来转至下一组文章。

与 Jetpack 中的许多功能不同,“无限滚动”功能仅适合支持此功能的主题。由于每个主题的构造略有不同,因此“无限滚动”功能需要获得主题的相关信息才能正常运行。

注意:现在,大部分主题均已内置对“无限滚动”功能的支持!要查看您的主题是否支持“无限滚动”功能,请在站点的控制面板中依次转到 Jetpack设置撰写,然后在“主题增强”部分下面查看。

如果您的主题未内置对“无限滚动”功能的支持,请继续阅读,详细了解关于为主题添加支持以及使用 CSS 定制外观的说明。

添加支持

启用“无限滚动”功能与添加对文章缩略图或编辑器样式的支持非常相似,因为我们使用的是 add_theme_support()。在调用 add_theme_support() 时提供一些关键信息,“无限滚动”功能便会与您的主题无缝集成。
如果您有精心设计的主题(例如 WordPress 默认主题),那么添加“无限滚动”功能简直轻而易举。下面介绍了如何为“Twenty Twelve”主题添加“无限滚动”功能:

add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'footer' => 'page',
) );

按照上述方法添加之后,您可以获得功能完备的无限滚动体验。

container

container 参数是向主题添加“无限滚动”功能的核心:它会指定 HTML 元素的 ID,“无限滚动”功能应该向该元素添加其他文章。默认值为 content,但可以是支持主题中显示的任何有效的 CSS ID,并且适合附加文章。通常情况下,它将作为主题中文章的父容器。

footer

“无限滚动”功能存在一个问题,就是您无法访问页面的注脚,因为每当您快要到达最后时,系统就会加载新文章。我们的“无限滚动”功能附带固定注脚,在您向下滚动页面时会滑动显示。footer 参数有助于将此注脚与主题设计进行融合。通过传递其他 ID,“无限滚动”功能注脚将匹配其宽度,以便完美切合您的设计。如果您传递的是 false 值,则系统不会添加新注脚。
您还可以调整其他参数,以下示例显示了每个配置选项的所有默认值:

add_theme_support( 'infinite-scroll', array(
'type' => 'scroll',
'footer_widgets' => false,
'container' => 'content',
'wrapper' => true,
'render' => false,
'posts_per_page' => false,
) );

下面将详细讲解每个选项:

type

type 接受两种不同的值:scrollclick。该选项控制“无限滚动”功能的默认行为。scroll 将在访客到达当前文章列表底部时自动加载文章,而 click 显示加载更多文章按钮,允许用户在加载更多文章时进行控制。

scroll 为默认值,但是如果主题有注脚小组件,则该值会被 click 覆盖,以便用户可以访问小组件。

footer_widgets

footer_widgets 参数接受各种值,并且指明主题是否有注脚小组件。如果存在注脚小组件,则滚动类型将设为 click,这样小组件才可访问。

简单地说,如果注脚应该始终显示或永远不显示,那么可以分别设置布尔值 truefalse
此外,footer_widgets 参数可以接受代表一个边栏 ID(例如 'sidebar-1')或一组边栏 ID 的字符串。“无限滚动”功能代码将检查边栏是否包含小组件,并据此设置相应的 footer_widgets 参数值。

如果主题将小组件区域置于文章列表下方,我们强烈建议您尽可能提供边栏 ID。这样一来,通过动态确定滚动类型应为 scroll 还是 click,从而为主题用户提供最佳体验。也就是说,如果主题从一开始就指定 click 作为滚动类型,那么您可以安全地省略 footer_widgets 参数。

如果这些选项仍不能满足您的需求,则可以使用 infinite_scroll_has_footer_widgets 过滤器,实现高级逻辑。过滤器必须返回布尔值,并且可用于检测是否存在导航菜单或使用移动设备的访客。

wrapper

wrapper 参数的运行与 footer_widgets 类似,因为它接受几种不同的值。当附加到前一个参数指定的容器时,该参数确定 div 元素是否包含每组附加文章。
如果已指定布尔值(truefalse),附加文章周围是否放置了使用 infinite-wrap 类的 div

要使用自定义类将文章包括在 div 中,请将 wrapper 参数设置为代表自定义类的字符串。
请注意,wrapper 参数仅接受不含空格的单一字符串。

通常情况下,最好将追加文章包含在 div 中,除非这样做会导致无效的标记。例如,如果主题使用列表元素(olul)显示文章,则应该禁用封装容器,这样 div 元素才不会在非其所属的位置显示。

Render

“无限滚动”功能使用标准的 WordPress 循环呈现其追加的附加文章,并且在 content-{post format}.php 表单中利用模板部分。如果主题至少包含 content.php,那么 render 参数可以省略。以下是“无限滚动”功能使用的默认呈现函数:

while( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}

如果需要进行更丰富的自定义,或者主题没有使用 content 模板部分,则应该为 render 参数指定函数名称,并且该函数将用于为“无限滚动”功能生成标记。该函数必须包含 WordPress 循环的 while() 部分,并且可以在呈现文章时利用主题可用的任何函数。

posts_per_page

默认情况下,type 参数控制每次“无限滚动”功能运行时可加载的文章数。对于 scroll 类型,“无限滚动”功能每次激活后可加载七 (7) 篇文章。对于 click 类型,您可以在“设置”→“阅读”下面找到站点“博客页面中最多显示”值。
但是,如果主题的布局需要一定数量的文章,则 posts_per_page 参数将覆盖前面讨论的默认值。例如,在三栏布局的主题中,大于或小于三篇文章会导致布局不均匀,因此该控制选项会很有帮助。

示例

由于存在各种各样的主题和主题程序,因此我们的目标是充分控制“无限滚动”功能的行为,以支持众多主题。也就是说,根据我们的 WordPress.com 体验,通常每个主题只需要很少的配置选项。出于演示目的,我们已提供 WordPress 默认主题的“无限滚动”功能配置。

Twenty Twelve
/**
* 为“无限滚动”功能添加主题支持。
*
* @uses add_theme_support
* @return void
*/
function twenty_twelve_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

对于不熟悉“Twenty Twelve”主题的用户,它使用 content-{post format}.php 模板部分,并且在文章下面没有小组件区域,因此我们省略了 footer_widgetsrender 参数。实际上,由于 container 值与默认值匹配,因此该参数也可以忽略;为了清楚起见,我们暂且保留了。

Twenty Eleven
/**
* 为“无限滚动”功能添加主题支持。
*/
function twenty_eleven_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
'footer' => 'page',
) );
}
add_action( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

“Twenty Eleven”附带注脚小组件区域,但是由于只要您到达文章底部,系统就会添加新文章,因此当您向下滚动时,无法访问此区域。为解决此问题,我们会将包含这些小组件区域的 ID 的数组传递给 footer_widgets。现在,如果其中某个边栏包含小组件,“无限滚动”功能插件将会检测到此组件,并且自动切换到 click 类型(点击此处即可按需加载更多文章),因此您的注脚内容仍然可以完全访问。如果您的主题包含注脚小组件,可考虑这种方法,这样您可以大大改善用户的体验。

Twenty Ten
/**
* 为“无限滚动”功能添加主题支持
*/
function twenty_ten_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'twenty_ten_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
* 设置为调用文章而呈现的代码,
* 尽可能连接到模板部分。
*
* 注意:必须定义一个循环。
*
function twenty_ten_infinite_scroll_render() {
get_template_part( 'loop' );
}

“Twenty Ten”使用略微不同的模板结构呈现文章,因此我们需要为无限滚动提供自定义呈现函数。

通过类型实现

最后的需要讲解的是,如何让“无限滚动”功能与您的站点设计完美融合。“无限滚动”功能基于支持 body_class 的主题,并且利用一些特定的主体类,为主题开发人员提供最大的灵活性,进而改善体验:如果“无限滚动”功能处于活动状态,则 body 将包含 infinite-scroll 类;如果滚动类型为“scroll”,则还会有 neverending 类。博客中的最后一篇文章加载之后,infinity-end 类将会添加。借助这些类,您可以隐藏常规的注脚和导航链接,并且在“无限滚动”功能完成之后再次显示。示例:

/* “无限滚动”功能处于活动状态时,隐藏导航链接和站点注脚 */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
display:none;
}
/* 所有文章加载完成后,再次显示注脚 */
.infinity-end.neverending #footer {
display:block;
}

还有两个元素需要确定样式,以便它们符合您的主题:

[...]

[…]

span.infinite-loader 是在检索新文章时显示的加载指示器。它作为容器的子项插入,并且在不再需要时,系统可能会将其隐藏,而不是从 DOM 中删除。确保您的 CSS 可以处理这两种情况。
div#infinite-handle 是针对 type=click 显示的加载更多文章按钮。如果您的主题将始终使用 type=scroll,并且永远不会有任何注脚小组件,那么您可以忽略此项。

JavaScript 事件

值得一提的是,主题中存在一些情况,需要在添加文章之后进行 JavaScript 交互。举例来说,如果某个主题使用 jQuery Masonry,则需要触发该库,才能定位其他文章。认识到这一需求后,我们会在追加文章之后触发事件。要利用此事件,只需捕获在 document.body 上触发的 post-load 事件即可:

( function( $ ) {
$( document.body ).on( 'post-load', function () {
// 新文章已添加到页面中。
} );
} )( jQuery );

将自定义参数添加到“无限滚动”查询

有些主题和插件会为文章查询添加额外参数,通常用于更改文章的排序或加载方式。您也可以利用 infinite_scroll_query_args 过滤器将这些额外参数添加到“无限滚动”功能。在以下示例中,我们将添加 2 个自定义排序参数,即 orderorderby

/**
* 按文章名称的字母顺序排列所有“无限滚动”结果
*
* @param array $args
* @filter infinite_scroll_query_args
* @return array
*/
function jetpack_infinite_scroll_query_args( $args ) {
$args['order'] = 'ASC';
$args['orderby'] = 'name';
return $args;
}
add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );

故障排除

我已经将“无限滚动”功能设为在读者向下滚动页面时加载更多文章,但是仍然显示“早前文章”按钮。

您的主题是否有注脚小组件?如果注脚小组件区域有任何小组件,“无限滚动”功能将自动切换使用“早前文章”按钮,确保注脚小组件可以在您的站点上显示。如果您希望在向下滚动页面的同时加载文章,您可以将小组件置于其他小组件区域,例如边栏。如果您的主题只有注脚小组件区域,您可能需要寻找其他包含更多小组件区域选项的主题。

其他注意事项

认识到该功能需要有主题支持才可用,因此我们已经将对 WordPress 默认主题、Twenty Ten、Twenty Eleven 等的支持捆绑到 Jetpack。如果您恰巧在使用其中的某个主题,则可以启用“无限滚动”功能并立即享用此功能。如果您在使用 WordPress.org 中的某个 Automattic 主题,那么这些主题应该已经通过“无限滚动”支持进行更新(如果当前所用主题有可用更新,则功能卡将向可以升级主题的用户提供提示)。

隐私信息

默认情况下,该功能已取消激活。如果您需要停用此功能,请依次点击 Jetpack – 设置 – 撰写,进入主题增强部分,切换使用默认主题行为加载更多文章设置。

有关您站点上的数据使用情况的更多信息
使用的数据
站点所有者/用户
为了通过 WordPress.com 统计信息(必须启用才能跟踪页面浏览量)以及额外加载次数记录页面浏览量,请使用以下信息:IP 地址、WordPress.com 用户 ID(如果已登录)、WordPress.com 用户名(如果已登录)、用户代理、访问 URL、参考 URL、事件时间戳、浏览器语言、国家/地区代码。
站点访客
为了通过 WordPress.com 统计信息(必须启用才能跟踪页面浏览量)以及额外加载次数记录页面浏览量,请使用以下信息:IP 地址、WordPress.com 用户 ID(如果已登录)、WordPress.com 用户名(如果已登录)、用户代理、访问 URL、参考 URL、事件时间戳、浏览器语言、国家/地区代码。
跟踪的活动
站点所有者/用户
每次额外加载时(即当您向下滚动到页面底部并自动加载一组新文章时)都会跟踪页面浏览量。如果站点所有者已启用 Google Analytics(分析)与此功能配合使用,则每次额外加载时,页面浏览事件也会发送到相应的 Google Analytics(分析)帐户。
站点访客
每次额外加载时(即当您向下滚动到页面底部并自动加载一组新文章时)都会跟踪页面浏览量。如果站点所有者已启用 Google Analytics(分析)与此功能配合使用,则每次额外加载时,页面浏览事件也会发送到相应的 Google Analytics(分析)帐户。
同步的数据(了解详情
站点所有者/用户
我们会同步相应选项,用于确定该功能是否已激活,以及 Google Analytics(分析)是否与此功能集成。
站点访客
无。
  • 目录