如何為您的 WordPress 網站添加暗模式(簡單)

12/07/2022

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

許多移動設備和電腦使用暗模式來減少來自屏幕的白光,這可以減少眼睛疲勞,特別是在低光條件下。有些人甚至認為這允許您在夜間長時間使用電腦和移動設備而不會破壞睡眠。

一些設備內建了夜間模式,只是使用更暖的色調。然而,暗模式實際上為設備的背景添加了深色。一些熱門網站如 YouTube 提供內建的深色配色。

在桌面電腦上,您可以通過使用如 Night Eye 之類的 Chrome 擴展程序在暗模式下訪問網站。以下是使用該擴展程序訪問 WPressize Me 網站的樣子:

通過在您的網站上添加暗模式切換開關,用戶無需安裝特殊的瀏覽器擴展程序即可選擇他們喜歡的模式。您甚至可以將暗模式添加到您的 WordPress 管理區域中。如果您在夜間工作或眼睛感到疲勞,這將非常有用。

考慮到這一點,讓我們看看如何將暗模式添加到您的網站的公眾端和 WordPress 網站的管理區域。

提示:想使用深色配色,即使訪客的設備處於正常或白天模式?請查看我們推薦的最佳 WordPress 暗色主題列表。

如何為您的 WordPress 網站添加暗模式

創建網站暗模式的最簡單方法是使用 WP Dark Mode 插件。該插件添加了一個切換開關,以便訪客可以在您的網站上啟用暗模式。它甚至可以在管理區域中添加一個切換開關,這樣您可以為 WordPress 儀表板啟用暗模式。

首先,您需要安裝和啟用 WP Dark Mode 插件。有關更多詳細信息,請參閱我們的 WordPress 插件安裝指南。激活後,從 WordPress 儀表板中瀏覽到 WP Dark Mode » 設定 頁面,並將“啟用前端暗模式”開關切換到“開”。

完成後,您還可以為網站前端選擇默認模式。然後,點擊“保存更改”按鈕以存儲您的設置。

接下來,切換到“自定義”選項卡,根據您的喜好選擇開關佈局、大小和位置。您還可以更改暗模式開關的顏色,但您需要插件的專業版才能實現這一點。

完成後,只需點擊“保存更改”按鈕來存儲您的設置。現在訪問您的 WordPress 網站以查看暗模式切換進行的效果。

如果您查看網站的移動版本,您將看到暗模式也在智能手機和平板電腦上運作。

將暗模式添加到您的 WordPress 管理區域

您可以使用內建設置更改 WordPress 管理區域的配色方案,但是,默認配色方案中的白光並未減少。如果您在晚上工作或感到眼睛疲勞,可以向 WordPress 管理區域和區塊編輯器添加暗模式。

為此,瀏覽到 WP Dark Mode » 設定 頁面,並從左側欄切換到“管理面板暗模式”選項卡。這裡,將“啟用管理儀表板暗模式”的開關切換到“開”,然後點擊“保存更改”按鈕。

完成後,您會注意到暗模式開關已位於您的 WordPress 儀表板頂部。從這裡,您可以隨時切換開關來啟用此模式。

如果您還想為區塊編輯器添加暗模式,則必須將“區塊編輯器暗模式”開關切換到“開”。然後,點擊“保存更改”按鈕。

現在打開內容編輯器中的某個頁面或文章,您將注意到頂部有一個暗模式圖標。點擊它以展開選項卡並選擇“暗模式”。這就是您的區塊編輯器在暗模式下的樣子。

我們希望這篇文章能幫助您了解如何為您的 WordPress 網站添加暗模式。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>