几个月前，我们开始为那些希望在自定义程序 该工具内置于WordPress核心，可与大多数现代主题挂钩。您可以使用它预览和修改站点的许多外观设置。能够处理rgba公司不透明度的颜色。
在这几个月里，我们正在研究的概念不断发展，今天我们很高兴地宣布，它终于可以用于主题了。
此控件使用反应色颜色选择器，并可以作为开发人员如何构建的示例反应 React是一个JavaScript库，它使推理、构造和维护无状态和有状态用户界面变得容易。https://reactjs.org/.-基于自定义程序的控件。
它比基于Iris的默认Customizer颜色选择器脚本更轻，并且有进一步的性能改进，即关于控件的实例化。默认情况下，在加载自定义程序时会实例化颜色选择器。然而，只有当包含该控件的节打开时，该控件才会被实例化，这大大提高了在自定义程序中使用许多颜色选择器的主题的性能。
默认情况下，该控件与任何其他控件一样工作，并使用选定的颜色保存字符串。保存值的格式取决于所选颜色的不透明度。如果颜色完全不透明，则将保存HEX值(#000000). 如果所选颜色不是完全不透明的（alpha值小于1），则该值将保存为RGBA(rgba（0,0,0.9）).
安装
您可以在中找到安装说明存储库的自述文件.
用法
这是一个包含JS模板的控件。因此，它应该在Customizer中被列入白名单。为此，我们可以使用WP_自定义管理器：：register_control_type方法：
add_action（'customize_reregister'，函数（$wp_customize）{$wp_customize->register_control_type（'\WPTRT\customize\control\ColorAlpha'）；} );
使用上述代码段注册控件后，我们可以在自定义程序中使用自定义API:
使用\WPTRT\Customize\Control\ColorAlpha；add_action（'customize_reregister'，函数（$wp_customize）{//添加设置。$wp_customize->add_setting（'your_setting_id'[“default”=>“rgba（0,0,0.0.5）”，//使用任何HEX或rgba值。“传输”=>“刷新”，“sanitize_callback”=>“my_custom_sanitization_callback'”] );//添加控件。$wp_customize->add_control（新ColorAlpha（$wp_customize，'your_setting_id'['标签'=>__（'我的颜色'，'神话'），'节'=>'我的节'，“设置”=>“your_setting_id”，] ) );} );
卫生处理
应在自定义程序中清理所有控件。自从彩色阿尔法控件可以保存十六进制或者rgba公司价值，我们构建了一个自定义清理回调你可以使用。
可用的筛选器
默认情况下，对于分别安装在wp-content/themes和wp-content/plugins中的任何插件和主题，该控件都是现成的。但是，如果控件不在wp含量文件夹，然后可以使用wptrt_color_picker_alpha_url 滤波器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们是Actions的对应物。与Actions不同，过滤器是以孤立的方式工作的，不应该有副作用，例如影响全局变量和输出。定义其统一资源定位地址 互联网上网站或网页的特定网址，例如网站的URL www.wordpress.org。您可以在中看到一个示例存储库的自述文件文件.
上面描述的所有内容都是控件的默认行为。然而，如果开发人员愿意，这个控件可以处理更多的内容。我们添加了将值保存为数组的选项，并公开了更多可以使用的工具。
如果你想实现自动化并进行更高级的颜色计算，请继续阅读下面的部分。
将值保存为数组
虽然控件的默认行为是保存简单字符串，但开发人员可以选择将值保存为数组。保存的数组包含颜色属性以及一些可用于增强主题（或插件 插件是一个包含一组功能的软件，可以添加到WordPress网站。他们可以为你的WordPress网站扩展功能或添加新功能。WordPress插件是用PHP编程语言编写的，并与WordPres无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件的）可达性 无障碍性（通常简称为a11y）是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”（即无人协助）和“间接访问”，即与个人的辅助技术（例如计算机屏幕阅读器）兼容。(https://en.wikipedia.org/wiki/Accessibility网站).
若要更改控件的行为并使其保存阵列而不是一串，用户可以添加“save_as”=>“数组”在控制之下选择:
$wp_customize->add_control（新ColorAlpha（$wp_customize，'your_setting_id'['标签'=>__（'我的颜色'，'神话'），'节'=>'我的节'，“设置”=>“your_setting_id”，“选项”=>[“save_as”=>“数组”，]] ) );
保存的值将采用以下格式：
[‘r’=>107，//红色。‘g’=>55，//绿色。“b”=>119，//蓝色。‘h’=>289，//色调。's'=>37，//饱和度。'l'=>34，//轻盈。“a”=>0.82，//阿尔法“十六进制”=>“#6b3777”，//颜色的十六进制代码（alpha=1）“css”=>“rgba（107,55119,0.82）”，//所选颜色的css值。'a11y'=>[//与可访问性相关的属性的数组。“亮度”=>0.0719，//与白色对比（值0-21）。“distanceFromWhite”=>8.613，//与黑色对比（值0-21）。“distanceFromBlack”=>2.438，//最大对比色。使用此选项获取文本颜色//如果颜色选择器用于选择背景色。“maxContrastColor”=>“#ffffff”，//白色背景上的可读文本颜色保持色调。//第一个值与白色的最小对比度为7:1。//第二个值与白色的最小对比度为4.5:1。“readableContrastingColorFromWhite”=>[“#6b3777”，“#6b 3777”]，//黑色背景上的可读文本颜色保持色调。//第一个值与黑色的最小对比度为7:1。//第二个值与黑色的最小对比度为4.5:1。“readableContrastingColorFromBlack”=>[“#bc83c7”，“#a458b5”]，//如果颜色较深，则为True。“isDark”=>真],]
保存的值包含自动化许多过程所需的所有属性，我们希望它将鼓励开发人员在不需要提供多个控件的情况下做更多的事情。
保存数组时对控件进行消毒
如果您选择将值保存为数组，我们有一个示例清理回调，您可以在储存库.
使用数组值
您可以随意使用这些属性。以下是一些简单的示例：
获取css公司价值
这将获得控件在不保存为数组时通常保存的值：
从背景色中获取文本颜色
使用下面的代码，当我们选择的颜色用作背景时，我们可以获得最佳的文本颜色。在这种情况下，文本颜色为#000000或#ffffff公司:
$text_color=$value['a11y']['maxContrastColor']；
从背景色获取可读颜色：
$color=$value['a11y']['readableContrastingColorFromWhite'][0]；if（$value['isDark']）{$color=$value['a11y']['readableContrastingColorFromBlack'][0]；}
获得互补色
这里我们使用的是保存的颜色属性。我们将旋转色调180度，并构建一个hsla公司然后可以在我们的CSS公司 CSS是级联样式表的缩写。这是控制网站设计或外观的因素。:
$h=（$value['h']>180）$值['h']-180:$value['h']+180；$s=$value[s']；$l=$value['l']；$a=$value['a']；$color='hsla（'.$h.'，'.$s.'%，'.$1.'%，'.$a.'）'；
您可以使用相同的逻辑通过旋转色调（通常为30度、45度、60度、90度、120度或180度）从单个控件构建颜色三元组或自定义调色板
贡献
此控件是自行开发的GitHub存储库。欢迎所有捐款。
#彩色阿尔法包装,#自定义-api,#开放源代码
