您肯定会努力提高网站的可用性，这样您的用户会更开心，更有可能经常回来，对吧？ 好吧，您可以实现的改进之一是无限滚动技术。 它与我们在 Twitter 或 Facebook 上的基本相同，最初只显示基本内容，向下滚动时会添加更多内容。 这对于提高网站性能（减少加载时间）和改善用户体验（因为加载更多项目不需要任何操作，例如单击按钮）非常有用。
在这里，我们将了解为什么以及如何在您自己的网站中使用它
示例 os 无限滚动站点
看看大佬们在做什么总是好的，这种效果（很多时候很难被察觉）被许多大网站和应用程序使用，比如 Facebook（实时提要）、Twitter、Pinterest、Feedly。
无限滚动 – 做与不做
此技术将删除您网站的常规分页链接（“较旧的帖子”，或您的帖子后的编号页面）。 这种技术的最大“优点”是加载时间，因为一开始加载的项目更少，您可以拥有一个更快的网站，并且由于添加了更多项目而无需重新加载页面，用户可以向下滚动 10 个“页面”的帖子，甚至无需注意到，在您的网站上停留的时间要长得多。
它可以应用于大多数网站，但更适合博客或类似作品集的网站，您有很多内容和图像，并且您不想用大量内容压倒用户。
本指南不需要熟练的编码，老实说，你肯定会学到一些关于如何稍微调整你的 WordPress 主题的知识。
资产
我们将使用 Paul Irish 的 JS 插件。 下载它并将其安装在主题的 js 文件夹中。 我们将使用 Twenty Twelve 来学习建议，但可以随意在任何主题中使用它（如果它不适合您，请发布问题）。
此外，您还需要一个漂亮的 gif 图像来显示“正在加载”消息。 你可以在那里找到很多，但是 AjaxLoad 站点有一个非常棒的工具可以帮助你使用很多预设样式，你可以选择更符合你的配色方案的颜色。
一旦你在 Wp-content/themes/twentytwelve/js 下有了脚本和漂亮的 gif 图像，我们就可以开始了！
PHP 代码
好的，不要害怕，我们会给你一个复制和粘贴片段，但我们需要做的是让它工作：
- 创建一个将在内部加载和注册无限滚动插件的函数——这将防止 WordPress 加载它两次并破坏主题的功能
- 仅当您的页面不是单个帖子时才加载脚本 – 只有您有超过 1 个帖子要显示的页面才需要加载更多项目。
functions.php 文件是您主题的核心。 所有功能通常都在那里，或者从其他文件中调用。 因此，我们可以在您的函数文件中添加此代码以添加无限滚动支持（将其添加到文件末尾）：
<?php
/*************************
WEB REVENUE INFINITE SCROLLING
*************************/
/*
Function that will register and enqueue the infinite scolling's script to be used in the theme.
*/
function twentytwelve_script_infinite_scrolling(){
wp_register_script(
'infinite_scrolling',//name of script
get_template_directory_uri().'/js/jquery.infinitescroll.min.js',//where the file is
array('jquery'),//this script requires a jquery script
null,//don't have a script version number
true//script will de placed on footer
);
if(!is_singular()){ //only when we have more than 1 post
//we'll load this script
wp_enqueue_script('infinite_scrolling');
}
}
//Register our custom scripts!
add_action('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling');
/*
Function that will set infinite scrolling to be displayed in the page.
*/
function set_infinite_scrolling(){
if(!is_singular()){//again, only when we have more than 1 post
//add js script below
?>
<script type="text/javascript">
/*
This is the inifinite scrolling setting, you can modify this at your will
*/
var inf_scrolling = {
/*
img: is the loading image path, add a nice gif loading icon there
msgText: the loading message
finishedMsg: the finished loading message
*/
loading:{
img: "<? echo get_template_directory_uri(); ?>/images/ajax-loading.gif",
msgText: "Loading next posts....",
finishedMsg: "Posts loaded!!",
},
/*Next item is set nextSelector.
NextSelector is the css class of page navigation.
In our case is #nav-below .nav-previous a
*/
"nextSelector":"#nav-below .nav-previous a",
//navSelector is a css id of page navigation
"navSelector":"#nav-below",
//itemSelector is the div where post is displayed
"itemSelector":"article",
//contentSelector is the div where page content (posts) is displayed
"contentSelector":"#content"
};
/*
Last thing to do is configure contentSelector to infinite scroll,
with a function jquery from infinite-scroll.min.js
*/
jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
</script>
<?
}
}
/*
we need to add this action on page's footer.
100 is a priority number that correpond a later execution.
*/
add_action( 'wp_footer', 'set_infinite_scrolling',100 );
?>
替代方法——加载页面和自定义帖子类型
前面的代码将加载您所有的帖子，但是如果您想显示页面或自定义帖子类型（如投资组合项目，如果您的主题支持它）怎么办？ 好吧，我们可以稍微修改一下代码，让它也能正常工作。
唯一需要的调整是在您的索引、类别或任何其他将加载项目的文件中，您将用不同的代码替换当前循环。 您可以通过以下代码识别您的循环：
while(have_posts()) :
所以，一旦你找到它，你就可以使用这个神奇的代码：
<div id="content" role="main"> <?php /* Show only Pages on infinite scroll! Here is the secret: You can set post_type for what you need, it's simple! Some post_types could be: portfolio, project, product We could add as many post types as we want, separating them by commas, like 'post', 'page', 'product' */ $args = array( // set up arguments 'post_type' => 'page', // Only Pages ); query_posts($args); // load posts if ( have_posts() ) : ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); //the "usual" loop code to display those items ?>
结论
这只是一篇“热身”文章。 你可以用这种方法做很多事情。 例如，您可以在用户滚动时在商店中加载产品（也许使用 WooCommerce），或者甚至在那里添加更多的 JS 和 CSS 代码来创建用于发布图像的出色的类似视差的加载器。
您如何看待这项技术？ 你喜欢它？ 你会用吗？ 使用评论部分分享您的想法！