如何通過這 4 個簡單步驟將暗模式添加到您的 WordPress 網站
已發表: 2022-06-16當 Instagram 和其他幾個主要網站和應用程序在 2019 年 10 月添加暗模式時，我們目睹了人們對該功能的興趣大幅飆升。
然而，即使我們排除了 Instagram 採用夜間模式這一異常值，上圖也清楚地表明了該功能在過去幾年中的受歡迎程度的增長。
除了 Instagram，許多其他大公司已經過渡到夜間模式時代，你也應該考慮做出轉變。 不僅因為它是流行的，還因為它對您的用戶有很多好處，包括但不限於減少用戶的眼睛疲勞，增加用於訪問您網站的設備的電池壽命，以及它看起來更酷的事實。
好的，最後一個可能有點主觀，但我們堅持下去。
值得慶幸的是，為您的 WordPress 網站添加暗模式非常簡單。 您不僅可以設置您的網站如何向每個用戶顯示，還可以將該功能添加到您的管理儀表板，讓您自己的眼睛休息一下。
如果您正在考慮為您的網站添加暗模式，有幾種方法可以做到這一點，但正如您想像的那樣，使用插件是迄今為止最簡單的。
在這篇文章中，我們將介紹洛杉磯大多數網站設計公司推薦的插件——WP Dark Mode——並回顧添加和自定義此功能所需的所有步驟，以使其適合您的網站和 WordPress 主題。
但首先，讓我們看看什麼是暗模式及其最顯著的好處。 繼續閱讀！
什麼是暗模式，為什麼有用？
也稱為夜間模式，黑暗模式是一種簡單的顯示切換，可將網站的配色方案從淺色更改為深色。
在典型的白色背景上帶有黑色字母的網站上，這通常看起來像是簡單地反轉了顏色，但是，正如我們將在下面解釋的那樣，還有更多的東西。
這個簡單的調整顯著減少了屏幕上的白光，減少了眼睛疲勞，尤其是當用戶在晚上訪問網站時。
大多數現代操作系統和 Web 瀏覽器都提供啟用暗模式的選項。
暗模式最顯著的好處
我們已經在這篇文章中提到了此功能的一些好處，但我們認為為了您的方便，我們會在一個漂亮的項目符號列表中概述它們。
因此，暗模式的好處包括：
- 減輕眼睛疲勞
- 降低能耗並延長電池壽命
- 屏幕發出的白光更少
- 在您的頁面上花費的時間更多
如您所知，現代瀏覽器和操作系統已經提供暗模式作為選項，但如果您希望您的網站以正確的配色方案顯示給喜歡它的用戶，您需要自己添加它。
值得慶幸的是，安裝 WP 暗模式插件可以使這個過程變得簡單，並讓您對網站的暗模式外觀進行各種控制。
黑暗模式與夜間模式
在我們繼續之前，我們想解決一個眼尖的讀者可能會遇到的潛在問題。 也就是說，我們一直在使用並將繼續在本文中交替使用術語“黑暗模式”和“夜間模式”，儘管它們在技術上可以描述兩種不同的功能。
“夜間模式”一詞通常用於大多數現代智能手機上可用的功能，它會在夜幕降臨時從屏幕上全部或部分去除藍光，以減少屏幕時間對睡眠週期的影響。
然而，正如我們之前解釋的，這兩個術語可以互換使用，這是我們在這篇文章中選擇採用的方法。
現在我們已經解決了這個問題，讓我們看看如何為您的 WordPress 網站添加黑暗（或夜間）模式。
如何使用 WP 暗模式插件將暗模式添加到您的 WordPress 網站
既然您知道了所有可能想要為 WordPress 網站添加暗模式的原因，我們將通過四個簡單的步驟向您展示如何做到這一點。
我們來自邁阿密一家網頁設計公司的朋友幫助我們創建了這個分步指南，該指南依賴於一個名為 WP Dark Mode 的專門插件。
1.安裝插件
雖然有幾個暗模式 WordPress 插件，但我們發現 WP 暗模式是最用戶友好和最可靠的。
它是一個插件，可讓您快速輕鬆地構建站點的黑暗版本，而無需處理複雜的設置或代碼。
正如您所料，您可以在 WordPress 插件目錄中找到此工具。
我們假設您之前已經將插件添加到您的站點，但以防萬一，您需要做的就是轉到您的管理儀表板並從插件選項卡中選擇添加新的。
從那裡，您可以找到WP 暗模式，然後單擊立即安裝並激活。
2.打開所需的設置
您可以在“常規設置”選項卡中打開和關閉暗模式。 打開此選項卡後，您會看到默認情況下已經啟用了兩個選項。
這些是Enable Frontend Dark Mode和Enable OS Aware Dark Mode 。
前者在您的網站上啟用暗模式，而後者意味著如果用戶的操作系統或瀏覽器設置為暗模式，該功能將自動激活。
另一種選擇是Make Dark Mode Default 。 這是不言自明的——如果你打開它，所有用戶都會看到你網站的黑暗版本，不管他們的偏好如何。
3.打開和自定義浮動開關
如果您想讓用戶可以隨時在暗模式和亮模式之間切換，您也可以啟用“顯示浮動開關選項”。
這個選項將完全按照它在錫上所說的那樣做——在您的網站前端放置一個切換開關，允許用戶隨意打開或關閉暗模式。
您可以在“顯示設置”部分中弄亂圖標的位置和样式。 在插件的免費版本中，您在樣式方面的選擇有些有限，但關鍵功能（打開或關閉暗模式）就在那裡。
4. 嘗試不同的暗模式配色方案
此時，您的 WordPress 網站有一個功能齊全的暗模式，如果這就是您要尋找的全部，您可以跳過此步驟。
但是，如果您不希望您的網站看起來一般，我們強烈建議您自定義暗模式顏色。 您將在樣式設置部分找到所需的所有選項。
此屏幕提供可與您網站的視覺標識配合使用的調色板。
正如您可能想像的那樣，WP Dark Mode 插件的免費版本在這裡提供了一些有限的選項，但您應該能夠找到合適的解決方案。
如果您想進一步自定義顏色，高級版提供更廣泛的預設調色板，並允許您創建自己的方案。
獎勵——在 WordPress 管理儀表板上啟用暗模式
如果您要為您的客戶和潛在客戶提供 WordPress 網站前端暗模式的所有好處，為什麼不向您自己提供同樣的禮貌並將該模式也添加到您的管理儀表板中呢？
如果默認的 WordPress 配色方案對您的口味來說太亮了，WP Dark Mode 插件有解決方案。 這是如何做到的：
- 安裝 WP Dark Mode 插件——這裡不多解釋。 有關如何完成此步驟的說明，請參閱上面的部分。
- 啟用後端暗模式 - 此選項與我們之前討論的其他基本設置（常規設置）位於同一選項卡中。 您必須導航到此部分並翻轉一個名為Enable Backend Darkmode 的開關。 不要忘記向下滾動並單擊保存設置以應用更改。
- 在您的 Admin Dashboard 上切換暗模式— 您的 Admin Dashboard 現在將在頂部有一個開關，讓您打開暗模式。 這對於具有多個管理員的網站特別有用，因為每個人都可以獨立打開或關閉暗模式。
- （可選）調整您的 Admin Dashboard 配色方案- 打開深色模式後，您可能需要切換一些顏色以使所有內容看起來更漂亮。 為此，導航到用戶 > 配置文件並選擇您喜歡的調色板。 設置顏色後，單擊更新配置文件以應用新設置。
這就是它的全部。 我們希望本指南能幫助您在 WordPress 網站和管理儀表板上實施暗模式。
使用 WP 暗模式插件，此升級幾乎無法忽略，因此我們鼓勵您將這一出色功能添加到您的網站。
作者簡介： Christopher 是 Digital Strategy One 的數字營銷專家和自由博主。 他專注於新的網絡技術趨勢和跨不同渠道的數字語音分發。 在空閒時間，Christopher 會打鼓和魔術：聚會。