Question

我正在为一家想要类似无限滚动效果的初创公司制作新博客http://qz.com/

还需要包含在前面提到的链接中看到的URL更改。

对于我的生活，我无法弄清楚它是如何完成的，我认为它使用HTML5历史API，但我也有它在Internet Explorer中工作，所以也许它没有？

如果有人能给我一些关于如何使这项工作的指示（使用WordPress），我将非常感激。

Answer 1

我的朋友问我一样。所以我为它制作了一个插件。我想这就是你想要的。

https://github.com/wataruoguchi/clever-infinite-scroll

这是如何使用无限滚动更改URL的过程。

观看滚动事件。滚动到页面底部时，Ajax会调用下一个内容。该链接指的是删除下一个内容。它是无限滚动的基础。
当下一个内容加载时，它实现隐藏的span标记包含内容的URL字符串和页面标题字符串。
观看滚动事件。根据滚动位置查看内容时，请将网址更改为history.pushState()。 URL和标题两个字符串都来自隐藏的span元素。
同时，它也会更改页面标题。

Answer 2

您可以通过add some functions对WordPress主题使用无限滚动。此外，您还可以使用jetpack plugin激活此功能。基本上它使用的是AJAX。

Answer 3

如果有人想在WordPress上实现无限滚动，请使用Wataru的Infinite Scroll with URL cycling Script

下载脚本，将其排入页脚或将其与gulp连接，或者您选择使用它。

如何在WordPress中实现无限滚动：

1）如此组织您的帖子内容：

Single.php

<?php get_header(); ?>

   <main id="post-left-col" class="relative infinite-container" role="main">

      <?php if (have_posts()) : while (have_posts()) : the_post();

                    get_template_part( 'template-parts/post/content' );

                endwhile; endif;
                 ?>
                </main>
        </div>
<?php get_footer(); ?>

<强> content.php

  <?php
    /**
     * Template part for displaying posts
    */
    ?>
    <article id="post-area" class="infinite-post">

<!-- Insert your post format here e.g. <h1><?php the_title; ?></h1> etc..

确保包含

    <div class="navigation"><?php next_post_link(); ?></div>

在您的content.php帖子模板的末尾。

2）设置无限滚动配置。当然，这可以包含在您的主javascript文件中。以下任何选择器都可以更改其名称。

jQuery(document).ready(function($) {

    $('.infinite-content').cleverInfiniteScroll({
                contentsWrapperSelector: '.infinite-container',
                contentSelector: '.infinite-post',
                nextSelector: '.navigation a:first'
            });
});

感谢Paul Irish和Wataru建立无限滚动脚本。

Answer 4

在每个元素滚动过去之后，最直接的方法是change the URL hash。您可以将其保存在cookie中，并在用户返回页面时加载它。

如你所提到的，使用History API似乎有一个更高级的版本，有一个很好的写法here，但这个方法不支持IE9或更早版本。

Answer 5

您可能想尝试Project Sarus

https://github.com/srijanlabs/sarus

它实现了相同的功能，并且可以高度自定义。

它是一个在AngularJS中构建的前端框架，因此可以在后端使用wordpress。您需要做的就是公开RSS或创建API。否则，您可以尝试将其集成到wordpress html中。

如何使wordpress无限滚动更改URL？

5 个答案: