fbpx
黑色星期五 (Black Friday) 優惠開始

如何啟用 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 外掛?

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

步驟一:

在您的 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」,你可以在編輯文章和頁面時,看到它和「區塊編輯器」 良好的合作。

參考資料和引用文獻:

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:7,800+ 人 (持續增加之中)

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

發表您的留言