您肯定會努力提高網站的可用性，這樣您的用戶就會更快樂並且更有可能經常回來，對吧？ 那麼，您可以實施的一項改進是無限滾動技術。 它與我們在 Twitter 或 Facebook 上的基本相同，首先只顯示基本內容，向下滾動時會添加更多內容。 這對於提高您網站的性能非常有用（紅色ucing 加載時間），並改善用戶體驗（因為加載更多項目不需要任何操作，例如單擊按鈕）。
在這裡，我們將了解為什麼以及如何在您自己的網站中使用它
範例無限滾動網站
檢查那些大傢伙在做什麼總是好的，這種效果（很多次難以察覺）很多大型網站和應用程序，如Facebook（現場直播），Twitter，Pinterest，Feedly。
無限捲軸 - 做和不做
此技術將刪除您網站的常規分頁鏈接（“舊帖子”或帖子後的編號頁面）。 這項技術的最大“專業”是加載時間，因為首先加載的項目較少，你可以有一個更快的網站，並且由於更多的項目沒有頁面重新加載，用戶可以向下滾動10“頁面”的帖子甚至沒有注意，在您的網站停留更長時間。
它可以應用於大多數站點，但它更適合於博客或類似投資組合的站點，在這些站點中，您擁有大量內容和圖像，並且您不希望用大量內容壓倒用戶。
本指南不需要 編碼 熟練度，老實說，你肯定會學到一點關於如何調整你的 WordPress 主題一點點。
資產
我們會用的 Paul Irish的JS插件。 下載並將其安裝在主題的js文件夾中。 我們將使用Twenty Twelve進行學習建議，但可以隨意在任何主題中使用它（如果它不適合你，也可以發布問題）。
另外，您還需要一個漂亮的gif圖像作為“加載”消息。 您可以在那裡找到很多，但是 AjaxLoad 網站有一個非常棒的工具，可以幫助您使用許多預設樣式，您可以選擇更適合您的配色方案的顏色。
一旦你有了Wp-content / themes / twentytwelve / js下的腳本和漂亮的gif圖像，我們就可以開始了！
PHP 碼
好的，不要害怕，我們會給你一個複制和粘貼片段，但這是我們需要做的才能讓它工作：
- 創建一個將在內部加載和註冊無限滾動插件的函數——這將 prevENT WordPress 從加載它兩次並破壞主題的功能
- 僅當您的頁面不是單個帖子時才加載腳本-只有要顯示多個帖子的頁面才需要加載更多項。
功能。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 );
?>
替代方法 - 加載頁面和自定義帖子類型
previous 代碼將加載你所有的帖子，但是如果你想顯示頁面或自定義帖子類型（如投資組合項目，如果你的主題支持它）怎麼辦？ 好吧，我們可以稍微修改一下代碼，讓它也能正常工作。
唯一需要的調整是在索引，類別或任何其他將加載項目的文件中，您將用不同的代碼替換當前循環。 您可以通過以下代碼識別您的循環：
while(have_posts()) :
所以，一旦你找到它，你可以使用這個神奇的代碼：
<?php /* 在無限滾動時只顯示頁面！ 這是秘密：您可以根據需要設置 post_type ，這很簡單！ 一些 post_types 可能是：portfolio, project, product 我們可以添加任意數量的帖子類型，用逗號分隔它們，例如 'post', 'page', 'product' */ $args = array( // 設置參數'post_type' => 'page', // 只有頁面 ); 查詢帖子（$args）； // 加載帖子 if ( have_posts() ) : ?> <?php /* 開始循環 */ ?> <?php 而（有_posts（））：the_post（）； //顯示這些項目的“通常”循環代碼？>
結論
這只是一篇“熱身”文章。 你可以用這種方法做很多事情。 例如，您可以在商店中加載產品（使用 WooCommerce，也許）當用戶滾動時，或者甚至在那裡添加更多的 JS 和 CSS 代碼來為帖子圖像創建和類似視差的加載器。
你怎麼看待這種技術？ 你喜歡它嗎？ 你會用嗎？ 使用評論部分分享您的想法！
