如何通过这 4 个简单步骤将暗模式添加到您的 WordPress 网站

已发表: 2022-06-16

当 Instagram 和其他几个主要网站和应用程序在 2019 年 10 月添加暗模式时,我们目睹了人们对该功能的兴趣大幅飙升。

How to Add Dark Mode to Your WordPress Website with These 4 Simple Steps

然而,即使我们排除了 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 ModeEnable OS Aware Dark Mode

前者在您的网站上启用暗模式,而后者意味着如果用户的操作系统或浏览器设置为暗模式,该功能将自动激活。

另一种选择是Make Dark Mode Default 。 这是不言自明的——如果你打开它,所有用户都会看到你网站的黑暗版本,不管他们的偏好如何。

3.打开和自定义浮动开关

如果您想让用户可以随时在暗模式和亮模式之间切换,您也可以启用“显示浮动开关选项”。

这个选项将完全按照它在锡上所说的那样做——在您的网站前端放置一个切换开关,允许用户随意打开或关闭暗模式。

您可以在“显示设置”部分中弄乱图标的位置和样式。 在插件的免费版本中,您在样式方面的选择有些有限,但关键功能(打开或关闭暗模式)就在那里。

4. 尝试不同的暗模式配色方案

此时,您的 WordPress 网站有一个功能齐全的暗模式,如果这就是您要寻找的全部,您可以跳过此步骤。

但是,如果您不希望您的网站看起来一般,我们强烈建议您自定义暗模式颜色。 您将在样式设置部分找到所需的所有选项。

此屏幕提供可与您网站的视觉标识配合使用的调色板。

正如您可能想象的那样,WP Dark Mode 插件的免费版本在这里提供了一些有限的选项,但您应该能够找到合适的解决方案。

如果您想进一步自定义颜色,高级版提供更广泛的预设调色板,并允许您创建自己的方案。

奖励——在 WordPress 管理仪表板上启用暗模式

如果您要为您的客户和潜在客户提供 WordPress 网站前端暗模式的所有好处,为什么不向您自己提供同样的礼貌并将该模式​​也添加到您的管理仪表板中呢?

如果默认的 WordPress 配色方案对您的口味来说太亮了,WP Dark Mode 插件有解决方案。 这是如何做到的:

  1. 安装 WP Dark Mode 插件——这里不多解释。 有关如何完成此步骤的说明,请参阅上面的部分。
  2. 启用后端暗模式 - 此选项与我们之前讨论的其他基本设置(常规设置)位于同一选项卡中。 您必须导航到此部分并翻转一个名为Enable Backend Darkmode 的开关。 不要忘记向下滚动并单击保存设置以应用更改。
  3. 在您的 Admin Dashboard 上切换暗模式— 您的 Admin Dashboard 现在将在顶部有一个开关,让您打开暗模式。 这对于具有多个管理员的网站特别有用,因为每个人都可以独立打开或关闭暗模式。
  4. (可选)调整您的 Admin Dashboard 配色方案- 打开深色模式后,您可能需要切换一些颜色以使所有内容看起来更漂亮。 为此,导航到用户 > 配置文件并选择您喜欢的调色板。 设置颜色后,单击更新配置文件以应用新设置。

这就是它的全部。 我们希望本指南能帮助您在 WordPress 网站和管理仪表板上实施暗模式。

使用 WP 暗模式插件,此升级几乎无法忽略,因此我们鼓励您将这一出色功能添加到您的网站。

作者简介: Christopher 是 Digital Strategy One 的数字营销专家和自由博主。 他专注于新的网络技术趋势和跨不同渠道的数字语音分发。 在空闲时间,Christopher 会打鼓和魔术:聚会。