如何向 WordPress/WooCommerce 添加無限滾動

您想在您的網站上實現無限滾動但不知道如何實現？ 你來對地方了！ 在本文中，我們將向您展示如何向任何 WordPress 網站和 WooCommerce 商店添加無限滾動。

在深入探討之前，讓我們首先了解分頁和無限滾動之間的區別。

分頁和無限滾動的區別

分頁是一種基於將內容劃分為頁面集的導航系統，其中每個頁麵包含固定數量的項目。 要在頁面之間導航，您需要單擊頁碼或上一個/下一個，瀏覽器會將您帶到該特定頁面。

最常見的分頁示例是 Google 搜索結果。 當您在 Google 上搜索某些內容時，它會返回一個相關結果列表，這些結果分為不同的頁面。 如果您向下滾動到搜索頁面的底部，您將看到指向每個頁面的編號鏈接列表。 從那裡，您可以單擊任何數字以導航到該特定頁面。

另一方面，無限滾動採用不同的導航方法。 它不是將內容分成一組頁面，而是使用AJAX在單個頁面上顯示所有內容。 最初，會顯示少量項目，而隨著用戶繼續向下滾動，會自動加載更多內容。 無限滾動背後的想法是，無論用戶滾動多少，他們總會看到一些內容。

無限滾動的最佳示例是 Facebook、Instagram、Twitter 等社交媒體網站。 當您瀏覽您的提要時，您會發現它永無止境，並且總是向您展示一些東西。 只要您繼續向下滾動，Feed 就會加載更多帖子。 這就是無限滾動的工作原理。

分頁和無限滾動現在都很常見，但沒有更好的方法。 兩者各有利弊，因此它們會更適合不同的場景。 根據您的要求和條件，您可能更喜歡其中一種。

這給我們帶來了一個問題，什麼時候向 WordPress 添加無限滾動有意義？ 什麼時候比分頁更合適？ 我們來看一下。

何時使用無限滾動？

使用無限滾動或分頁作為首選的導航方法純粹是主觀的。 這裡沒有對錯，完全取決於您的需求和喜好。 然而，由於這兩種方法都被廣泛使用，訪問者習慣於某些事情，並且他們期望某些行為取決於站點。 這就是為什麼選擇正確的導航系統可以為您帶來巨大的好處。

現在哪一個適合你？ 這在很大程度上取決於您的要求，因此，只有您才能更好地分析您的情況，權衡每種情況的利弊，然後做出決定。

例如，包含數千種產品的電子商務網站最好使用分頁。 這使得頁面之間的導航更容易，而不是無休止地滾動瀏覽龐大的庫存。 例如，世界上最大的電子商務平台亞馬遜將分頁用於導航目的。

相反，如果您的商店包含按類別組織的產品相對較少，無限滾動對您來說可能是一個不錯的選擇。 由於每個類別的商品數量都會減少，因此對於購物者來說，尋找產品不會太麻煩。 由於滾動比單擊小頁碼更容易、更無縫，因此對於移動用戶來說也更舒適。

另一方面，博客頁面可能會從無限滾動中受益更多。 通過無限滾動，帖子將自動加載，因此用戶無需採取任何額外步驟即可發現更多內容。 這使用戶保持參與，因此，他們將在網站上停留更長時間。

這些只是您在做出決定時應考慮的幾個示例。 如前所述，沒有正確或錯誤的選擇，只需選擇最適合您特定情況的選項即可。

對於那些對無限滾動感興趣的人，讓我們快速了解一下它的優缺點。

無限滾動的好處

首先，無限滾動通過使用 AJAX 將所有內容加載到同一頁面上來增強您的用戶體驗，因此用戶不必每次都單擊頁碼在頁面之間導航並等待它們重新加載。

同樣，無限滾動往往會增加用戶參與度並使訪問者在您的網站上花費更多時間。 通過無限滾動，內容會隨著用戶滾動而自動加載，不斷為用戶提供有趣的內容，激發他們的興趣並讓他們留在網站上。

更好的用戶體驗和更高的參與度也有助於降低跳出率。 搜索引擎將此視為優質內容的標誌，可幫助您改善網站的 SEO。

此外，移動用戶通常更喜歡無限滾動。 在觸摸屏設備上向下滾動比單擊小頁碼更容易、更直觀。 它還使瀏覽速度更快，因為用戶不必每次都等待頁面重新加載。

這些是無限滾動的主要優點，但也有一些缺點。 讓我們來看看無限滾動的一些不便。

無限滾動的缺點

如果您有一家擁有數千種產品的商店或一個擁有大量帖子的網站，那麼無限滾動可能很難導航。 當訪問者對位於列表底部的產品或帖子感興趣時尤其如此。 可能需要大量滾動才能找到它，這會對用戶體驗產生負面影響。

