fbpx
Bluehost 主機最新優惠

如何啟用 WordPress 深色模式?WP Dark Mode 外掛基礎應用

近年瀏覽線上服務有一項關於背景色彩的改變,人們開始慢慢追求 「 深色」或「黑色背景」,有些朋友認為對眼睛有保護作用,也有人認為可以更專注在內容之上等等。這項功能在電腦上稱為「深色模式」,在行動裝置上則稱為「深色主題」。這篇教學會教授使用 WP Dark Mode 外掛, 輕鬆地將深色模式新增到您的 WordPress 網站的前端和管理區域,而且這個強大的功能是完全免費。

什麼是 WP Dark Mode 外掛?

什麼是 WP Dark Mode 外掛?
WordPress 外掛目錄:WP Dark Mode 外掛

WP Dark Mode 是一款讓新手無需任何編程背景之下,無需進行任何復雜的設置和調整,即可以達到套用「深色模式」的效果。這外掛允許你調整功能的外觀,包括色彩、圖標、位置、條件式和其他更進階的功能。濫尤其是「圖文 + 文字」為主力內容的圖文部落格,如果文章內容常見有 5,000 至 10,000 字以上,這個模式特別有作用。

在夜間使用深色模式可以減少眼睛疲勞

在夜間使用深色模式可以減少眼睛疲勞
在夜間使用深色模式可以減少眼睛疲勞

研究指出在夜間使用深色模式,可對眼睛起到保護的作用,因為平常背景主要是「白色」或「淺色」為主,會產生很大面積的光暈和反光折射效果,眼睛長期聚焦電腦螢幕會引起眼睛不適或暈眩 (Vertigo) 跟一般頭暈 (Dizziness)。當然每個人的體質不同會因人而異,像程式編寫員等的工作,特別鐘愛這種黑色背景的設計,大家不妨參考一下,也許你也會愛上?

備注和溫馨提醒:

部分人對深色模式會產不良反應,由其是「散光」度數嚴重者,對於「白光」太強可能會產生不適,就控制好色彩的對比度,方為上策。

「 深色模式」不等於「夜間模式」

 「 深色模式」不等於「夜間模式」
「 深色模式」不等於「夜間模式」

雖然兩者之間很像,但前者只是一種「手段」和「目的」,一般透過改動視覺元素來達成,後者卻是一整盤的規劃,怎至不少功能和外觀需要重製和改做,真的是為了讓在「夜間」工作的人方便和提升生產效率,而不單單是一種設計潮流或風尚。所以這次介紹的「WP Dark Mode 外掛」只能提供到「 深色模式」的效果,而不是「夜間模式」,當中過於細微的討論就請自行 Google 答案。

深色背景部分的優點:

1. 減少電腦和手機螢幕電量的消耗,因為愈光就需要更多電力。
2. 部分人的眼睛對「弱光」或「強光」有需要特別調整的裝置和配套

以 Youtube 影音平台的深色模式為例子

以 Youtube 影音平台的深色模式為例子
以 Youtube 影音平台的深色模式為例子

Google 和 Youtube 很早期就響應了這種趨勢,大家在從未體驗 「深色主題」 之前,不妨到各大公司的系統測試看看,避免直接使用自己的網站當白老鼠。

步驟一:

在 Youtube 官方首頁的右上方設定區,在下拉選單裡選取「外觀:裝置主題」。

步驟二:

這裡有 3 種選擇,第一是依據您裝置的設定同步,另外兩種分別是「深色主題」和「淺色主題」。

以 Youtube 影音平台的深色模式為例子

「深色主題」 的展示效果
「深色主題」 的展示效果

首先「深色主題」 的展示效果會把背景調整為深色,常見是「黑色」,但注意一般並非「100 % 黑色」,而是深灰色。內文字就會變成淺色,常見是「白色」,但實際上會控制對比度,讓人看得舒適和容易閱讀。

「淺色主題」 的展示效果
「淺色主題」 的展示效果

「淺色主題」則是相反,背景是常見是「白色」,內文字是深灰色,在這次介紹的外掛裡,您可以自訂色彩的組合和規則。

如何【安裝】 WP Dark Mode 外掛?

如何【安裝】 WP Dark Mode 外掛?
如何【安裝】 WP Dark Mode 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【安裝外掛】。

步驟二

進入【安裝外掛】的介面,在右方的(搜尋欄位)輸入【WP Dark Mode】。

步驟三

稍等片刻,您會看到【WP Dark Mode】的外掛資訊出現,請確保是如圖中的那個外掛。

如何【啟用】WP Dark Mode 外掛?

如何【啟用】WP Dark Mode 外掛?
如何【啟用】WP Dark Mode 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝外掛】。

步驟二

從外掛清單之中,找到免費版的【WP Dark Mode】的外掛,並按下【啟用】,這代表您希望使用 WP Dark Mode 作為您其中之一個 外掛功能 。

如何【刪除】WP Dark Mode 外掛?

如何【刪除】WP Dark Mode 外掛?
如何【刪除】WP Dark Mode 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝的外掛】。

步驟二

從外掛清單之中,找到免費版的【WP Dark Mode】的外掛,並按下【刪除】,這代表您希望終止使用 WP Dark Mode 作為您其中之一個外掛功能。

General Settings | 基礎設定

General Settings | 基礎設定
General Settings | 基礎設定
wp dark mode

這部分是最重要的 3 個主要功能,設定完成後, 「深色模式」基本上已經成形,其他設定都是錦上添花的進階設置。

步驟一:

正確安裝完成 WP Dark Mode 外掛之後,左側設定欄會多出外掛的專屬配置。

