文章最後更新於 2022 年 2 月 4 日
本篇文章將教你，如何通過3個簡單的步驟，把黑暗模式加入到你的 WordPress 網站中，保護讀者的眼睛，從而讓讀者們更加喜愛你的網站，增加網站 SEO。
WP Dark Mode 外掛介紹
WP Dark Mode 外掛可以為 WordPress 網站添加一個黑暗模式按鈕，通過這個按鈕，可以在黑暗模式和原本樣貌之間來回切換，網站讀者可以依自身喜好自由切換。 外掛啟用後即可產生效果，而無需進行任何復雜的設置。
黑暗模式 通常會減少螢幕所發出的白光，從而使讀者的眼睛更輕鬆，對於降低 網站跳出率 有著一定的效果，尤其是那些背景全白的網站 (就像本站)。
該外掛還有內建很多的功能，如 : 網站後台、文章編輯時開啟黑暗模式等等..，幫助網站站長保護好眼睛，減緩因為長期管理網站、編輯文章，所導致的眼睛疲勞。
圖片來源 : WP Dark Mode 外掛頁面
使用教學
安裝外掛
外掛安裝教學 : https://xiaoxiang.blog/how-to-install-the-plug-in/
step 1
開啟 WordPress 後臺管理介面，前往 外掛 > 安裝外掛。
step 2
使用關鍵字搜尋外掛，輸入「WP Dark Mode」。
step 3
找到名稱為「WP Dark Mode」的外掛，點選 立即安裝，並 啟用 該外掛。
前往網站前台觀看效果
當 WP Dark Mode 外掛啟用後，前台會多出一個「黑暗模式按鈕」。 其實到這裡，外掛已經產生效果了，可以先前往你的網站前台觀看效果如何，再看是否要更改外掛設定。
WP Dark Mode 外掛的設定頁面有中文化，對於中文使用者來說非常友好，設定旁的說明文字淺顯易懂。 所以，以下就只教學那些最常會用到的設定。
如何更改按鈕「樣式」?
目前該外掛的免費版本，只有 3 個按鈕樣式可供選擇，如果想要解鎖更多的按鈕樣式，就需要花錢購買他們的 Pro 版本 (付費)。
step 1
在 WordPress 後臺管理介面，前往 WP Dark Mode > 設定。
step 2
點選左半邊的「切換按鈕設定」選項，並在右半邊的「浮動式切換按鈕樣式」中，選擇自己想要的按鈕樣式。
step 3
完成後，記得下滑到畫面下方點擊「儲存設定」按鈕，儲存你的外掛設定。
如何更改按鈕「位置」?
外掛的免費版本，只有兩個位置可供選擇，分別是網站左下角、網站右下角，如果想要自由選擇按鈕位置，就需要花錢購買他們的 Pro 版本 (付費)。
step 1
在 WordPress 後臺管理介面，前往 WP Dark Mode > 設定。
step 2
點選左半邊的「切換按鈕設定」選項，並在右半邊的「浮動式切換按鈕位置」中，設定成自己想要的按鈕位置。 免費版本分別有左下角和右下角兩種位置選擇。
step 3
完成後，記得下滑到畫面下方點擊「儲存設定」按鈕，儲存你的外掛設定。
使用外掛免費版本，該如何自行微調按鈕位置？
由於 WP Dark Mode 外掛免費版本的深色模式浮動式切換按鈕只有兩個位置可供選擇，分別是網站左下角、網站右下角，且位置無法自訂。 所以以下將教你如何利用 CSS 程式碼來修改該按鈕的位置。
首先，你必須先前往你 WP 網站佈景主題的「附加的 CSS」，並把以下程式碼複製貼上到該附加的 CSS 程式碼輸入框中。 假如你網站的佈景主題沒有附加的 CSS 這個選項設定，你可以選擇另外安裝 Code Snippets 程式碼片段外掛來達成這個步驟。
.wp-dark-mode-switcher label, .wp-dark-mode-side-toggle-wrap label {
position:absolute;
top:-82px;
left:-41.5px
}貼上以上這段程式碼後，你需要依序修改以下 2 個地方：
- 首先前往你的 WordPress 網站後台 > WP Dark Mode > 設定 > 切換按鈕設定 > 浮動式切換按鈕位置，設定你的深色模式浮動式切換按鈕是要在網站的左下角、還是右下角。
- 並修改剛剛貼上到附加的 CSS 的那段程式碼，修改「top:」和「left:」後的數字，例如：你可以把 top:-82px; 修改成 top:30px;，把 left:-41.5px 修改成 left:-40px 等等，並和你網站前台修改後的結果對照著調試，慢慢的修改成你想要的按鈕位置。
網站後台如何顯示深色模式?
step 1
在 WordPress 後臺管理介面，前往 WP Dark Mode > 設定。
step 2
點選左半邊的「一般設定」選項，並勾選右半邊的「網站後端深色模式」，啟用後台深色模式。
step 3
勾選後，記得下滑到畫面下方點擊「儲存設定」按鈕，儲存你的外掛設定。
step 4
儲存設定後，即可在網站後台上方找到「深、淺色切換」按鈕，點擊該按鈕即可自由更改網站後台深淺樣式。
編輯文章時如何開啟深色模式?
點擊文章編輯器頁面上方的「圓餅圖」按鈕，再下拉選單中選擇「Darkmode」選項，編輯頁面即可切換成深色模式。
結語
WP Dark Mode 外掛可以為網站加入一個，自由切換網站深、淺色的按鈕。 這對於你網站的讀者來說是一大福音，網站跳出率也有可能因此降低，最重要的是，有可能因為深色模式因此增加了忠實粉絲人數。
畢竟，誰不愛護自己的眼睛呢? 雖然，深色模式對於眼睛的保護效果無法明確量化，到底抵擋了多少藍光我們也無從得知。 但讀者可能會因為你的網站有深色模式，有個心理安慰，從而心安理得的時常光臨你的網站，網站流量也因此增加。
當然，WP Dark Mode 外掛的功能遠遠不只如此，還有如 : JavaScript 檔案延遲載入、字型大小切換按鈕等等.. 的實用功能 (需付費)，和一些下載次數多的 WordPress 外掛、佈景主題，如 : WooCommerce 外掛、Astra 主題，也有很好的兼容性。
詳細和那些外掛、佈景主題有兼容性，可以前往 WP Dark Mode 官網查詢 :
WP Dark Mode 兼容性 : https://wppool.dev/dark-mode-compatibility/
最重要的是，外掛設定頁面居然支援中文，也是小翔選擇使用這個外掛的主要原因。
如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。
在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。
有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。
by 小翔