0

我正在为一家希望获得与http://qz.com/类似的无限滚动效果的初创公司创建一个新博客

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

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

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

4

5 回答 5

3

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

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

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

  1. 观看滚动事件。当滚动到页面底部时，Ajax 调用下一个内容。链接指向下一个内容被删除。这是无限滚动的基础。
  2. 当下一个内容加载时，它实现了隐藏的 span 标签，包含内容的 URL 字符串和页面标题字符串。
  3. 观看滚动事件。当根据滚动位置看到内容时，将 URL 更改为history.pushState()。URL 和标题这两个字符串都是从隐藏的 span 元素中获取的。
  4. 同时，它也会更改页面标题。
于 2015-07-06T10:20:07.817 回答
2

您可以通过添加一些功能来无限滚动到您的 WordPress 主题。您也可以使用jetpack 插件激活此功能。基本上它使用AJAX。

于 2012-11-13T09:16:39.140 回答
1

如果有人想在 WordPress 上实现无限滚动，请使用带有 URL 循环脚本的 Wataru 的无限滚动

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

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

1）像这样组织您的帖子内容：

单.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(); ?>

内容.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 在无限滚动脚本的基础上构建。

于 2017-06-21T00:17:47.250 回答
0

最直接的方法是在每个元素滚动过去后更改 URL 哈希。如果用户返回页面，您可以将其保存在 cookie 中并加载它。

正如您提到的，使用 History API 似乎有一个更高级的版本，这里有一篇很好的文章，但这种方法不支持 IE9 或更早版本。

于 2014-01-16T01:16:23.807 回答
0

您可能想尝试 Project Sarus

https://github.com/srijanlabs/sarus

它实现了相同的功能并且是高度可定制的。

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

于 2014-02-21T07:49:40.973 回答