README

这是一个简单的 WordPress 自定义化框架控件，使用 react-color。

安装

要安装此软件包，请使用 composer

composer require kirki-framework/control-react-color

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

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

在 Kirki v4.0 发布之前，这些依赖项中的一些可能没有发布标签，因此在此期间，上述操作将允许您安装并使用所有内容。

使用方法

此软件包包含控件本身，以及通过 composer 依赖项系统安装的 WordPress 自定义化框架的简化 API。

使用简化 API

new \Kirki\Field\ReactColor( [
	'settings'    => 'my_setting',
	'label'       => esc_html__( 'My Color Control', 'textdomain' ),
	'description' => esc_html__( 'A description here.', 'kirki' ),
	'section'     => 'title_tagline',
	'default'     => '#0008DC',
	'choices'     => [
		'formComponent' => 'ChromePicker',
	],
] );

使用自定义化 API

/**
 * Add Customizer settings & controls.
 *
 * @since 1.0
 * @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object.
 * @return void
 */
add_action( 'customize_register', function( $wp_customize ) {

    // Add setting.
	$wp_customize->add_setting( 'my_setting', [
		'type'              => 'theme_mod',
		'capability'        => 'edit_theme_options',
		'default'           => '#0008DC',
		'transport'         => 'refresh', // Or postMessage.
		'sanitize_callback' => [ '\kirki\Field\Color', 'sanitize' ], // Or a custom sanitization callback.
	] );

    // Add control.
	$wp_customize->add_control( new \Kirki\Control\ReactColor( $wp_customize, 'my_setting', [
		'label'       => esc_html__( 'My Color Control', 'textdomain' ),
		'description' => esc_html__( 'A description here.', 'kirki' ),
		'section'     => 'title_tagline',
		'choices'     => [
			'formComponent' => 'ChromePicker',
		],
	] ) );
} );

参数

您可以使用控件中的 choices 参数传递参数给 react-color。这里唯一的 必需 参数是 formComponent。在 formComponent 参数中，您可以定义您想要的控件类型，使用以下之一

• AlphaPicker
• BlockPicker
• ChromePicker
• CirclePicker
• CompactPicker
• GithubPicker
• HuePicker
• MaterialPicker
• PhotoshopPicker
• SketchPicker
• SliderPicker
• SwatchesPicker
• `TwitterPicker

有关您可以使用哪些额外参数的详细信息，请参阅 react-color 脚本。

开发

如果您想修改此控件，可以编辑 src 文件夹中的 JS 文件。编辑完成后，您可以通过运行以下命令来更新编译后的脚本

npm install
npm run build