【WordPress】カラーパレット追加方法

【Wordpress】カラーパレット追加方法

▼functions.php

function my_wp_theme_json_data_theme( $theme_json ){
    $new_data['version'] = 2;
    // カラーパレット カスタマイズ 既存パレットに追加（単色）
    $new_data['settings']['color']['palette'] = array(
        array(
            'name'  => esc_attr__( 'Primary', 'theme_domain' ),
            'slug'  => 'primary',
            'color' => '#f4f4f4',
        ),
        array(
            'name'  => esc_attr__( 'Accent', 'theme_domain' ),
            'slug'  => 'accent',
            'color' => '#cd162c',
        )
    );
    return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_theme', 'my_wp_theme_json_data_theme' );

▼追加CSS

.has-primary-color {
	color: #f4f4f4;
}
.has-primary-background-color {
	background-color: #f4f4f4;
}
.has-primary-border-color {
	border-color: #f4f4f4;
}
.has-accent-color {
	color: #cd162c;
}
.has-accent-background-color {
	background-color: #cd162c;
}
.has-accent-border-color {
	border-color: #cd162c;
}

上記の画像ようにデフォルトに追加できまあ