此外，通過無限滾動，您網站的頁腳可能會變得無法訪問。 通常，網站的頁腳包含有用的信息和鏈接。 如果無法訪問，用戶將無法看到該信息並錯過重要細節。

此外，無限滾動會消耗大量內存，因為內容會一直加載在同一頁面上。 在最壞的情況下，它可能會導致內存耗盡，甚至可能導致服務器崩潰。 因此，如果您想使用無限滾動，您應該使用託管主機來確保避免內存耗盡。

這就是所有的優點和缺點。 現在讓我們看看如何在您的 WordPress 網站上實現無限滾動。

如何將無限滾動添加到 WordPress

在您的網站上實現無限滾動的最簡單方法是使用專用插件。 您可以使用很多工具，但還是本教程，我們將使用由Darren Cooney開發的AJAX Load More 。 這是一個免費增值工具，可讓您向任何 WooCommerce 商店和 WordPress 網站添加無限滾動。

安裝和配置 AJAX 加載更多插件

首先，您需要安裝插件。 轉到您的WP 管理儀表板並導航到插件 > 添加新的。 搜索AJAX 加載更多，然後按立即安裝按鈕。 安裝插件後，點擊激活。

然後，導航到左欄中的AJAX 加載更多 > 設置以配置插件。 您可以在此處指定默認參數。 您可以設置默認容器類型、容器類、按鈕/加載樣式等。

現在我們已經安裝並配置了該工具，是時候為您的 WordPress 或 WooCommerce 網站添加無限滾動了。

將無限滾動添加到 WooCommerce

在本節中，我們將無限滾動功能添加到 WooCommerce 商店。 在 WordPress 上實現它的過程非常相似，如下所述。 如果您只是想在 WordPress 上包含無限滾動，您可以跳過這部分並前往添加無限滾動到 WordPress 帖子/博客頁面部分。

第 1 步：創建中繼器模板

模板定義了您的產品將如何在前端顯示。 轉發器模板循環遍歷您的所有產品並根據保存的模板顯示它們。 由於此插件使用中繼器模板來展示產品，因此您需要先創建一個。 在您的WP 管理儀表板中，轉到AJAX 加載更多 > 中繼器模板。

我們有興趣向我們的 WooCommerce 商店頁面添加無限滾動，因此我們需要將默認轉發器模板替換為 WooCommerce 模板。 大多數與 WooCommerce 兼容的主題，使用默認的content-product.php文件來顯示產品。 您只需將默認轉發器模板替換為以下模板。

 <?php wc_get_template_part('內容', '產品'); ?>

或者，您可以將整個代碼從content-product.php模板複製並粘貼到轉發器模板部分。 您可以使用您的管理控制面板或任何 FTP 客戶端（如FileZilla ）來訪問content-product.php模板。 該模板將位於wp-content\plugins\woocommerce\templates 。 完成後，點擊保存以保存轉發器模板。

注意：如果此模板不起作用，您可能需要檢查您的主題以查看它是否使用了content-product.php模板的某種修改形式。

現在我們已經創建了轉發器模板，讓我們進入下一步。

第 2 步：構建簡碼

在您的管理儀表板中，導航到AJAX 加載更多 > 簡碼生成器以生成簡碼。 在這裡，您可以調整顯示設置和查詢參數，每個參數都會向簡碼添加一個參數。 這是一個重要的步驟，因為您稍後將需要此短代碼來顯示您的產品。

如果您不熟悉短代碼以及如何使用它們，請查看本指南。

顯示設置

顯示設置部分包含許多選項，您可以設置這些選項來更改在商店前端顯示內容的方式。 您可以將按鈕/加載設置為加載更多按鈕或加載圖標。 您還可以啟用滾動選項，以便在用戶向下滾動時自動加載產品。 另一方面，禁用滾動選項將要求用戶按下加載更多按鈕以加載更多產品。

查詢參數

在查詢參數部分，您可以設置每個 AJAX 請求要加載的帖子數量，選擇要顯示的帖子類型（帖子、媒體、登錄頁面等）等等。 完成參數後，您將在最右側的簡碼輸出部分找到生成的簡碼。 複製該短代碼，因為您稍後將使用它。

由於默認情況下Post Type部分中沒有 WooCommerce 選項，因此您需要手動添加woocommerce參數並刪除post_type參數。 為此，只需將woocommerce = “true”添加到短代碼並刪除post_type = “post”參數。

通過將woocommerce參數設置為 true，插件會自動考慮相關產品參數來展示產品。 您的簡碼應如下所示：

 [ ajax_load_more woocommerce="true" container_type="div" posts_per_page="4" ]

