如何使wordpress无限滚动更改URL?
我正在为一家初创公司创建一个新博客,他希望获得与http://qz.com/类似的无限滚动效果
它还需要包含在前面提到的链接中看到的URL更改。
对于我的生活,我无法弄清楚它是如何完成的,我认为它使用HTML5历史API,但我也有它在Internet Explorer中工作,所以也许它没有?
如果有人能给我一些关于如何使这项工作的指示(使用WordPress),我将非常感激。
您可以通过添加一些function使用无限滚动到您的WordPress主题。 此外,您还可以使用jetpack插件激活此function。 基本上它使用的是AJAX。
我的朋友问我一样。 所以我为它制作了一个插件。 我想这就是你想要的。
https://github.com/wataruoguchi/clever-infinite-scroll
这是如何使用无限滚动更改URL的过程。
- 看滚动事件。 滚动到页面底部时,Ajax会调用下一个内容。 该链接指的是删除下一个内容。 它是无限滚动的基础。
- 当下一个内容加载时,它实现隐藏的span标签包含内容的URL字符串和页面标题字符串。
- 看滚动事件。 根据滚动位置查看内容时,请通过
history.pushState()
更改URL。 URL和标题两个字符串都是从隐藏的span元素中获取的。 - 同时,它也会更改页面标题。
如果有人想在WordPress上实现无限滚动,请使用Wataru的无限滚动和URL循环脚本
下载脚本,将其排入页脚或将其与gulp连接,或者您选择使用它。
如何在WordPress中实现无限滚动:
1)组织您的post内容,如下所示:
single.php中
content.php
最直接的方法是在每个元素滚动过去后更改URL哈希 。 您可以将其保存在cookie中,并在用户返回页面时加载它。
正如你所提到的,使用History API似乎有一个更高级的版本,这里有一个很好的写法,但这个方法不支持IE9或更早版本。
您可能想尝试Project Sarus
https://github.com/srijanlabs/sarus
它实现了相同的function,并且可高度自定义。
它是一个在AngularJS中构建的前端框架,因此它可以与后端的wordpress一起使用。 您需要做的就是公开RSS或创建API。 否则你可以尝试将它集成到wordpress html本身。