WordPress后台黑色风格插件Dark Mode

虫子君
虫子君
虫子君
683
文章
278
评论
2019年12月5日09:50:19 评论 1,088 3052字阅读10分10秒

前几天的时候,虫子君跟小伙伴们介绍了一款可以将WordPress主题前台转换成黑色风格的插件,有朋友在后台问我,有没有一款插件,可以将WordPress的后台也变成黑色的。答案自然是有的,并且这一类的插件还是蛮多的,不过今天要介绍的这一款插件,作者还是满奇葩的,既然不是关明正大的推销自己,而是直接在自己插件的简介中,来了一句,这个插件还是测试版,你怎么用我不管。

This is a beta plugin that might one day be part of the WordPress core. Please don’t use this on production websites unless you’re happy with the stability as some things may still be experimental.

Using technology at night time can have a negative effect on your eyesight. Dark Mode will darken the colors of your admin dashboard making it easier for you to work at night.

For information on the progress of this plugin, please refer to the Trac ticket or you can get involved on the GitHub repository.

看到这里不得不说一句“你好吊哦!”

玩笑归玩笑,这个插件的功能功能单一,安装之后,直接启用插件,你的后台就会变成纯黑色的风格的了。

WordPress后台黑色风格插件Dark Mode
Dark Mode

看起来还是非常漂亮的,蓝色混搭着深灰色,配以这种灰黑色为底色,非常的耐看。Dark Mode这款插件您可以直接在WordPress的后台商店中搜索下载,不过由于现在WordPress的商店已经在天朝境地打不开了,所以这里虫子君已经下载了一份,在文章的末尾处,大家需要自行下载。

以下是作者写这个插件的文档,如果你正好在使用这一款插件的话,不妨看看,希望对你有帮助。

Dark Mode插件彻底改变了WordPress仪表板,这意味着许多插件将需要包括兼容性更改,以确保它们创建的UI与其他仪表板采用相同的样式。实现此目的的最简单方法是使用动作挂钩。动作挂钩为插件开发人员提供了一种仅需几行代码即可扩展功能的方法。

暗模式(自1.0版开始)具有doing_dark_mode可用的动作挂钩,只有在所有检查都确认当前用户应使用暗模式后,才调用该动作挂钩。通过使用此钩子,您可以确保以前的所有检查(其他插件也可以钩住)均已通过,这是一种仅在必要时提供黑暗模式体验的安全方法。

将深色模式添加到您的插件

添加您的黑暗模式样式表...

add_action( 'doing_dark_mode', 'my_plugin_dark_mode', 10, 1 );
function my_plugin_dark_mode( $user_id ) {
	wp_enqueue_style( 'my_plugin_dark_mode', 'path/to/css/dark-mode.css' );
}

请记住,doing_dark_mode自2.1版以来的挂钩已将当前用户ID作为参数包含在内。这使您可以决定特定用户是否应该看到插件暗模式变化。

为您的插件添加暗模式设置

如果您想让用户选择不在插件页面上启用暗模式,则还可以在标准暗模式设置旁边添加设置。如果您根本不想真正支持暗模式,这是理想的选择。

添加您的插件暗模式设置...

add_action( 'dark_mode_profile_settings', 'my_plugin_dark_mode_settings', 10, 1 );
function my_plugin_dark_mode_settings( $user ) {	
	?>
		<div>
			<input type="checkbox" name="my_plugin_dark_mode_setting" /> Your custom Dark Mode settings	
		</div>
	<?php
}

该dark_mode_profile_settings动作通过挂钩一个参数的$user其是WP_User当前用户的对象。该钩子旨在为您输出要在页面上显示的设置的HTML。

然后,您可以使用after_dark_mode_saved在用户更新了其“暗模式”设置首选项后立即触发的动作挂钩。然后,您可以同时保存自定义插件的暗模式设置。

add_action( 'after_dark_mode_saved', 'my_plugin_dark_mode_settings_saved', 10, 2 );
function my_plugin_dark_mode_settings_saved( $option, $user_id ) {
	update_user_meta( $user_id, 'my_plugin_dark_mode_setting', 'abc' );
}

该挂钩可让您访问当前用户的“暗模式”首选项($option)(将yes启用或no禁用)及其用户ID($user_id)的新保存选项,以便您可以更新正确的用户首选项。

结束语

在自己的插件中支持深色模式是一种继续支持WordPress和此功能插件的绝妙方法。这非常简单,只需几分钟即可准备好黑暗模式支持。以下是在暗模式下使用的十六进制颜色代码值的列表。强烈建议您尽可能地坚持使用这些颜色,以确保用户体验是无缝的。

如果您对本指南或整个文档有任何疑问,请在此存储库中打开一个新问题,以供查阅。谢谢!

深色模式颜色

Sass文件源代码中指出的以下颜色是根据WordPress设计指南上列出的颜色大致地确定的。请尝试并尽量坚持以下颜色。$base-grey用作主要内容区域的背景,并$light-grey在许多位置用作基本文字颜色。您可能需要混合并匹配这些颜色以适合您的个人需求。

颜色从3.2版开始是最新的。请注意,从3.2版开始,现在可以在dark-mode-colors.scss文件中找到用于深色模式样式的颜色。这样一来@import,您就可以在自己的SCSS文件中使用它轻松地包含核心的深色模式颜色,而无需重复下面概述的颜色列表。

$white:           #ffffff;
$black:           #000000;
$blue:            #0073aa;
$medium-blue:     #00a0d2;
$clear:           transparent;
$accent-red:      #dc3232;
$accent-orange:   #f56e28;
$accent-yellow:   #ffb900;
$accent-green:    #46b450;
$accent-blue:     $blue;
$accent-purple:   #826eb4;
$base-grey:       #23282d;
$light-grey:      #bbc8d4;
$heavy-grey:      #37444c;
$dark-grey:       #32373c;
$ultra-grey:      #191f25;
$dark-silver:     #50626f;
$base-blue:       #2e74aa;
$light-blue:      #4092d2;
$dark-blue:       #2c5f88;
$ultra-blue:      #1f3f58;
$bright-blue:     #30ceff;
$editor-lavender: #c678dd;
$editor-sunglo:   #e06c75;
$editor-olivine:  #98c379;
下载信息 插件名称:Dark Mode 应用平台:WordPress 插件版本:3.2.1 插件来源:WordPress应用商店
下载地址:登录可见
  • 欢迎来“给我投稿”网友会因为你的帮助而感激。
  • 文章链接:https://chonzi.com/8407.html
WordPress禁用评论功能插件Disable Comments 功能扩展插件

WordPress禁用评论功能插件Disable Comments

之前有很多小伙伴们在资讯我一个问题,就是如何关闭WordPress全站评论,其目的是因为现在工信部要求个人备案的网站不能够有评论功能。大部分都是主机商在通知这些个人站长,当然虫子君也是其中之一,所以知...
缓存优化插件WP Rocket V3.5.0.2 性能优化插件

缓存优化插件WP Rocket V3.5.0.2

WP Rocket 缓存插件是WordPress环境当中最出名的静态缓存插件之一,其中最重要的就是因为WP Rocket V3.5.0.2具有非常强大的静态缓存性能,从而在用户当中留下非常良好的口碑。...

您必须才能发表评论!