如何將無限滾動添加到您的WordPress網站(逐步)


您想向您的WordPress博客添加無限滾動嗎?

無限滾動是一種網頁設計技術,可在用戶到達頁面底部時自動加載您的下一頁內容。 它使用戶可以查看您博客上的更多內容,而無需單擊分頁或“加載更多”按鈕。

在本文中,我們將向您展示如何輕鬆地在WordPress博客上添加無限滾動(逐步)。

輕鬆將無限滾動添加到您的WordPress博客

什麼是無限滾動?

無限滾動是一種Web設計趨勢,它使用AJAX頁面加載而不是數字頁面導航來自動加載下一頁內容並將其顯示在當前頁面末尾。 無限滾動使您只需向下滾動即可輕鬆瀏覽更多內容。 隨著用戶不斷滾動,它將連續不斷地加載內容。

傳統上,用戶必須單擊“下一個”,“上一個”按鈕或頁碼才能查看較舊的博客文章。

當使用異步Javascript和XML的AJAX縮寫時,網頁可以與服務器通信,而無需重新加載整個頁面。 它使Web應用程序能夠處理用戶請求並無需刷新即可傳遞數據。

無限滾動設計的最佳示例是流行的社交媒體網站,例如Facebook,Twitter,Instagram,Pinterest等。 如果您使用它們中的任何一個,那麼您就會知道內容如何在您的社交媒體時間軸上無休止地加載。

無限滾動是否適合每個網站?

互聯網上的許多內容網站都使用無限滾動技術來改善瀏覽體驗並提高參與度。 這導致許多初學者提出這樣的問題,例如它是否適合每個網站,或者對我的網站有好處?

對於在時間軸或Feed中顯示內容的網站,例如社交媒體應用程序,無限滾動非常適合。 它為尋找基於時間的內容的用戶提供了絕佳的瀏覽體驗。

接下來,無限滾動設計非常適合移動和触摸設備。 對於移動用戶,滾動比點擊微小的頁面鏈接更加用戶友好。

觸摸屏網絡互動

無限滾動技術的最大優勢是流暢的瀏覽體驗。 用戶不需要手動單擊分頁鏈接。 內容通過滾動快速加載,並保持用戶參與度。

但另一方面,它也會使您的網站導航更加困難。 在連續加載的情況下,很難弄清博客文章的位置(在哪一頁上)。 有些用戶甚至發現一次看到很多文章不堪重負。

無限滾動設計的另一個缺點是您無法擁有頁腳。 即使您擁有它,它也將隱藏在不斷加載的無盡文章中。 許多站點在頁腳上添加了必不可少的鏈接,因此沒有鏈接可能會使某些用戶失望。

無限滾動最令人擔憂的問題是它可能會降低您的網站速度甚至使服務器崩潰。 當我們向一個較小的博客中添加無限滾動時,在用戶不必要地滾動導緻小型WordPress託管帳戶上的內存耗盡之後,我們經歷了服務器崩潰。 如果您想嘗試無限滾動,建議您使用託管的WordPress託管。

既然您知道了無限滾動設計的利弊,您就可以決定是否需要將其添加到博客中。

如果您決定將無限滾動添加到WordPress博客中,則可以輕鬆實現。 我們將向您展示可以使用的多個插件,因此您可以選擇最適合自己需求的插件。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

通過捕獲無限滾動將無限滾動添加到您的WordPress博客

您需要做的第一件事是安裝並激活Catch Infinite Scroll插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,WordPress將在​​您的WordPress管理面板中添加一個名為“ Catch Infinite Scroll”的新菜單項。 您需要單擊它以配置插件設置。

捕捉無限滾動設置

首先,您可以選擇一個觸發選項來加載文章。 該插件可讓您在用戶向下滾動頁面或添加“加載更多”按鈕時自動加載內容。

滾動加載或單擊-捕獲無限滾動插件設置

您應選擇“滾動”選項,以通過滾動觸發自動加載。 或者,如果您想添加更多加載按鈕,則可以選擇“點擊”選項。

接下來,您可以看到導航選擇器,下一個選擇器,內容選擇器和項目選擇器。 您無需更改這些選項的任何內容,因為默認選項效果很好。

之後,有一個Image選項,您可以在其中添加內容加載器圖標。 默認情況下,它具有加載程序GIF圖像。 如果您有更好的圖片,則可以更改它。

為WordPress無限滾動上傳新的加載圖像

“完成文本”選項包括一條消息,用戶完成查看您的文章後將顯示該消息。 默認情況下,文本顯示“不再顯示其他項目”。 您可以根據需要輕鬆地編輯此文本。

文章加載完成-完成文本選項捕獲無限滾動

完成後,單擊“保存更改”按鈕。

而已! 無限滾動現在在您的博客上處於活動狀態。 您可以訪問您的博客,並看到無限滾動的實際效果。

WordPress無限滾動預覽

備用WordPress插件在WordPress中添加無限滾動

Catch Infinite Scroll適用於大多數WordPress主題; 但是,它可能會因某些主題而失敗。 在這種情況下,您可以使用以下任何無限滾動WordPress插件。

1. Ajax加載更多

Ajax加載更多設置

與Catch Infinite Scroll類似,Ajax Load More插件還允許您向您的WordPress網站添加無限滾動和可單擊的Load More按鈕。

該插件提供了更多的自定義選項,包括許多頁面加載圖標樣式,按鈕樣式等。有關詳細指南,您可以查看有關使用Ajax Load More插件在WordPress中創建“加載更多帖子”按鈕的教程。

但是,該插件對於初學者來說有一些學習曲線。 它具有許多選項的高級界面,包括中繼器模板,短代碼生成器,WordPress查詢等等。

要使用此插件進行無限滾動,需要一些編碼技巧。

2. YITH無限滾動

YITH Infinite Scrolling是Ajax Load More或Catch Infinite Scroll插件的簡單替代方案。

與Catch Infinite Scroll插件類似,它具有最少的選項來在您的網站上設置基於滾動的Web交互。 您只需要安裝並激活插件並啟用無限滾動即可。

YITH無限滾動插件設置

任何人,包括初學者,都可以使用此插件輕鬆設置無限滾動。 但是,它沒有“加載更多”按鈕選項,該選項包含在上面提到的其他兩個插件中。

我們希望本文能幫助您學習如何將無限滾動設計添加到WordPress博客。 您可能還想查看有關如何在WordPress中添加滾動深度跟踪的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。