我做了一个启动一个新的博客谁想要一个类似的无限滚动效果http://qz.com/
这也需要包括网址前面提到的链接中看到的变化。
对于我的生活,我无法弄清楚它是如何做的,我觉得它使用HTML5历史API,但我也有它在Internet Explorer中工作,所以也许它不?
我将是令人难以置信的感激,如果有人可以给我如何使这项工作(使用WordPress)一些指点。
我做了一个启动一个新的博客谁想要一个类似的无限滚动效果http://qz.com/
这也需要包括网址前面提到的链接中看到的变化。
对于我的生活,我无法弄清楚它是如何做的,我觉得它使用HTML5历史API,但我也有它在Internet Explorer中工作,所以也许它不?
我将是令人难以置信的感激,如果有人可以给我如何使这项工作(使用WordPress)一些指点。
您可以使用无限滚动到你的WordPress主题,通过添加一些功能 。 也可以使用激活此功能Jetpack的插件 。 基本上它是一个使用AJAX。
我的朋友问我相同的。 所以我做了一个插件吧。 我认为这是你想要的。
https://github.com/wataruoguchi/clever-infinite-scroll
这是如何利用无限滚动更改URL的过程。
history.pushState()
URL和标题两个字符串是从隐藏的范围元素得到。 如果有人希望实现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'
});
});
感谢保罗爱尔兰和涉用于在无限滚动脚本建设。
最直截了当的方式做这将是改变URL散列每个元素滚动过去后。 你可以在cookie保存此,如果用户返回到页面加载它。
似乎有使用你提到的历史API的这种更先进的版本,有一个很好的书面记录在这里 ,这种方法不支持IE9或更早版本虽然。
你可能想尝试项目赤颈
https://github.com/srijanlabs/sarus
它实现相同的功能,是高度可定制的。
这是一幢建于AngularJS因此它可以在后台WordPress的使用的前端框架。 所有你需要做的是揭露RSS或创建一个API。 否则,您可以尝试它在WordPress HTML本身集成。