WordPress深色模式:如何启用(前端和后端)

启用WordPress深色模式切换功能后,用户体验和网站管理会变得更加顺畅。

以OLED和AMOLED屏幕为例,它们通过点亮单个像素来工作。在深色模式下,像素基本上处于关闭状态,从而节省电量并延长电池寿命。🔋

即使你的屏幕不那么先进,启用WordPress深色模式后,你仍然会享受到更好的对比度。在低光环境下,文本会更加清晰,从而减少眼睛疲劳并提高可读性。

WordPress dark mode 1

然而,不幸的是,深色模式并不是WordPress的默认功能。你只能通过调整平台的视觉配置来启用它,这一过程对于非开发人员来说可能看起来很吓人。

不过,本指南简化了这一切。我们将告诉你如何轻松地在网站的前端和后端启用WordPress深色模式切换,而无需编写任何代码。

如何在网站前端启用WordPress深色模式切换

网站的视觉效果在很大程度上取决于其CSS(层叠样式表)。虽然WordPress主题带有默认样式,但插件能够在不更改核心代码的情况下补充或覆盖它们。

例如,要启用WordPress深色模式,它们会根据用户偏好或系统设置动态调整背景和文本颜色等属性,以在浅色和深色主题之间切换。

在可用的插件中,WP Dark Mode因其用户友好性、多功能性和独特功能而特别突出。

该插件超越了基本的WordPress深色模式切换,提供额外的增强功能来优化用户体验和网站外观。

例如,使用免费版的WP Dark Mode,你可以获得基于操作系统的颜色模式、浮动切换选项和多种深色模式颜色预设。这些功能共同使按钮、链接和文本等元素能够动态调整颜色,以获得最佳对比度和可读性。

对于寻求更高级功能的用户,WP Dark Mode的高级版更上一层楼。它结合使用CSS变量和JavaScript提供可自定义切换样式和基于时间的主题切换等功能。

同时,其WooCommerce集成会调整产品列表、购物车页面和结账表单中的CSS,以在浅色和深色WordPress模式之间提供无缝的购物体验。

步骤1:搜索并安装WP Dark Mode插件

访问插件库

  • 首先登录你的WordPress仪表板。
  • 将鼠标悬停在左侧边栏的“插件”选项上。当子菜单出现时,选择“添加新”以访问WordPress插件库。

搜索WP Dark Mode

  • 在页面右上角,你会找到一个搜索栏。输入“WP Dark Mode”并按回车键。搜索将返回插件列表,你应该选择“WP Dark Mode”。

安装

  • 点击“立即安装”按钮,然后点击“激活”。

在仪表板上找到WP Dark Mode

  • 成功激活后,仪表盘上会出现一个名为“WP Dark Mode”的新菜单项。您可以在此处管理WordPress深色模式设置。

第2步:启用默认深色模式

启动设置

  • 在WordPress仪表盘中,点击我们在上一步中找到的“WP Dark Mode”菜单项。这将打开插件的设置页面。
  • 在常规设置中,您会看到一个名为“启用前端深色模式”的选项。
L38sCG1kMl wnuvpzNzjSA3AZQJI33gsFHdDo98IS AZHvc0XLdAeqeeyQS7WFGf4vWZCG8KtOW7ihWROVev0ne4jTYYB ZalhPOZWg4 bKI6IJ3L 81NFMEAJeJja3IcBxc0gXCpYVhSSxHnRhWZ Q

激活默认深色模式

  • 要激活此功能,只需切换“启用前端深色模式”旁边的开关。确保它设置为“开”。

通过启用此功能,您将WordPress深色模式设置为网站的默认视觉主题。这意味着每位访问者,无论其设备的主题设置如何,都将看到您网站的深色版本。

第3步:在前端添加WordPress深色模式切换按钮

同一插件还提供深色模式切换按钮选项,允许您的网站访问者通过无缝切换浅色和深色模式来自定义他们的浏览体验。

以下是集成方法:

设置切换按钮

  • 在WordPress仪表盘中,点击“WP Dark Mode”,然后点击“设置”。
  • 进入“切换设置”选项卡,找到“浮动开关”选项并启用它。这会使切换按钮浮动在您的网站上,方便访问。
1D5DizAIIOjTcxPpbvNpIJOFjSWeCmHJSKhUGoVzv49spJpSuJMfL67fW9ZFTckeV6CfObUVrRV53opKSd4gOEuVt1HhINJp56DnFk2SLEXjNOu4mXc5OsD paPp0WT8zN2 QmT66plrhDX0kDlmg9w

切换设置”菜单还具有浮动开关的自定义选项。

您可以根据网站的美学风格修改其设计、大小和动画效果。

设置样式

  • 要配置其外观,例如滚动到顶部找到“开关样式”部分。
  • 然后您可以选择与网站外观相符的开关设计——从基础到圆角和下拉图标。

WordPress深色模式切换按钮定位

  • 当需要调整切换按钮在页面上的位置时,只需进入样式部分下方的“浮动开关位置”。
  • 然后您可以选择位置,如左或右、上或下等。将其保持在用户可见的位置,并与您的网站设计融合。

