最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress网站添加暗黑模式图文教程 现在越来越多的网站都开始跟随Android和iOS的潮流,为访客提供暗黑模式。一些新的WordPress主题会直接附带暗黑模式(又称夜间模式,以下一律称为暗黑模式)切换功能,比如eyes主题,当然也有很多WordPress并没有附带这样的功能。 10月 07, 2020 598 0

    现在越来越多的网站都开始跟随Android和iOS的潮流,为访客提供暗黑模式。一些新的WordPress主题会直接附带暗黑模式(又称夜间模式,以下一律称为暗黑模式)切换功能,比如eyes主题,当然也有很多WordPress并没有附带这样的功能。

    本文将会详细介绍暗黑模式及其作用,如何使用插件添加网站暗黑模式及WordPress仪表盘暗黑模式:

    WordPress暗黑模式教程

    什么是暗模式及其作用

    在移动设备和计算机上使用暗黑模式可减少屏幕上的白光。

    某些设备带有夜间模式,实际上使用了较暖的色调。暗黑模式则是使用其他方法-通过在背景中添加深色来实现。

    如果您使用的是iPhone或Android设备,则只需使用切换开关就可以切换到暗黑模式。

    或者,在计算机上使用Chrome扩展程序(例如Night Eye)以暗黑模式查看网站。使用该扩展实现的闪电博官网暗黑模式外观如下:

    闪电博官网暗黑模式

    闪电博官网暗黑模式

    将暗黑模式添加到站点以供用户可选择在查看站点时打开和关闭暗黑模式。该扩展还支持用户通过设置更好地控制网站在暗黑模式下的外观。

    一些热门视频网站也提供暗黑模式,方便用户可以在深夜观看视频,获得更舒适的观看体验。

    YouTube暗黑模式

    YouTube暗黑模式

    除了为网站前端页面添加暗黑模式之外,甚至还可以在WordPress后台也添加暗黑模式。如果您经常在晚上编辑文章,这就非常实用了。

    下面,我们将分别介绍如何为WordPress网站及WordPress仪表盘添加暗黑模式。

    WordPress网站添加暗黑模式教程

    首先,需要安装并启用WP Dark Mode插件。

    启用后,在WordPress后台进入“设置»WP Dark Mode”页面,然后单击“General Settings”选项卡。

    你可以看到默认已经启用“Enable OS aware Dark Mode”,就是说,当访客的设备设置为暗黑模式时,访问者会直接看到您网站的暗黑模式版本。

    “Show Floating Switch”设置也默认启用的。即使用户未在设备上启用暗黑模式选项,他们也可以随时通过插件提供的暗黑模式切换按钮将其站点视图切换为暗黑模式。

    WP Dark Mode插件设置

    WP Dark Mode插件设置

    启用插件后访问您的网站,会在右下角看到该开关。点击它即可将网站切换为暗黑模式:

    暗黑模式按钮

    暗黑模式按钮

    “设置»WP Dark Mode”插件设置页面上还有更多自定义选项。但是,该插件的免费版本会有诸多限制。

    例如,您只需要单击“Display Settings”选项卡即可更改浮动开关的样式:

    WP Dark Mode插件显示设置

    WP Dark Mode插件显示设置

    您还可以使用“Style Settings”选项卡自定义深色模式的颜色:

    WP Dark Mode插件样式设置

    WP Dark Mode插件样式设置

    进行任何更改后,请确保单击“保存设置”按钮。

    注意:使用WP Dark Mode的免费版本,只有前2种浮动开关样式和前2种颜色预设可选。WP Dark Mode的专业版提供了更多的选项,以及在特定时间打开Dark Mode的功能以及添加自定义CSS代码的选项。

    WordPress管理后台添加暗黑模式教程

    WordPress附带了管理后台配色方案,但是没有一种默认配色方案可以减少来自屏幕的白光。对此,我们还是借用插件解决该问题。

    让我们看一下如何将暗黑模式添加到WordPress仪表盘中,以在晚间编辑文章时保护眼睛。

    只需转到设置»WP Dark Mode页面,然后单击常规设置选项卡。然后,将“Enable Backend Darkmode”开关切换到打开位置。

    WP Dark Mode插件后台夜间模式设置

    WP Dark Mode插件后台夜间模式设置

    您将在WordPress管理后台的顶部栏中看到一个新的开关:

    暗黑模式的WordPress后台

    暗黑模式的WordPress后台

    只需单击此开关即可立即将您的WordPress管理后台切换为暗黑模式。

    Tip:如果站点有多个WordPress用户,则每个人都可以根据自己的喜好打开和关闭暗模式。

    由于“Dark Mode”不是管理界面配色方案,也就是可以将其与现有的WordPress管理界面配色方案一起使用。只需转到“用户»Profile”,然后单击“管理界面配色方案”下的一个选项。

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

    管理界面配色方案设置

    管理界面配色方案设置

    在WordPress古腾堡编辑器中撰写文章时,也可以开启暗黑模式。单击左上角的小颜色图标,然后选择要使用的模式:

    古腾堡编辑器暗黑模式

    古腾堡编辑器暗黑模式

    现在,您可以在晚上舒适地在网站上进行文章编辑工作了。

    关于本教程,到此完毕!无论您是希望在网站前端实现暗黑模式,还是后台需要,均可以通过插件实现!

    不过,小编认为所谓“暗黑模式或者夜间模式”,更适合移动端,而不是PC端!

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » WordPress网站添加暗黑模式图文教程 现在越来越多的网站都开始跟随Android和iOS的潮流,为访客提供暗黑模式。一些新的WordPress主题会直接附带暗黑模式(又称夜间模式,以下一律称为暗黑模式)切换功能,比如eyes主题,当然也有很多WordPress并没有附带这样的功能。 10月 07, 2020 598 0

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 89会员总数(位)
    • 10642资源总数(个)
    • 76本周发布(个)
    • 6 今日发布(个)
    • 410稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情