我怎样才能让WordPress的无限滚动更改URL?(How can I make wordpres

2019-08-02 16:20发布

我做了一个启动一个新的博客谁想要一个类似的无限滚动效果http://qz.com/

这也需要包括网址前面提到的链接中看到的变化。

对于我的生活,我无法弄清楚它是如何做的,我觉得它使用HTML5历史API,但我也有它在Internet Explorer中工作,所以也许它不?

我将是令人难以置信的感激,如果有人可以给我如何使这项工作(使用WordPress)一些指点。

Answer 1:

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



Answer 2:

我的朋友问我相同的。 所以我做了一个插件吧。 我认为这是你想要的。

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

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

  1. 看着滚动事件。 当滚动击中页面的底部,Ajax调用一个内容。 该链接指向一个内容被删除。 这是无限滚动的非常基本的。
  2. 当一个内容加载,它实现了隐藏的span标签包含URL字符串和内容的页面标题字符串。
  3. 看着滚动事件。 当内容被按照滚动位置看到的那样,通过改变它的URL history.pushState() URL和标题两个字符串是从隐藏的范围元素得到。
  4. 在同一时刻,它改变了页面的标题为好。


Answer 3:

如果有人希望实现WordPress的无限滚动,使用亘的无限滚动与URL循环脚本

下载脚本,它排队在页脚或一饮而尽串联,或无论你选择使用它。

如何实现在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'
            });
});

感谢保罗爱尔兰和涉用于在无限滚动脚本建设。



Answer 4:

最直截了当的方式做这将是改变URL散列每个元素滚动过去后。 你可以在cookie保存此,如果用户返回到页面加载它。

似乎有使用你提到的历史API的这种更先进的版本,有一个很好的书面记录在这里 ,这种方法不支持IE9或更早版本虽然。



Answer 5:

你可能想尝试项目赤颈

https://github.com/srijanlabs/sarus

它实现相同的功能,是高度可定制的。

这是一幢建于AngularJS因此它可以在后台WordPress的使用的前端框架。 所有你需要做的是揭露RSS或创建一个API。 否则,您可以尝试它在WordPress HTML本身集成。



文章来源: How can I make wordpress infinite scrolling change the URL?