提升網站視覺吸引力可以顯著改進用戶體驗，而捲動條是經常被忽視的一部分。自訂捲動條可以為您的網站增添獨特的元素，使其更具視覺吸引力並與整體設計美學相符。
在 WPressize Me，我們撰寫了數百篇關於 WordPress 設計的文章，並使用不同的自訂功能來提升網站參與度。自訂捲動條可以增強網站的外觀，讓訪問者的導航更流暢且更直觀。
在本文中，我們將向您展示如何輕鬆地在 WordPress 中添加自訂捲動條。
為什麼要在 WordPress 中添加自訂捲動條？
在2018年，WC3草擬了一份提案，允許網站所有者通過 CSS 自訂捲動條的外觀。今天，許多現代瀏覽器已支持自訂捲動條。
考慮到這一點，您可能希望將捲動條更改為更適合網站色彩方案或品牌風格的樣式。許多網站還使用自訂捲動條來吸引訪客的注意，這可以增加頁面瀏覽量並減少跳出率。
然而，需要注意的是，每個瀏覽器對自訂捲動條的處理方式不同。許多瀏覽器僅部分支持自訂，而有些甚至完全不顯示您的自訂樣式。因此，重要的是使用不同瀏覽器和設備測試您的網站，以查看捲動條在各個瀏覽器中的展示效果。
了解這些之後，讓我們來看看如何在 WordPress 中添加自訂捲動條。只需使用以下快速鏈接跳轉到您希望使用的方法：
- 方法 1：使用插件在 WordPress 中添加自訂捲動條（簡易）
- 方法 2：使用 CSS 在 WordPress 中添加自訂捲動條顏色
- 額外：在 WordPress 中添加返回頂部效果
方法 1：使用插件在 WordPress 中添加自訂捲動條（簡易）
自訂捲動條的最簡單方法是使用 Advanced Scrollbar 插件。這個免費插件允許您更改捲動條的寬度、顏色、捲動速度等，而無需撰寫一行程式碼。
首先，您需要安裝並啟用 Advanced Scrollbar 插件。更多詳細資訊，請參閱我們關於如何安裝 WordPress 插件的逐步指南。
啟用後，前往 設定 » Advanced Scrollbar 設定。
在這裡，您可以更改捲動條的顏色方案和軌道背景顏色。在以下圖像中，我們創建了一個藍色捲動條。
您還可以通過在‘滑鼠捲動步長’欄位鍵入新數字來更改滑鼠滾輪的捲動步長。較低的數值會使您的網站捲動更緩慢，而較高的數值會使其捲動較快。
您還可以選擇是否要自動隱藏捲動條，使其僅在訪客捲動時出現。如果您創建了更彩色的捲動條並擔心它可能會分散其他內容的注意力，這會很有幫助。
默認情況下，捲動條位於瀏覽器窗口的右側。然而，如果您願意，可以通過‘軌道對齊’設定將其移動到左側。
當您對捲動條的配置感到滿意時，記得點擊“儲存更改”以保存設定。
您現在可以訪問您的 WordPress 網站，查看自訂捲動條的效果。
方法 2：使用 CSS 在 WordPress 中添加自訂捲動條顏色
如果您希望對捲動條進行更高級的更改，則另一個選擇是使用 CSS。
這種方法允許您自訂捲動條的每個部分，但僅適用於使用 WebKit 的桌面瀏覽器，這意味著您的更改將不會在所有瀏覽器上顯示，包括行動設備瀏覽器。
要使用 CSS 自訂捲動條，請轉到 外觀 » 自訂。
注意：如果您使用的是區塊主題，這個選項對您將不可用。在這種情況下，您可以通過輸入 https://example.com/wp-admin/customize.php URL 來打開自訂器。請記得將 example.com 替換為您自己的網站域名。
在 WordPress 自訂器中，點擊‘額外 CSS’。
現在，您可以將代碼添加到出現的小型編輯器中。
以下是更改捲動條外觀的代碼範例：
::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #ffb400; border: 1px solid #ccc; } ::-webkit-scrollbar-thumb { background: #cc00ff; border: 1px solid #eee; height: 100px; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: blue; }您可以添加任何您想要的代碼。更多關於 CSS 的資訊，請參閱我們關於如何向 WordPress 主題添加自訂 CSS 的完整指南。
當您對代碼感到滿意時，只需點擊“發布”按鈕。您現在可以在 WebKit 瀏覽器中訪問您的 WordPress 部落格，查看您的更改效果。
額外：在 WordPress 中添加返回頂部效果
除了創建自訂捲動條，您可能還希望在 WordPress 網站中添加返回頂部效果。如果您有較長的博客文章，希望為用戶提供快速返回頂部的方法，這會非常有幫助。
要添加此功能，您需要安裝並啟用 WPFront Scroll Top 插件。詳細說明請參閱我們關於如何安裝 WordPress 插件的教程。
啟用後，從 WordPress 儀表板訪問 設定 » 滾動頂部 頁面，勾選‘啟用’框以啟用返回頂部效果。
之後，您可以從這裡編輯捲動偏移量、按鈕大小、不透明度、淡出持續時間、滾動持續時間等。
完成後，別忘了點擊“儲存變更”按鈕保存您的設定。
您現在已成功將返回頂部效果添加到您的網站。如需更詳細的說明，請參閱我們關於如何在 WordPress 中添加平滑返回頂部效果的教程。
希望這篇文章幫助您了解如何在 WordPress 中添加自訂捲動條。您也可以參閱我們的指南，了解如何在 WordPress 中創建登陸頁面，或查看我們精選的最佳拖放頁面構建器。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
