如何輕鬆地將暗模式添加到您的WordPress網站


是否要向您的WordPress網站添加暗模式?

現在,許多設備都具有本機暗模式支持。 在網站上添加暗模式會自動使您的設計適應用戶的瀏覽器偏好。 您甚至還可以在網站上添加深色模式切換器切換開關。

在本文中,我們將向您展示如何輕鬆地在前端和管理區域的WordPress網站中添加暗模式。

將深色模式添加到您的WordPress網站(輕鬆)

什麼是暗模式?為什麼要將其添加到您的網站?

在移動設備和計算機上使用暗模式可以減少屏幕上的白光。

某些設備帶有夜間模式,該模式實際上使用較暖的色調。 深色模式通過在背景中添加深色來使用其他方法。

如果您使用的是iPhone或Android設備,則只需使用切換開關就可以切換到黑暗模式。

或者,您可以在計算機上使用Chrome擴展程序(例如Night Eye)以暗模式查看網站。 使用該擴展名的WPBeginner網站的外觀如下:

使用Chrome瀏覽器“ Night Eye”擴展程序查看的WordPress網站

向您的站點添加暗模式使用戶可以選擇在查看您的站點時打開和關閉暗模式。 它還使您可以更好地控製網站在暗模式下的外觀。

YouTube等熱門網站也提供深色方案。 這使用戶可以在深夜觀看視頻,從而獲得更舒適的觀看體驗。

在打開深色主題選項的情況下查看YouTube

除了向您的網站前端添加暗模式之外,您甚至還可以向您的WordPress管理員添加暗模式。 如果您在晚上或晚上在站點上工作,這將很有用。

首先,我們將看看向您的WordPress網站添加暗模式。 然後,我們將介紹為您的WordPress管理儀表板添加暗模式。

小費: 您是否要使用深色方案的網站,即使用戶的設備處於正常或白天模式也是如此? 然後查看我們的WordPress最佳深色主題列表。

向您的WordPress網站添加暗模式

首先,您需要安裝並激活WP Dark Mode插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,轉到 設置»WP暗模式 WordPress管理員中的頁面,然後點擊常規設置標籤。 您應該被自動重定向到那裡。

在這裡,已為您啟用了“啟用操作系統感知的黑暗模式”設置。 這意味著,當訪問者的設備設置為暗模式時,他們將自動看到您網站的暗模式版本。

設置“顯示浮動開關”也已打開。 這意味著即使用戶未在設備上啟用暗模式選項,他們也可以隨時將其站點視圖切換為暗模式。

WP Dark Mode插件的“常規設置”頁面

只需訪問您的網站,您就會在右下角看到該開關。 單擊它可立即將您的網站切換到設備上的暗模式:

黑暗模式開關現在在網站上顯示給訪問者

網站上提供了更多自定義選項 設置»WP暗模式 頁。 但是,這些免費插件非常有限。

例如,您只需要單擊顯示設置選項卡即可更改浮動開關的樣式:

在顯示設置中選擇夜間模式切換按鈕的類型

您還可以使用“樣式設置”選項卡自定義深色模式的顏色:

在樣式設置中選擇深色模式配色方案

進行任何更改後,請確保單擊“保存設置”按鈕。

注意: 使用WP Dark Mode的免費版本,您只能獲得前2種浮動開關樣式和前2種顏色預設。

WP Dark Mode的專業版提供了更多的設計選項,以及在特定時間打開Dark Mode的功能以及添加自定義CSS代碼的選項。

為您的WordPress管理員添加暗模式

WordPress附帶了管理員配色方案,但是沒有一種默認配色方案可以減少來自屏幕的白光。 幸運的是,這個插件也解決了這個問題。

讓我們看一下如何輕鬆地將暗模式添加到WordPress管理區域中,以在晚間獲得更愉快的用戶體驗。

只需轉到 設置»WP暗模式 頁,然後單擊常規設置標籤。 然後,將“啟用後端暗模式”開關切換到打開位置。 不要忘記單擊頁面底部的“保存設置”按鈕:

啟用啟用後端暗模式切換,以便您可以在WordPress管理員中使用暗模式

現在,您將在管理區域的頂部欄中看到一個新的開關:

WordPress管理員中的切換開關可在管理界面的亮(正常)和暗(黑暗)之間切換

只需單擊此開關即可立即將您的管理區域切換為暗模式。

小費: 如果您的站點有多個WordPress用戶,則每個人都可以根據自己的喜好切換暗模式。

由於“暗模式”不是管理員配色方案,因此您可以輕鬆地將其與現有的WordPress管理員配色方案一起使用。 要設置此設置,只需轉到 用戶»個人資料 並在“管理員配色方案”下單擊一個選項。

請注意,您需要關閉暗模式才能查看管理配色方案選項:

在用戶個人資料頁面上的WordPress中選擇管理員配色方案

在WordPress區塊編輯器中撰寫帖子時,您也可以啟用暗模式。 單擊左上角的小顏色圖標,然後選擇要使用的模式:

在WordPress區塊編輯器中開啟暗模式

現在,您可以在晚上舒適地在網站上進行寫作和工作,而不會睜大眼睛。

我們希望本文能幫助您學習如何將暗模式添加到WordPress網站。 您可能還希望查看有關所有網站的最佳WordPress插件的文章,以及最佳託管WordPress託管公司的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。