現在越來越多的網站都開始跟隨Android和iOS的潮流,為訪客提供暗黑模式。一些新的WordPress主題會直接附帶暗黑模式(又稱夜間模式,以下一律稱為暗黑模式)切換功能,比如eyes主題,當然也有很多WordPress並沒有附帶這樣的功能。
本文將會詳細介紹暗黑模式及其作用,如何使用外掛新增網站暗黑模式及WordPress儀表盤暗黑模式:
什麼是暗模式及其作用
在移動裝置和計算機上使用暗黑模式可減少螢幕上的白光。
某些裝置帶有夜間模式,實際上使用了較暖的色調。暗黑模式則是使用其他方法-通過在背景中新增深色來實現。
如果您使用的是iPhone或Android裝置,則只需使用切換開關就可以切換到暗黑模式。
或者,在計算機上使用Chrome擴充套件程式(例如Night Eye)以暗黑模式檢視網站。使用該擴充套件實現的閃電博官網暗黑模式外觀如下:
閃電博官網暗黑模式
將暗黑模式新增到站點以供使用者可選擇在檢視站點時開啟和關閉暗黑模式。該擴充套件還支援使用者通過設定更好地控制網站在暗黑模式下的外觀。
一些熱門視訊網站也提供暗黑模式,方便使用者可以在深夜觀看視訊,獲得更舒適的觀看體驗。
YouTube暗黑模式
除了為網站前端頁面新增暗黑模式之外,甚至還可以在WordPress後臺也新增暗黑模式。如果您經常在晚上編輯文章,這就非常實用了。
下面,我們將分別介紹如何為WordPress網站及WordPress儀表盤新增暗黑模式。
WordPress網站新增暗黑模式教程
首先,需要安裝並啟用WP Dark Mode外掛。
啟用後,在WordPress後臺進入“設定»WP Dark Mode”頁面,然後單擊“General Settings”選項卡。
你可以看到預設已經啟用“Enable OS aware Dark Mode”,就是說,當訪客的裝置設定為暗黑模式時,訪問者會直接看到您網站的暗黑模式版本。
“Show Floating Switch”設定也預設啟用的。即使使用者未在裝置上啟用暗黑模式選項,他們也可以隨時通過外掛提供的暗黑模式切換按鈕將其站點檢視切換為暗黑模式。
WP Dark Mode外掛設定
啟用外掛後訪問您的網站,會在右下角看到該開關。點選它即可將網站切換為暗黑模式:
暗黑模式按鈕
“設定»WP Dark Mode”外掛設定頁面上還有更多自定義選項。但是,該外掛的免費版本會有諸多限制。
例如,您只需要單擊“Display Settings”選項卡即可更改浮動開關的樣式:
WP Dark Mode外掛顯示設定
您還可以使用“Style Settings”選項卡自定義深色模式的顏色:
WP Dark Mode外掛樣式設定
進行任何更改後,請確保單擊“儲存設定”按鈕。
注意:使用WP Dark Mode的免費版本,只有前2種浮動開關樣式和前2種顏色預設可選。WP Dark Mode的專業版提供了更多的選項,以及在特定時間開啟Dark Mode的功能以及新增自定義CSS程式碼的選項。
WordPress管理後臺新增暗黑模式教程
WordPress附帶了管理後臺配色方案,但是沒有一種預設配色方案可以減少來自螢幕的白光。對此,我們還是借用外掛解決該問題。
讓我們看一下如何將暗黑模式新增到WordPress儀表盤中,以在晚間編輯文章時保護眼睛。
只需轉到設定»WP Dark Mode頁面,然後單擊常規設定選項卡。然後,將“Enable Backend Darkmode”開關切換到開啟位置。
WP Dark Mode外掛後臺夜間模式設定
您將在WordPress管理後臺的頂部欄中看到一個新的開關:
暗黑模式的WordPress後臺
只需單擊此開關即可立即將您的WordPress管理後臺切換為暗黑模式。
Tip:如果站點有多個WordPress使用者,則每個人都可以根據自己的喜好開啟和關閉暗模式。
由於“Dark Mode”不是管理介面配色方案,也就是可以將其與現有的WordPress管理介面配色方案一起使用。只需轉到“使用者»Profile”,然後單擊“管理介面配色方案”下的一個選項。
注意,需要關閉暗黑模式才能檢視管理配色方案選項:
管理介面配色方案設定
在WordPress古騰堡編輯器中撰寫文章時,也可以開啟暗黑模式。單擊左上角的小顏色圖示,然後選擇要使用的模式:
古騰堡編輯器暗黑模式
現在,您可以在晚上舒適地在網站上進行文章編輯工作了。
關於本教程,到此完畢!無論您是希望在網站前端實現暗黑模式,還是後臺需要,均可以通過外掛實現!
不過,小編認為所謂“暗黑模式或者夜間模式”,更適合移動端,而不是PC端!
評論留言