現在您已經有了最終的簡碼，讓我們用它來為您的 WooCommerce/WordPress 網站添加無限滾動。

第 3 步：將簡碼添加到 Archive-Products.php

archive-product.php文件是用於在商店頁面上顯示 WooCommerce 產品的模板。 您將在模板中放置您的簡碼，以便AJAX 加載更多插件加載產品。

在添加短代碼之前，您需要復制archive-product.php文件並將其放在wp-content\themes\your-theme(eg, astra)\woocommerce目錄中。 如果woocommerce目錄不存在，請創建它。 原始archive-product.php模板位於wp-content\plugins\woocommerce\templates中。 您可以通過管理控制面板或 FTP 客戶端進行這些更改。

請記住，將archive-product.php文件放在主題的根目錄中將覆蓋原始模板設置。 這意味著通過將 archive-product.php 文件放在主題目錄中，WooCommerce 將給予它更高的優先級。 如果該文件位於主題目錄中，它將讀取它並且不會讀取插件目錄中的原始文件。

此外，這是一個安全的過程，因為原始文件仍然存在於插件目錄中，因此如果克隆文件出現任何問題，您可以將其刪除，並且仍然在插件目錄中保留原始文件。

現在使用任何文本編輯器打開最近複製的模板文件。 尋找看起來像這樣的條件語句if(wc_get_loop_prop('total')){ } 。 請參閱下面的屏幕截圖。

選擇整個條件語句並將其替換為以下代碼：

 //存檔-product.php
if ( wc_get_loop_prop( 'total' ) ) {
   echo do_shortcode('[ajax_load_more woocommerce="true" container_type="div" posts_per_page="4"]');
}

請記住用您的簡碼替換簡碼。 在此之後，保存文件。 然後，導航到前端，轉到您的商店頁面，然後向下滾動。 瞧！ 你會看到你的無限滾動在行動。

將無限滾動添加到 WordPress 帖子/博客頁面

向 WordPress 帖子/博客頁面添加無限滾動遵循與 WooCommerce 類似的過程，但有一些不同之處。 讓我們一步一步地看看如何在 WordPress 上實現無限滾動。

第 1 步：創建中繼器模板

對於博客頁面，我們將使用content-blog.php模板作為我們的轉發器模板。 只需通過管理控制面板或 FTP 客戶端轉到您的站點目錄，然後導航到wp-content\themes\your-theme(eg, astra)\template-parts 。 在那裡你會找到content-blog.php模板。

從模板文件中復制代碼並將其粘貼到插件的轉發器模板部分。 之後，保存轉發器模板。

第 2 步：構建簡碼

現在您需要創建一個簡碼。 為此，請轉到您的WP 管理儀表板並前往AJAX 加載更多 > 簡碼生成器。 選擇您的顯示設置和查詢參數以生成簡碼，一旦您對它感到滿意，請複制簡碼。

第 3 步：將簡碼添加到博客頁面

如果您還沒有博客頁面，請創建一個新頁面並將其命名為Blog 。 編輯頁面時，單擊左上角的“ +”圖標，將出現一個對話框。 搜索短代碼塊並選擇它以將其添加到您的頁面。

現在將您在上一步中復制的簡碼粘貼到簡碼塊中並更新頁面。

太棒了！ 您剛剛為您的 WordPress 博客頁面添加了無限滾動。 將其添加到任何其他帖子或頁面的過程完全相同。

結論

總而言之，使用無限滾動是改善導航並為用戶提供更好網站體驗的好解決方案。 用戶體驗對於任何類型的業務都是關鍵，這已不是什麼秘密。 它提高了用戶參與度，從而使訪問者在您的網站上停留的時間更長，回來的頻率更高，並增加了轉化的機會。

通過無限滾動，當用戶到達頁面末尾時，內容會自動加載。 這樣，用戶無需在多個頁面之間導航即可發現更有價值的內容。 此外，無限滾動使移動設備上的導航更加舒適，並加快了瀏覽過程。

但是，無限滾動也有一些缺點，例如無法訪問的頁腳或內存耗盡。 因此，在決定是否在您的網站上實現無限滾動之前，您需要權衡利弊。 沒有正確或錯誤的選擇，一切都取決於您的業務需求。

在本文中，我們描述瞭如何使用AJAX 加載更多插件向 WordPress 和 WooCommerce 添加無限滾動。 該過程只需幾分鐘，是免費的，並且可以幫助您改善您網站上的用戶體驗。

有關為您的網站添加無限滾動的更多工具，請查看這篇文章，其中包含您可以使用的更多插件。

您是否嘗試過在您的網站或商店上使用無限滾動？ 你的經歷如何？ 在下面的評論中讓我們知道！