通過安裝WP Dark Mode外掛，把黑暗模式加入到你的WordPress網站

本篇文章將教你，如何通過3個簡單的步驟，把黑暗模式加入到你的 WordPress 網站中，保護讀者的眼睛，從而讓讀者們更加喜愛你的網站，增加網站 SEO。

目錄 隱藏

• WP Dark Mode 外掛介紹
• 使用教學
  • 安裝外掛
  • 前往網站前台觀看效果
  • 如何更改按鈕「樣式」?
  • 如何更改按鈕「位置」?
  • 使用外掛免費版本，該如何自行微調按鈕位置？
  • 網站後台如何顯示深色模式?
  • 編輯文章時如何開啟深色模式?
• 結語

使用我們開發的 Make 工具將文章自動化！

「數位果子」提供全自動化的文章生成工具，
我們經過實戰，知道如何透過這工具快速提升流量，
聯絡我們，免費了解 全自動化 AI 內容生成工具！

聯繫方式：

電話：0970-357-535（程先生）

加我 LINE ID：cherng65

0 0 選票

文章評分

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。

by 小翔

WP Dark Mode 外掛介紹

WP Dark Mode 外掛可以為 WordPress 網站添加一個黑暗模式按鈕，通過這個按鈕，可以在黑暗模式和原本樣貌之間來回切換，網站讀者可以依自身喜好自由切換。 外掛啟用後即可產生效果，而無需進行任何復雜的設置。

黑暗模式 通常會減少螢幕所發出的白光，從而使讀者的眼睛更輕鬆，對於降低 網站跳出率 有著一定的效果，尤其是那些背景全白的網站 (就像本站)。

使用我們開發的 Make 工具將文章自動化！

「數位果子」提供全自動化的文章生成工具，
我們經過實戰，知道如何透過這工具快速提升流量，
聯絡我們，免費了解 全自動化 AI 內容生成工具！

聯繫方式：

電話：0970-357-535（程先生）

加我 LINE ID：cherng65

0 0 選票

文章評分

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。

by 小翔

該外掛還有內建很多的功能，如 : 網站後台、文章編輯時開啟黑暗模式等等..，幫助網站站長保護好眼睛，減緩因為長期管理網站、編輯文章，所導致的眼睛疲勞。

圖片來源 : 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 個地方：

1. 首先前往你的 WordPress 網站後台 > WP Dark Mode > 設定 > 切換按鈕設定 > 浮動式切換按鈕位置，設定你的深色模式浮動式切換按鈕是要在網站的左下角、還是右下角。
2. 並修改剛剛貼上到附加的 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 小翔