步驟二:

Enable Frontend Darkmode:是否啟用前端 / 前台的深色模式?這個是當然的,我們的目標就是要在網站門面啟用這個功能,推薦是「打勾」。

步驟三:

Enable Backend Darkmode:是否啟用後端 / 後 台的深色模式? 這個因人而異,這個效果只有管理網站控制台的人員生效,如果選擇啟用,上方狀態列會新增出一個獨立的開關,您可以點選控制 (Light 淺色 | Dark 深色) 模式,這個設定訪客是不到的。

步驟四:

Enable OS aware Dark Mode:是否啟用同步使用者裝置的深色模式?這代表當你使用 Window 或 Mac 作業系統,選擇了深色模式之後,網站這邊會自動追隨你作業系統的選擇,這適用於手機的作業系統。

Advanced Settings | 進階設定

Advanced Settings | 進階設定
Advanced Settings | 進階設定
wp dark mode

步驟一:

Make Dark Mode Default:是否將深色模式設為「預設值」?

步驟二:

Time Based Dark Mode:可以設定跟訪客所在地的真實時間而判定,例如可以控制在台灣的晚上才啟用深色模式,反之日間則不需要啟用。

Color Settings | 色彩設定「基礎」

Color Settings | 色彩設定「基礎」
Color Settings | 色彩設定「基礎」

Brightness 亮度:

預設是 100% 亮度,這因人而異。

Contrast 對比度 :

預設是 90% 對比度 ,這因人而異,注意不能太極端。

Sepia 深褐色比例:

加上少許褐色會讓畫面更舒服和和諧。

Want to use color presets? 是否使用預制的配色方案:

下方會再詳盡解讀 。

Want to use custom colors? 是否使用自訂的配色方案 :

可以依照網站的品牌色彩配置。

Color Settings | 色彩設定「進階」

 Color Settings | 色彩設定「進階」
Color Settings | 色彩設定「進階」
wp dark mode

如果在上方選擇啟用「是否使用預制的配色方案 」,您可以簡易地套用多種配色方案,不過免費版只有「兩種選擇」。

Color Settings | 色彩設定「影響」

 Color Settings | 色彩設定「影響」
Color Settings | 色彩設定「影響」

上方:

淺色模式之下,背景淺色,文字深色

下方:

深色模式之下,背景深色,文字淺色

Accessibility Settings | 輔助功能設定

Accessibility Settings | 輔助功能設定
Accessibility Settings | 輔助功能設定

Enable font size toggle 啟用使用者自由調整內文大小:

部分讀者可能需要「放大文字」的功能,或者視力不佳需要幫忙的朋友。

Keyboard Shortcut 啟用快捷鍵功能:

在瀏覽網頁時,按下鍵盤的 Ctrl + ALt + D 即可快速從深色或淺色模式之中切換。

Switch Settings | 開關設定

wp dark mode
Switch Settings | 開關設定
Switch Settings | 開關設定

關於「開關控制」的外觀設定,免費版只能選擇 3 個款式,如果需要更多外觀,請升級至付費版,值不值得就看每個人的價值觀和經濟能力。

Includes/ Excludes | 包括 / 不包括

Includes/ Excludes | 包括 / 不包括
Includes/ Excludes | 包括 / 不包括

新手建議留空這個部分,這是給予進階使用者或工程師作個別元素和物件的控制,需要本身對程式或 CSS 有一定理解的站長使用。

Triggers | 觸發條件

Triggers | 觸發條件
Triggers | 觸發條件

預設是「深色模式」是全站都通用,但這邊允許你個別獨立設置那些「文章 Post」或「頁面 Page」需要出現或隱藏,自由度非常高。

WooCommerce | 電商設置

WooCommerce | 電商設置
WooCommerce | 電商設置
Woo-commerce Support Features

如果你的網站有使用 WooCommerce 電商外掛,這邊可以設置「排除」部分商品或分類,當然如果你只是經營部落格就可以略過這部分。

Image Settings | 圖片設定

Image Settings | 圖片設定
Image Settings | 圖片設定

這個功能很特別,因為一般「深色模式」對圖片不起作用,但現在你可以個別設計 2 張不同模式之下的圖片,可以更完整地符合這個模式。

Custom CSS | 自訂義 CSS

Custom CSS | 自訂義 CSS
Custom CSS | 自訂義 CSS

像使用佈景主題的附加 CSS 相似,如果你不滿意這外掛提供的設定太少,可以在這裡自由地加入不同的 CSS 樣式,但這些樣式只有在「深色模式」啟用時生效。

Animation | 動畫

Animation | 動畫
Animation | 動畫

這個動畫效果很好,不會讓切換的過程變得太生硬,推薦使用「Fade In 淡入」效果非常自然,當然你可以試試其他不同的換場效果。

Analytics & Reporting | 分析報告

Analytics & Reporting | 分析報告
Analytics & Reporting | 分析報告

你可以輸入「電子郵件」,讓這個外掛定時傳送一個使用報告到你指定的電郵裡,不過實用性真的不大,這類數據也不知有什麼用途?

常見問題 FAQ

WP Dark Mode 外掛是「免費」?

免費的,不過進階的功能會受到限制,但一般在「深色模式」的基礎應用是沒有問題,大部分人都可以放心和免費使用。

WP Dark Mode 外掛相容於「區塊編輯器」嗎?

可以,而且提供 2 個專屬的「區塊 Block」,你可以在編輯文章和頁面時,看到它和「區塊編輯器」 良好的合作。

參考資料和引用文獻:

學員人數:5,500+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術