🎨
WordPressのカラーパレットを制限(カスタム)する
見本
こんな感じになる。
実装
functions.php
// デフォルトのカラーピッカーを使用不可にする
add_theme_support('disable-custom-colors');
add_theme_support('editor-gradient-presets', []);
add_theme_support('disable-custom-gradients', true);
// 自前のカラーパレットを追加する
function mytheme_setup_theme_supported_features()
{
add_theme_support('editor-color-palette', array(
array(
'name' => esc_attr__('body black', 'themeLangDomain'),
'slug' => 'body',
'color' => '#272727',
),
array(
'name' => esc_attr__('primary green', 'themeLangDomain'),
'slug' => 'primary',
'color' => '#128580',
),
array(
'name' => esc_attr__('white', 'themeLangDomain'),
'slug' => 'white',
'color' => '#fff',
),
array(
'name' => esc_attr__('gray', 'themeLangDomain'),
'slug' => 'gray',
'color' => '#f7f7f7',
),
));
}
add_action('after_setup_theme', 'mytheme_setup_theme_supported_features');
style.css
/* color-pallet */
.has-body-background-color {
background-color: #272727;
}
.has-body-color {
color: #272727;
}
.has-primary-background-color {
background-color: #128580;
}
.has-primary-color {
color: #128580;
}
.has-white-background-color {
background-color: #fff;
}
.has-white-color {
color: #fff;
}
.has-gray-background-color {
background-color: #f7f7f7;
}
.has-gray-color {
color: #f7f7f7;
}
補足
その他の設定方法についてはこの記事が詳しい。
Discussion