WordPress教程:如何创建无限滚动WP站点

文章撰写者:
  • WordPress
  • 更新:Jul 29,2014

您当然会努力提高网站的可用性,以便您的用户更快乐,更有可能经常回来,对吧? 嗯,您可以实现的一项改进是无限滚动技术。 它与我们在Twitter或Facebook上的内容基本相同,首先显示基本内容,向下滚动时添加更多内容。 这非常适合提高网站的性能(减少加载时间)和改善用户体验(因为不需要执行任何操作来加载更多项目,例如单击按钮)。

在这里,我们将了解为什么以及如何在您自己的网站中使用它

示例os Infinite Scrolling站点

检查那些大家伙在做什么总是好的,这种效果(很多次难以察觉)很多大型网站和应用程序,如Facebook(现场直播),Twitter,Pinterest,Feedly。

资讯提供ly

推特

无限卷轴 - 做和不做

此技术将删除您网站的常规分页链接(“旧帖子”或帖子后的编号页面)。 这项技术的最大“专业”是加载时间,因为首先加载的项目较少,你可以有一个更快的网站,并且由于更多的项目没有页面重新加载,用户可以向下滚动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 ***************** ******** / / *将注册并排列在主题中使用的无限scolling脚本的函数。 * / function twentytwelve_script_infinite_scrolling(){wp_register_script('infinite_scrolling',//脚本名称get_template_directory_uri()。'/ js / jquery.infinitescroll.min.js',//文件是数组('jquery'),//这个脚本需要一个jquery脚本null,//没有脚本版本号为true //脚本将放在页脚上); if(!is_singular()){//只有当我们有超过1的帖子//我们才会加载这个脚本wp_enqueue_script('infinite_scrolling'); //注册我们的自定义脚本! add_action('wp_enqueue_scripts','twentytwelve_script_infinite_scrolling'); / *将设置无限滚动的功能显示在页面中。 * / function set_infinite_scrolling(){if(!is_singular()){//再次,只有当我们有超过1后//在下面添加js脚本?> <script type =“text / javascript”> / *这是inifinite滚动设置,你可以随意修改这个* / var inf_scrolling = {/ * img:是加载图像路径,添加一个漂亮的gif加载图标有msgText:加载消息finishedMsg:完成加载消息* / loading:{ img:“<?echo get_template_directory_uri();?> / images / ajax-loading.gif”,msgText:“正在加载下一个帖子....”,finishedMsg:“帖子已加载!!”,},/ *下一项是设置nextSelector。 NextSelector是页面导航的css类。 在我们的例子中是#nav-below .nav-previous a * /“nextSelector”:“#nav-below .nav-previous a”,// navSelector是页面导航“navSelector”的css id:“#nav-below “,// itemSelector是显示帖子的div”itemSelector“:”article“,// contentSelector是显示页面内容(帖子)的div”contentSelector“:”#content“}; / *最后要做的是将contentSelector配置为无限滚动,使用函数jquery from infinite-scroll.min.js * / jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling); </ script> <? 我们需要在页面的页脚上添加此操作。 100是一个优先级编号,可以响应稍后的执行。 * / add_action('wp_footer','set_infinite_scrolling',100); ?>

替代方法 - 加载页面和自定义帖子类型

之前的代码将加载您的所有帖子,但如果您想要显示页面或自定义帖子类型(如投资组合项目,如果您的主题支持它)会怎样? 好吧,我们可以稍微修改一下代码并使其正常工作。

唯一需要的调整是在索引,类别或任何其他将加载项目的文件中,您将用不同的代码替换当前循环。 您可以通过以下代码识别您的循环:

while(have_posts()):

所以,一旦你找到它,你可以使用这个神奇的代码:

<div id =“content”role =“main”> <?php / *仅显示无限滚动页面! 这是秘密:您可以根据需要设置post_type,这很简单! 一些post_types可能是:组合,项目,产品我们可以添加任意数量的帖子类型,用逗号分隔它们,比如'post','page','product'* / $ args = array(//设置参数'post_type'=>'page',// Only Pages); query_posts($参数); //加载帖子if(have_posts()):?> <?php / *启动循环* /?> <?php while(have_posts()):the_post(); //显示那些项目的“通常”循环代码?>

总结

这只是一篇“热身”文章。 使用这种方法可以做很多事情。 例如,您可以在商店中加载产品(可能使用WooCommerce)作为用户滚动,或者甚至在那里添加更多JS和CSS代码来创建和用于后期图像的令人敬畏的视差加载器。

你怎么看待这种技术? 你喜欢它吗? 你会用吗? 使用评论部分分享您的想法!

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。