如何为您的 WordPress 网站添加深色模式(简单)

您想为您的 WordPress 网站添加深色模式吗?

现在许多设备都支持原生暗模式.向您的网站添加深色模式会自动使您的设计适应用户的浏览器偏好.您甚至可以为您的网站添加暗模式切换器切换.

在本文中,我们将向您展示如何轻松地将深色模式添加到您的 WordPress 网站的前端和管理区域.

Adding dark mode to your WordPress website (easily)

什么是深色模式以及为什么要将其添加到您的网站?

暗模式用于移动设备和计算机,以减少屏幕上的白光量.

有些设备带有夜间模式,实际上使用的是暖色调.暗模式通过在背景中添加深色来使用不同的方法.

如果您有 iPhone 或 Android 设备,您可以简单地使用切换开关切换到暗模式.

或者,您可以在计算机上使用夜眼等 Chrome 扩展程序在黑暗模式下查看网站.以下是使用该扩展程序的 WPBeginner 网站的外观:

The WordPress website viewed using the Chrome 'Night Eye' extension

向您的网站添加深色模式后,用户可以在查看您的网站时选择打开和关闭深色模式.它还可以让您更好地控制网站在黑暗模式下的外观.

YouTube 等热门网站也提供深色配色方案.这让用户可以在深夜观看视频,获得更舒适的观看体验.

Viewing YouTube with the dark theme option switched on

除了向您的网站前端添加暗模式外,您甚至还可以向 WordPress 管理员添加暗模式.如果您在晚上或晚上在您的网站上工作,这会很有用.

首先,我们将看看向您的 WordPress 网站添加暗模式.然后,我们将介绍向 WordPress 管理仪表板添加暗模式.

提示:您是否希望网站采用深色配色方案,即使用户的设备处于正常或白天模式?然后查看我们的 WordPress 最佳深色主题列表.

为您的 WordPress 网站添加深色模式

首先,您需要安装并激活 WP 暗模式插件.有关更多详细信息,请参阅有关如何安装 WordPress 插件的分步指南.

激活后,转到设置» WordPress 管理员中的 WP 暗模式页面,然后单击常规设置选项卡.您应该会被自动重定向到那里.

此处已为您开启了"启用操作系统感知暗模式"设置.这意味着当访问者的设备设置为深色模式时,他们会自动看到您网站的深色模式版本.

"显示浮动开关"设置也已开启.这意味着用户可以随时将他们的网站视图切换到暗模式,即使他们没有在他们的设备上启用暗模式选项.

The General Settings page for the WP Dark Mode plugin

只需访问您的网站,您就会在右下角看到开关.单击它可立即将您的网站在您的设备上切换到暗模式:

The dark mode switch is now displaying on the website for visitors

设置 » 上提供了更多自定义选项.WP 暗模式页面.但是,这些免费插件非常有限.

例如,您只需单击"显示设置"选项卡即可更改浮动开关的样式:

Choosing the type of night mode toggle button in the Display Settings

您还可以使用"样式设置"选项卡自定义暗模式颜色:

Choosing your dark mode color scheme in the Style Settings

确保在进行任何更改后单击"保存设置"按钮.

注意:使用免费版 WP 暗模式,您只能获得前 2 种浮动开关样式和前 2 种颜色预设可供选择.

专业版 WP 暗模式提供了更多设计选项,此外还可以在特定时间打开暗模式以及添加自定义 CSS 代码的选项.

为您的 WordPress 管理员添加深色模式

WordPress 带有管理配色方案,但没有任何默认配色方案会减少来自屏幕的白光.幸运的是,这个插件也解决了这个问题.

让我们来看看如何轻松地将黑暗模式添加到您的 WordPress 管理区域,以便在深夜获得更愉快的用户体验.

只需转到设置» WP 暗模式页面,然后单击常规设置选项卡.然后,将"启用后端暗模式"开关切换到打开位置.不要忘记点击页面底部的保存设置按钮:

Switch on the Enable Backend Dark Mode toggle so you can use dark mode in your WordPress admin

您现在将在管理区域的顶部栏中看到一个新开关:

The toggle switch in your WordPress admin to switch between light (normal) and dark for your admin interface

只需单击此开关即可立即将您的管理区域切换到暗模式.

提示:如果您的网站有多个 WordPress 用户,每个人都可以根据自己的喜好打开和关闭暗模式.

由于"暗模式"不是管理员配色方案,您可以轻松地将它与现有的 WordPress 管理员配色方案一起使用.要设置它,只需转到用户»配置文件,然后点击管理配色方案下的一个选项.

请注意,您需要关闭暗模式才能看到管理配色方案选项:

Selecting an admin color scheme in WordPress, on your user profile page

在 WordPress 块编辑器中撰写帖子时,您也可以打开暗模式.点击左上角的小颜色图标,然后选择您要使用的模式:

Switching dark mode on in the WordPress block editor

现在,您可以在晚上舒适地在网站上写作和工作,而不会使您的眼睛疲劳.

我们希望本文能帮助您了解如何向 WordPress 网站添加深色模式.您可能还想查看我们关于适用于所有网站的最佳 WordPress 插件的文章,以及我们对最佳管理 WordPress 托管公司的比较.

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/7062.html

3
订阅评论
提醒
0 评论
内联反馈
查看所有评论