WordPress帶有預設的評論系統，您可以使用它在您的部落格上進行互動討論。您可以選擇啟用或禁用站點範圍內的評論以及單個部落格文章。當您對文章有大量評論時，使用者需要滾動瀏覽整個評論部分才能到達頁尾。
在本文中，我們將解釋如何在WordPress中延遲載入評論以僅在需要時載入它們。
懶載入評論
延遲載入是僅在有使用者互動時才載入內容的功能。雖然WordPress使用者主要使用延遲載入影象，但您也可以使用此功能進行評論。以下是您需要在WordPress網站中延遲載入評論的一些原因。
- 評論僅在您的部落格文章底部可用，因此在初始頁面載入期間不需要載入它們。
- 長長的評論列表會增加DOM元素，從而影響您網站的頁面載入速度。
- 當使用者不想發表評論時，評論表單可能會影響使用者在您網站上的體驗。
- 冗長的評論列表會在移動裝置上佔據很大的空間，這是可以避免的。
- 預設情況下，評論將顯示gravatar影象，如果您從設定中禁用gravatar，大多數主題將無法正確對齊評論部分。由於gravatar圖片是從第三方網站載入的，因此會影響您網站的速度。
總之，在需要時隱藏和載入評論表單將改善頁面載入時間和使用者體驗。由於這些是谷歌搜尋演算法中的排名因素，您可以通過延遲載入評論來提高排名。
評論分頁的預設選項
WordPress 在“設定 > 討論”部分提供了一些預設設定來管理評論。例如，您可以設定在部落格文章中顯示的最大評論數。當評論數量超過設定限制時，這將建立分頁評論。但是，它並沒有提高多少速度，因為評論表單將在初始頁面載入期間載入。
在WordPress儀表盤中啟用分頁評論
對於gravatar圖片，您可以通過WP Rocket或Perfmatters等外掛使用圖片延遲載入功能。此外，大多數免費快取和優化外掛都提供影象延遲載入功能，您可以使用它來延遲載入gravatar影象。
在WordPress中延遲載入評論
懶載入評論可以解決很多速度問題，包括懶載入gravatar圖片。為此，您必須使用延遲載入評論外掛並選擇方法。登入到您的WordPress儀表盤部分後，轉到“外掛 > 安裝外掛”區域。搜尋“lazy load comments”並向下滾動以找到lazy load comments外掛。
單擊“立即安裝”按鈕，然後單擊“啟用”按鈕開始在您的站點上使用該外掛。
安裝lazy load comments外掛
自定義評論延遲載入選項
該外掛提供了一種簡單的設定來決定您希望如何延遲載入評論部分。轉到“設定 > 討論”部分並向下滾動到底部。在“頭像”部分上方，您可以找到“Lazy Load Comments”的新選項。
延遲載入評論設定
單擊“lazy load comments”的下拉選單以找到三個可用選項。
選擇滾動延遲載入評論
- On Scroll – 當使用者到達頁面上的評論部分時，延遲載入滾動評論。這是一個預設選項，類似於延遲載入影象。
- On Click – 這將顯示“Load Comments”按鈕，使用者可以單擊它以顯示評論和表單部分。
- No Lazy Load – 這將禁用延遲載入功能，因此不要選擇此選項。
我們建議選擇“On Click”選項以顯示一個按鈕，該按鈕可以通過兩種方式提供幫助。首先是隻有感興趣的使用者想要留下或閱讀評論才會點選按鈕。其次，它可以通過隱藏評論和表單來節省空間，從而改善手機上的使用者體驗。選擇選項後，向下滾動並單擊“儲存更改”按鈕以在您的站點上應用設定。
在您的網站上進行測試
我們建議您在測試或臨時站點中測試延遲載入按鈕。這是因為按鈕的外觀取決於您主題的樣式，並且大多數主題不支援正確的樣式。下面是“Load Comments”按鈕在預設的WordPress主題二〇二二中的外觀。單擊按鈕時，您將看到一個旋轉的載入程式，然後將出現評論部分。
在預設WordPress主題中載入評論按鈕
這是按鈕在我們測試過的第三方主題之一上的外觀。它只是顯示為沒有清晰可見性的文字。
載入評論按鈕未對齊
如果您的主題沒有正確顯示“Load Comments”按鈕，您需要使用自定義CSS調整填充和邊距細節。該外掛使用llc_comments_button的CSS類ID來定義按鈕樣式。例如，下面是我們用來對齊breek主題上的按鈕的CSS程式碼。
#llc_comments_button {
padding: 15px;
margin: 100px;
border-radius: 5px;
font-size: 18px;
background: rgb(255 241 118);
}
您可以在瀏覽器中使用檢查選項檢查原始碼，並在實時站點上調整填充、邊距、邊框半徑和其他引數。
在瀏覽器中自定義按鈕CSS
如果要在懸停時更改按鈕背景，請使用以下CSS。由於我們在上面的CSS中使用黃色變體作為預設按鈕背景，這裡我們使用白色來顯示懸停。這與黑色文字顏色混合，以便使用者可以清楚地看到按鈕並閱讀文字。
#llc_comments_button:hover {
background: rgb(255 255 255);
}
準備好CSS後，轉到WordPress管理儀表盤並導航到“外觀 > 自定義”部分。將CSS程式碼貼上到“附加CSS”部分下，然後單擊“釋出”按鈕。
在定製器部分新增額外的CSS
請注意，定製器不會反映按鈕，因為延遲載入僅適用於實時站點。
評論連結的問題
許多主題在文章標題下方顯示“評論”連結作為文章後設資料。延遲載入評論時，此評論連結將不起作用，因為當您在文章標題部分時不會載入評論部分。
標題下方的評論元連結
不幸的是，這裡唯一的選擇是禁用評論元連結。Astra、GeneratePress和Kadence等流行的輕量級主題提供了一個選項來切換您想要在標題下方顯示的後設資料。但是，如果您的主題不提供此功能，您可能需要使用CSS來隱藏連結。如上所述，您可以右鍵單擊連結並使用檢查選項在開發人員工具部分中找到相關的CSS類。擁有評論後設資料的CSS類後，在“外觀 > 自定義 > 附加CSS”部分下新增以下CSS以隱藏連結。
.my_comments_meta {
display: none;
}
如果需要，請從主題開發人員那裡獲得有關如何隱藏元連結的幫助。
延遲載入第三方評論設定
一些網站所有者使用Facebook或Disqus評論而不是預設的WordPress評論表單。雖然這有助於減少評論垃圾郵件，但它會通過傳送額外的HTTP請求以從第三方站點載入評論，從而極大地影響速度。如果您使用Facebook或Disqus評論，那麼您可以使用不同的外掛延遲載入它們。您可以使用Facebook的Lazy Social Comments外掛和Disqus的Disqus Conditional Load外掛。
FB和Disqus評論延遲載入外掛
這些外掛也來自同一作者，但是提供了大量的自定義設定。對於Facebook評論延遲載入，安裝外掛後轉到“設定 > Lazy FB Comments”部分。填寫應用ID的詳細資訊、要顯示的評論數量、選擇配色方案並選擇點選選項。您還可以新增一個“Comments Div Class”以將按鈕包裝在 div元素中，您可以使用其他CSS進行自定義，如上所述。
Lazy FB Comments設定
Disqus Conditional Load外掛需要在延遲載入之前完全整合Disqus。它將在儀表盤側邊欄中建立名為“Disqus”的附加選單項。您可以瀏覽不同的部分並自定義設定以延遲載入Disqus評論。
Disqus Conditional Load外掛設定
評論留言