第4步:定义WordPress深色模式配色方案

除此之外,您还可以为WordPress深色模式定义配色方案。

配置位于“颜色设置”菜单中,您应该可以从WP Dark Mode的“设置”页面访问它。

JVY6d8uXk5izga3Au8 0k59FapvClv1MFXPrYARs mgzYeSiT3vcfk2fdiUJbqFTrRDvB gWySNNAZVgqLaA6gO H6NtBKrbneFbP2pmIs0w0fCZmDZkCHrdnuFPGTTsfaeiWIhnoslRBB2jIQ1bGlg

第5步:测试您的WordPress深色模式

一旦深色模式切换按钮激活并根据您的喜好自定义后,您可能需要测试其功能。这应该可以确认系统可以在浅色和深色模式之间平滑切换,而不会出现任何问题。

您可以首先在各种设备上加载网站的深色模式版本——例如桌面、平板电脑和智能手机。其渲染效果应该在所有这些屏幕上保持一致。

接下来,在不同的浏览器上进行测试——尤其是 Chrome、Firefox、Safari 和 Edge。每种浏览器都有自己的 CSS 渲染方式,这可能会影响你的 WordPress 深色模式的外观。

在此过程中,我们特别建议你检查文本、图片和按钮、链接等页面元素的清晰度。注意那些可能无响应或与背景融合的元素。

切换按钮本身也应该策略性地放置,并进行定制,使其与你的网站设计无缝融合。

如何在 WordPress 管理面板上启用深色模式

WordPress 管理面板是你的工作空间,用于创建内容、管理插件和调整设置。由于你在这里花费了大量时间,你可能需要将默认界面调暗,以使其更加视觉舒适。

有多个插件可以为 WordPress 后端引入深色模式。但我们仍然坚持选择 WP Dark Mode,因为它简单直接,不会干扰其他插件或 WordPress 核心功能。

WP Dark Mode 还为你省去了为前端和管理面板使用不同插件的麻烦。它以一站式解决方案的形式提供统一的 WordPress 深色模式体验,从而最大限度地减少插件冲突的风险。

以下是整个步骤:

步骤 1:访问 WP Dark Mode 设置

  • 在 WordPress 仪表板上,点击“WP Dark Mode”菜单项。
  • 这将打开插件的设置页面。在这里,你可以找到“常规设置”、“开关设置”、“颜色设置”等多个选项卡。选择第一个。

步骤 2:启用管理后台深色模式

  • 在常规设置页面上,在对应的前端选项下方找到“启用后台深色模式”。
  • 打开它以在管理面板上启用 WordPress 深色模式。

激活后,你的管理仪表板上会出现一个浮动开关,通常在顶部栏上。这个开关可以让你方便地在浅色和深色后端模式之间切换。

Wu0CiBlYgfX78V zXJehGcprTmCjxBwouC11gUvcEC9MFBYhr6cmfCdveR65UjxlLBPVt55j1yVfZxcS3BXEXIxk fYx6JM7tMn SHGQ XUZCY JiZWgUe7tpgNv0tL1hOodKtvmjwT4VFc 3iOhVLQ

步骤 3:自定义深色模式颜色(可选)

虽然 WP Dark Mode 插件的默认配色方案针对可读性和舒适性进行了优化,但有时你可能需要调整它以更好地满足你的需求。对于多作者网站来说尤其如此,管理员可能有不同的视觉偏好。

事实上,你不需要任何插件来进行调整。本地 WordPress 工具完全可以做到这一点。

简单地:

  • 在 WordPress 仪表板上进入“用户”菜单选项。
  • 进入“个人资料”。
  • 在接下来的页面上,向下滚动到“管理后台配色方案”部分。在这里,你可以选择与你的 WordPress 深色模式后端相匹配的颜色方案。
8CWNRyYXaT5LZHUQdnL5Qf847kBZrK8SXF67hJLwIABfXusDoBRDJyv9TQULdkWO2NrFHjzkNqe8IGJfFZeAHof4n0oCl7PPaQJADPCuYDpO0 yVxxHiU
  • 选择一种对眼睛友好且与背景形成良好对比的配色方案,以提高可读性。
  • 一旦您对选择满意,点击页面底部的"更新个人资料",将配色方案应用到WordPress深色模式仪表板。

返回顶部

但是,请记住… 💡

WordPress深色模式的主要目的是优化可读性。但如果没有正确实现,效果可能适得其反。文本可能会与背景融为一体,或者对比度过强而导致眼睛疲劳。

我们希望本指南能帮助您在网站上获得恰到好处的深色模式,并为读者带来更好的用户体验!

如果您对WordPress中的深色模式如何工作或如何最佳启用有任何疑问,请告诉我们。

别忘了参加我们的WordPress网站加速速成课程。在下方了解更多:

如何加速您的WordPress网站

通过一些简单的修复,您可以减少50-80%的加载时间 🚀

通讯表单 – 侧边栏

名字 *

您的邮箱 *

立即订阅!

如果是人类,请留空。

Δ

通过在上面输入您的电子邮件,即表示您订阅了我们的每周通讯。您可以随时更改主意。我们尊重您的收件箱和隐私。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注