如何在 WordPress 中激活夜間模式

一段時間以來，操作系統和應用程序已經包含了它們的圖形界面版本，其中白色背景被黑色背景取代，以減少夜間發光，從而減少對眼睛的傷害。 這稱為夜間模式。

無論是時尚還是因為它確實有效，夜間模式越來越受歡迎。 有些人確保夜間模式對環境有益，因為黑屏比白屏消耗更少的能量。 但也有這種黑暗模式的批評者。

儘管如此，這可能是您有興趣在您的網站上擁有的功能，為此，今天我們將討論 WordPress 中的夜間模式。

默認情況下，WordPress 尚不包含夜間模式，但在 WordPress 儀表板和前端都有添加夜間模式的選項。 像往常一樣，插件是使用這種奇怪的視覺功能擴展 WordPress 的解決方案。

如何在 WordPress 儀表板上激活夜間模式

我們從 WordPress 的暗模式插件開始，它允許您在 WordPress 儀表板上激活夜間模式。 它易於使用且免費。

首先是安裝和激活插件。 我們可以直接在 WordPress 插件目錄中通過插件菜單直接在 WordPress 儀表板中找到它，如上面的屏幕截圖所示。

安裝暗模式插件後，您的 WordPress 的每個用戶都將在他們的個人資料中選擇在他們的儀表板上激活它：

這個插件的好處是每個用戶都可以選擇他們希望在暗模式或正常模式下查看 WordPress 儀表板的方式。 這樣，如果有人想像往常一樣繼續使用 WordPress Dashboard，白色背景，那麼這樣做沒有問題。

在上一個屏幕截圖中，您可以看到啟用暗模式的結果。 它看起來很棒！ 我真的很喜歡在頁面的中央部分也有黑色背景顏色的結果，而不僅僅是在側面菜單中。

不幸的是，WordPress 暗模式插件存在一個懸而未決的問題：提供與 Gutenberg 塊編輯器的兼容性。 在以下屏幕截圖中，您可以看到它還不能將深色背景應用於古騰堡：

我想如果插件足夠成功並且用戶要求它，它的開發人員最終會對其進行調整，以便塊編輯器也出現在夜間模式中。 無論如何，古騰堡瘋狂的開發速度和其風格的“頻繁”更新使得改編有些複雜。

如何為您的 WordPress 訪問者激活夜間模式

暗模式插件僅在 WordPress 儀表板上添加夜間模式。 您網站的其餘部分，即訪問者看到的前端，將繼續保持相同的外觀，而不會發生任何變化。

如果您希望訪問者可以選擇在您的網站上激活夜間模式，使用深色背景而不是淺色背景，您必須安裝 WP Night Mode 插件。

這個插件，就像黑暗模式一樣，是完全免費的，你也可以在 WordPress 插件目錄中找到它。

安裝後，您將不會在“設置”或任何其他菜單中看到任何內容。 您需要做的是轉到外觀菜單並在那裡編輯您的菜單。 在您的主菜單中，您必須添加一個沒有任何特定 URL 的自定義鏈接。 這個新的菜單項將幫助我們添加開關來激活和停用夜間模式。

在菜單管理界面本身中，您必須打開右上角的屏幕選項以激活添加 CSS 類的選項，如以下屏幕截圖所示：

完成此操作後，當您要編輯我們添加的菜單項時，您會看到一個額外的字段，您可以在其中添加 CSS 類。 在這裡，您必須包含 CSS 類wp-night-mode 。 此類是 WP Night Mode 需要識別應使用什麼項目作為夜間模式開關的類。

默認情況下，WP Night Mode 是一個不會向您的界面添加深色的插件。 您必須為背景、文本和鏈接選擇要顯示的深色。 要定義這些顏色，您必須轉到外觀菜單並打開自定義菜單。

WordPress 定制器將打開，您將在那裡找到夜間模式選項。 如果您選擇它，您將看到您可以選擇默認激活夜間模式並創建多種樣式。 在每種樣式中，您可以定義背景顏色、文本顏色和鏈接顏色。

定制器的好處是您可以看到使用所選顏色的網站外觀的真實預覽：

不幸的是，結果並不完美：某些元素仍然具有在夜間模式下看起來很奇怪的淺色背景。 但別擔心，我們可以解決這個問題。 從定制器本身，您可以添加額外的 CSS 規則來解決這些小問題。

返回定制器，您將看到Additional CSS選項。 如果您選擇它，您就可以在此處編寫 CSS 規則。 這些規則可以是以下類型：

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

請記住，該插件的真正作用是在您網站的body標籤中應用 CSS 類wp-night-mode-on 。 因此，如果您想修復 HTML 元素的背景並使其變暗，您所要做的就是找到該元素的選擇器並在body標記具有wp-night-mode-on類時應用修復。

在以下比較中，您可以看到普通模式和夜間模式與我們應用的顏色之間的基本比較：

多虧了幾個插件，為您的 WordPress 添加夜間模式非常容易。 今天我們回顧了幫助我們在 WordPress 儀表板和前端激活夜間模式的插件。

您是應用程序中夜間模式的常客嗎？ 記得在下方留言說出你的看法！

Priscilla Du Preez 在 Unsplash 上的精選圖片。