你是否想要在自己的 WordPress 當中,客製化側邊的滾動條?讓你的網站有別於其他網站,創造帶有你個人風格的網站樣式。
在今天的教學當中,將會教大家如何在 WordPress 當中輕鬆的實現自定義滾動條,有兩種解決方案可以讓我們快速的達成這個效果。你可以根據你的喜好,選擇其中一種方式實現。
自定義滾動條顏色
在預設的情況下,我們無法在 CSS 當中更改滾動條的屬性。雖然有一些方案可以讓我們達成我們想要的功能,但目前為止,大多數的瀏覽器都不支援,因此暫且不提。
為了解決這個既有問題,一般來說我們會使用特定瀏覽器的「偽元素」或是「JavaSciprt」來覆蓋原始的滾動條外觀。
以下將分別帶來「偽元素」與「JavaScript」兩種不同的技術。但是,由於在不同的瀏覽器與設備環境下,這些效果可能會有些許的不同。因此,在你完成後,請使用各種不同的瀏覽器與設備進行相容性測試,確保你的設定在所有環境下都能正常顯示。
接著就讓我們來看看,到底該怎樣才能在 WordPress 中添加客製化的滾動條顏色。
方法一
利用外掛在 WordPress 中加入自定義滾動條
對於大多數的人來說,使用 WordPress 外掛式是較容易的方式。
第一個 WordPress 外掛叫做「Advanced scrollbar」 ,安裝完成並啟用後,前往「設定」→「Custom Color scrollbar Settings」,或是直接由「Custom color scrollbar」進入此外掛的設定頁面。
在此外掛的設定頁面當中,你可以決定滾動條的顏色與背顏色,同時還可以改變滑鼠滾輪的滾動速度。
設定完成之後,可以看到現在網站的滾動條已經改變了。
如果你想要建立一個免費 WordPress 網站來測試,可以參考我們之前的免費 WordPress 主機介紹。
方法二
利用 CSS 在 WordPress 中自定義滾動條顏色
在網頁設計當中,我們可以直接使用 CSS 來設定滾動條的樣式。但注意,這個方式目前僅適用於 Google Chrome、Safari、Opera…等等,使用 WebKit 渲染引擎的瀏覽器,如果你在行動裝置上的瀏覽器,或在 Firefox 瀏覽器當中觀看,此效果有可能不會顯示。
你只需要將以下 CSS 程式加入你的 CSS 樣式當中。
你可以隨意的替換其中的顏色或是陰影等屬性。
根據你的 WordPress 佈景主題的不同,有些主題會提供自定義 CSS 的區塊,你就可以在後台編輯時,及時預覽滾動條的呈現效果:
希望今天的內容能夠幫助你了解如何在 WordPress 當中自定義滾動條的外觀。如果你希望看到更多好用的 WordPress 佈景主題,繼續閱讀我們的 WordPress 主題介紹。
如果你喜歡今天這篇教學文章,歡迎追蹤我們的 Facebook 與 Instagram。有任何問題歡迎在下方留言,我們會盡快回覆給你。
猜你喜歡
- 6 個實用的小技巧,告別 WordPress 網站速度變慢的問題,加速你的 WP 網站
- 2019 Hostinger 7 月 - 1 折 90% Off 購買註冊教學 + WordPress 安裝教學,一鍵 WordPress 快速安裝教學
- 如何在 WORDPRESS 中自動顯示 WEBP 圖片格式
- [2019] 15 個 WordPress Newsletter 電子報訂閱外掛
- WooCommerce 是什麼?WooCommerce 中文懶人包,免費利用 WooCommerce 外掛建立購物車系統
- 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 - 2019 免費/付費通通有
- 如何修復在 WordPress 當中「503 Service Unavailable Error」的問題?
- 如何快速在 WordPress 中啟用 GZIP 資料壓縮功能
- DemosWP - 免費快速建立 WordPress 測試網站,提供 SSL、phpMyAdmin 與 SFTP 功能
- WordPress 是什麼?新手入門教學 - 深入淺出帶你了解什麼是 WordPress 網站