README

这是一个简单的 WordPress 自定义设置控制，使用 react-colorful。受 Gutenberg 变更的启发，我们决定在 Kirki 4 中使用 react-colorful 而不是 react-color。它具有更简单的界面和更小的包大小。

安装

使用 composer 安装此软件包

composer require kirki-framework/control-react-colorful:dev-nightly

注意：如果您遇到软件包依赖项错误，请首先运行以下命令

composer require kirki-framework/control-base:dev-nightly
composer require kirki-framework/field:dev-master
composer require kirki-framework/url-getter:dev-nightly

在 Kirki v4.0 发布之前，这些依赖项中的一些可能尚未发布标签，因此在同时，上述内容将允许您安装和使用一切。

使用方法

此软件包包含控制本身以及通过 composer 依赖项系统安装的用于 WordPress 自定义设置的简化 API。

使用简化 API

new \Kirki\Field\ReactColorful( [
	'settings'    => 'my_control_setting_id',
	'label'       => esc_html__( 'My Color Control', 'textdomain' ),
	'description' => esc_html__( 'A description here.', 'kirki' ),
	'section'     => 'my_section_id',
	'default'     => '#ff0000',
	'choices'     => [
		'form_component' => 'HexColorPicker',
	],
] );

使用自定义设置 API

/**
 * Register customizer settings and controls.
 *
 * @param \WP_Customize_Manager $wp_customize The Customizer object.
 */
function my_customize_register_function( $wp_customize ) {

	// Add setting.
	$wp_customize->add_setting(
		'my_control_setting_id',
		[
			'type'              => 'theme_mod',
			'capability'        => 'edit_theme_options',
			'default'           => '#0000ff',
			'transport'         => 'refresh', // Or 'postMessage'.
			'sanitize_callback' => [ '\Kirki\Field\ReactColorful', 'sanitize' ],
		]
	);

	// Add control.
	$wp_customize->add_control(
		new \Kirki\Control\ReactColorful(
			$wp_customize,
			'my_control_setting_id',
			[
				'label'       => esc_html__( 'My Color Control', 'textdomain' ),
				'description' => esc_html__( 'A description here.', 'kirki' ),
				'section'     => 'my_section_id',
				'choices'     => [
					'form_component' => 'HexColorPicker',
				],
			]
		)
	);

	// Add more settings...

	// Add more controls...

}
add_action( 'customize_register', 'my_customize_register_function' );

支持的色彩模型

您可以使用控制中的 choices 参数将参数传递给 react-colorful 组件。这里唯一的必需参数是 form_component。

在 form_component 参数中，您可以使用以下之一定义所需控件类型

HexColorPicker
RgbColorPicker
RgbStringColorPicker
RgbaColorPicker
RgbaStringColorPicker
HslColorPicker
HslStringColorPicker
HslaColorPicker
HslaStringColorPicker
HsvColorPicker
HsvStringColorPicker
HsvaColorPicker
HsvaStringColorPicker

它们的值将保存为数据库中的数组或字符串（取决于 form_component 的值）。有关您可以使用的参数的信息，请参阅 react-colorful 文档。

开发

如果您想修改此控件，可以编辑 src 文件夹中的 JS 文件。

如果您尚未安装包，则运行 npm install
编辑完成后，运行 npm run build

许可证

MIT 许可证

kirki-framework / control-react-colorful

维护者

详细信息

README

目录

安装

使用方法

使用简化 API

使用自定义设置 API

支持的色彩模型

开发

许可证