如何通過2個簡單步驟將黑暗模式添加到WordPress網站

如果我為計算機選擇一個深色主題,我將看到Twitter如何變黑,這給我留下了深刻的印象。我希望我訪問的所有網站都一樣。是的,您的許多網站訪問者可能更喜歡在暗模式下瀏覽您的內容。如果您的網站變暗,符合訪問者計算機的主題,該怎麼辦?為此,您必須向WordPress網站添加暗模式。我們將通過一些簡單的步驟來演示該方法。

讓您的網站建立在WordPress上是一件幸事。因為總有一個WordPress插件可以為您的網站添加任何內容。對於本教程,我們很幸運擁有WP暗模式,它將在無需進行任何複雜設置的情況下將暗模式添加到WordPress網站。

WordPress網站中的WP黑暗模式如何工作

暗模式通常會減少用戶計算機瀏覽器發出的白光,從而使他們的眼睛更輕鬆。WP暗模式WordPress插件可以智能地檢測主題(暗或亮)的設備偏好設置,並為讀者動態提供精心設計的暗模式體驗。這意味著,如果您的讀者的設備使用深色主題,則無需手動執行任何操作即可在您的網站上啟用深色模式。

有關如何向WordPress網站添加暗模式的視頻教程

該過程是自動的。它可在所有操作系統(包括Android,iOS,macOS)上運行。但是,儘管讀者設備的主題很暗,但只要單擊您網站上的浮動開關按鈕,他們就可以切換到常規燈光模式。

如何將暗模式添加到WordPress網站

如前所述,我們將使用插件向WordPress網站添加暗模式,因此我們的過程涉及安裝插件並進行設置。讓我們開始吧。

第1步:安裝並激活WP暗模式WordPress插件

安裝WP暗模式就像安裝其他任何WordPress插件一樣。只需登錄到您的WordPress網站。轉到信息中心>插件>添加新內容。搜索WP暗模式,然後單擊「安裝並隨後激活」

安裝WP Dark Mode WordPress插件

第2步:在設置中將暗模式添加到WordPress網站

通過安裝和激活WP暗模式,您已經在網站前端上設置了暗模式。轉到設置WP暗模式。在「常規 設置」下,您可以啟用/禁用前端暗模式,決定具有暗模式切換器按鈕以及啟用和禁用操作系統感知的暗模式。

向WordPress添加暗模式

通過設置中的這種調整,您可以在WordPress網站中添加暗模式來完全完成操作。看看下面的GIF。

向WordPress添加暗模式

另外,您可以完全控制網站的暗模式設計。選擇一種自定義顏色或從預設顏色中進行選擇,根據讀者所在的時區設置暗模式,然後執行更多操作。但是為此,您必須切換到WP Dark Mode Pro版本。

將顯示設置為暗模式

選擇前端的網站浮動開關按鈕的設計。有多種設計選項可供選擇。您可以更改按鈕文本,並在此處執行更多操作。

設置暗模式切換器按鈕

您還可以選擇前端的浮動暗模式切換器按鈕的位置。您可以決定將其放置在網站的左下角和右下角。

為黑暗模式設置網站樣式

您可以為網站的暗模式選擇樣式。使用免費版本,您可以從可用的2個預設中進行選擇。使用WP Dark Mode pro,您可以從另外9種預設樣式中進行選擇。

向WordPress添加深色模式並選擇樣式

另外,如果您具有Pro版本,則可以自定義顯示顏色。使用高級選項設置黑暗模式,並使用WP Dark Mode Pro進行更多操作。但是對於基本的黑暗模式,免費版本可以正常工作。

如何將暗模式添加到WordPress管理儀錶盤

您還可以將暗模式添加到WordPress管理儀錶板。幸運的是,您也可以使用WP Dark Mode WordPress插件執行此操作。而且更容易。

將深色模式添加到WordPress管理儀錶板

在網站上安裝並激活WP Dark Mode插件後,進入設置WP Dark Mode。在常規 設置下,您可以看到啟用後端暗模式切換。如果在後端啟用了暗模式,您將在後端管理欄中看到暗模式切換按鈕。

將深色模式添加到WordPress管理儀錶板

現在,您只需單擊一下,即可在管理儀錶板上切換到明暗模式。

除此之外,您還可以選擇暗模式圖像,設置暗模式樣式,在暗模式下應用自定義CSS,選擇暗模式切換器按鈕以及使用WP暗模式WordPress插件執行更多操作。

WP Dark Mode WordPress插件可在Gutenberg編輯器和Elementor頁面構建器上使用。此外,它還為Elementor提供了一個小部件,並為Gutenberg編輯器提供了一個專用塊。您可以在任何頁面上放置暗模式切換器按鈕,或在其上發布。

因此,如果您認真遵循我們的說明,則將在站點上為前端和後端啟用暗模式。希望本教程對您有所幫助。請定期訪問Virfice,以獲取更多此類信息。祝好運。

相關文章