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

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

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

安装Jetpack

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

此功能最初是在2.0版中引入的。 但是,除非您使用默认的WordPress主题 TwentyTenTwentyElevenTwentyTwelve ,否则体验可能不会立即在您的主题中显示。 由于每个主题都有独特的页面结构,因此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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值