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

文章最後更新於 2022 年 2 月 4 日

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

WP Dark Mode 外掛介紹

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

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

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

圖片來源 : WP Dark Mode 外掛頁面

使用教學

安裝外掛

外掛安裝教學 :
https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

開啟 WordPress 後臺管理介面,前往 外掛 > 安裝外掛

外掛 > 安裝外掛

step 2

使用關鍵字搜尋外掛,輸入「WP Dark Mode」。

搜尋 WP Dark Mode

step 3

找到名稱為「WP Dark Mode」的外掛,點選 立即安裝,並 啟用 該外掛。

立即安裝並啟用

前往網站前台觀看效果

當 WP Dark Mode 外掛啟用後,前台會多出一個「黑暗模式按鈕」。 其實到這裡,外掛已經產生效果了,可以先前往你的網站前台觀看效果如何,再看是否要更改外掛設定。

WP Dark Mode 外掛的設定頁面有中文化,對於中文使用者來說非常友好,設定旁的說明文字淺顯易懂。 所以,以下就只教學那些最常會用到的設定。
黑暗模式按鈕

如何更改按鈕「樣式」?

目前該外掛的免費版本,只有 3 個按鈕樣式可供選擇,如果想要解鎖更多的按鈕樣式,就需要花錢購買他們的 Pro 版本 (付費)。

step 1

在 WordPress 後臺管理介面,前往 WP Dark Mode > 設定

WP Dark Mode > 設定

step 2

點選左半邊的「切換按鈕設定」選項,並在右半邊的「浮動式切換按鈕樣式」中,選擇自己想要的按鈕樣式。

切換按鈕設定 > 浮動式切換按鈕樣式

step 3

完成後,記得下滑到畫面下方點擊「儲存設定」按鈕,儲存你的外掛設定。

儲存設定

如何更改按鈕「位置」?

外掛的免費版本,只有兩個位置可供選擇,分別是網站左下角、網站右下角,如果想要自由選擇按鈕位置,就需要花錢購買他們的 Pro 版本 (付費)。

step 1

在 WordPress 後臺管理介面,前往 WP Dark Mode > 設定

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 > 設定

WP Dark Mode > 設定

step 2

點選左半邊的「一般設定」選項,並勾選右半邊的「網站後端深色模式」,啟用後台深色模式。

一般設定 > 網站後端深色模式

step 3

勾選後,記得下滑到畫面下方點擊「儲存設定」按鈕,儲存你的外掛設定。

儲存設定

step 4

儲存設定後,即可在網站後台上方找到「深、淺色切換」按鈕,點擊該按鈕即可自由更改網站後台深淺樣式。

網站後台上方「深、淺色切換」按鈕

編輯文章時如何開啟深色模式?

點擊文章編輯器頁面上方的「圓餅圖」按鈕,再下拉選單中選擇「Darkmode」選項,編輯頁面即可切換成深色模式。

圓餅圖按鈕 > Darkmode

結語

WP Dark Mode 外掛可以為網站加入一個,自由切換網站深、淺色的按鈕。 這對於你網站的讀者來說是一大福音,網站跳出率也有可能因此降低,最重要的是,有可能因為深色模式因此增加了忠實粉絲人數。

畢竟,誰不愛護自己的眼睛呢? 雖然,深色模式對於眼睛的保護效果無法明確量化,到底抵擋了多少藍光我們也無從得知。 但讀者可能會因為你的網站有深色模式,有個心理安慰,從而心安理得的時常光臨你的網站,網站流量也因此增加。

當然,WP Dark Mode 外掛的功能遠遠不只如此,還有如 : JavaScript 檔案延遲載入、字型大小切換按鈕等等.. 的實用功能 (需付費),和一些下載次數多的 WordPress 外掛、佈景主題,如 : WooCommerce 外掛、Astra 主題,也有很好的兼容性。

詳細和那些外掛、佈景主題有兼容性,可以前往 WP Dark Mode 官網查詢 :

WP Dark Mode 兼容性 :
https://wppool.dev/dark-mode-compatibility/

最重要的是,外掛設定頁面居然支援中文,也是小翔選擇使用這個外掛的主要原因。

0 0 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論