跳到主要内容

无限滚动是一种网页设计技术,可在用户到达页面底部时自动加载您的下一页内容。它使用户可以查看您博客上的更多内容,而无需单击分页或“加载更多”按钮。

在本文中,我们将向您展示如何轻松地在WordPress博客上添加无限滚动(逐步)。

什么是无限滚动?

无限滚动是一种Web设计趋势,它使用AJAX页面加载而不是数字页面导航来自动加载下一页内容并将其显示在当前页面的末尾。无限滚动使您只需向下滚动即可轻松浏览更多内容。当用户不断滚动时,它将连续不断地加载内容。

传统上,用户必须单击“下一个”,“上一个”按钮或页码才能查看较旧的博客文章。

当使用异步Javascript和XML的AJAX缩写时,网页可以与服务器通信,而无需重新加载整个页面。它使Web应用程序能够处理用户请求并无需刷新即可传递数据。

无限滚动设计的最佳示例是流行的社交媒体网站,例如Facebook,Twitter,Instagram,Pinterest等。如果您使用它们中的任何一个,那么您就会知道内容如何在社交媒体时间轴上无休止地加载。

无限滚动是否适合每个网站?

互联网上的许多内容网站都使用无限滚动技术来改善浏览体验并提高参与度。这导致许多初学者提出这样的问题,例如它是否适合每个网站,或者对我的网站有好处?

对于在时间轴或Feed中显示内容的网站,例如社交媒体应用程序,无限滚动非常适合。它为寻找基于时间的内容的用户提供了绝佳的浏览体验。

接下来,无限滚动设计非常适合移动和触摸设备。对于移动用户,滚动比点击微小的页面链接更加用户友好。

无限滚动技术的最大优势是流畅的浏览体验。用户不需要手动单击分页链接。内容通过滚动快速加载,并保持用户参与度。

但另一方面,它也会使您的网站导航更加困难。在连续加载的情况下,很难弄清博客文章的位置(在哪一页上)。一些用户甚至发现一次看到很多文章变得不知所措。

无限滚动设计的另一个缺点是您无法拥有页脚。即使您拥有它,它也将隐藏在不断加载的无尽文章中。许多站点在页脚上添加了必不可少的链接,因此没有链接可能会使某些用户失望。

无限滚动最令人担忧的问题是,它可能会减慢您的网站速度甚至使服务器崩溃。当我们向一个较小的博客中添加无限滚动时,在用户不必要地滚动导致小型WordPress托管帐户上的内存耗尽之后,我们经历了服务器崩溃。如果您想尝试无限滚动,建议您使用托管WordPress托管。

既然您知道了无限滚动设计的利弊,您就可以决定是否需要将其添加到博客中。

如果您决定在WordPress博客中添加无限滚动,则可以轻松实现。我们将向您展示可以使用的多个插件,因此您可以选择最适合您的插件。

通过捕获无限滚动将无限滚动添加到您的WordPress博客中

您需要做的第一件事是安装并激活Catch Infinite Scroll插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,WordPress将在您的WordPress管理面板中添加一个名为“ Catch Infinite Scroll”的新菜单项。您需要单击它以配置插件设置。

首先,您可以选择一个触发选项来加载文章。该插件可让您在用户向下滚动页面或添加“加载更多”按钮时自动加载内容。

您应选择“滚动”选项以触发滚动自动加载。或者,如果您想添加更多加载按钮,则可以选择“点击”选项。

接下来,您可以看到导航选择器,下一个选择器,内容选择器和项目选择器。您无需更改这些选项的任何内容,因为默认选项效果很好。

之后,有一个Image选项,您可以在其中添加内容加载器图标。默认情况下,它具有加载程序GIF图像。如果您有更好的图片,则可以更改它。

“完成文本”选项包括一条消息,用户完成查看您的文章后将显示该消息。默认情况下,文本显示“不再显示其他项目”。您可以根据需要轻松地编辑此文本。

完成后,单击“保存更改”按钮。

而已!无限滚动现在在您的博客上处于活动状态。您可以访问您的博客,并看到无限滚动的实际效果。

备用WordPress插件在WordPress中添加无限滚动

Catch Infinite Scroll适用于大多数WordPress主题;但是,它可能会因某些主题而失败。在这种情况下,您可以使用以下任何无限滚动WordPress插件。

1. Ajax加载更多

与Catch Infinite Scroll类似,Ajax Load More插件还允许您向WordPress网站添加无限滚动和可单击的Load More按钮。

该插件提供了更多的自定义选项,包括许多页面加载图标样式,按钮样式等。有关详细指南,您可以参阅我们的有关使用Ajax Load More插件在WordPress中创建“加载更多帖子”按钮的教程。

但是,该插件为初学者提供了一些学习曲线。它具有一个高级界面,具有许多选项,包括中继器模板,短代码生成器,WordPress查询等。

要使用此插件进行无限滚动,将需要一些编码技巧。

2. YITH无限滚动

YITH Infinite Scrolling是Ajax Load More或Catch Infinite Scroll插件的简单替代方案。

与Catch Infinite Scroll插件类似,它具有最少的选项来在您的网站上设置基于滚动的Web交互。您只需要安装并激活插件并启用无限滚动即可。

任何人,包括初学者,都可以使用此插件轻松设置无限滚动。但是,它没有“加载更多”按钮选项,该选项包含在上面提到的其他两个插件中。

回到顶部
关闭菜单