Twenty seventeenのブロックエディターでは、カラーパレットで文字色や背景色を選ぶようになっていますが、このカラーパレットは、テーマによって色や色数が違います。
Twenty seventeenの場合は、標準カラーパレット12色です。その他の色は、カスタムカラーで好きに調整できますが、毎回同じ色を指定するのは大変です。そこでカラーパレットに新色を登録するカスタマイズです。
が、Twenty seventeenの場合、新色追加がうまくいかないので、標準カラーパレットが、新しく設定するカスタムカラーパレットに置き換わった形となります。
PHPファイルとスタイルシートの両方を指定しますので、必ず子テーマを作成して、子テーマのfunctions.phpとstyle.cssを編集してください。
カスタムパレットをつくる
PHPファイルの編集
外観からテーマファイルエディターを開き、編集する子テーマを選択します。
twentyseventeen-child: テーマのための関数 (functions.php) が選択できたら、編集画面から、以下のコードを追加します。
/* カラーパレットの色追加 */
function webchil_add_my_editor_color_palette() {
//既存のカラーパレットが存在して追加したい場合
$palette = get_theme_support( 'editor-color-palette' );
if ( ! empty( $palette ) ) {
$palette = array_merge( $palette[0], array(
[
'name' => '赤',
'slug' => 'red',
'color' => '#cf2e2e',
],
[
'name' => '青',
'slug' => 'blue',
'color' => '#0693e3',
],
[
'name' => '紫',
'slug' => 'purple',
'color' => '#9b51e0',
],
) );
}else{
//既存のカラーパレットが存在しない場合
$palette = array(
[
'name' => '赤',
'slug' => 'red',
'color' => '#cf2e2e',
],
[
'name' => '青',
'slug' => 'blue',
'color' => '#0693e3',
],
[
'name' => '紫',
'slug' => 'purple',
'color' => '#9b51e0',
],
);
}
add_theme_support( 'editor-color-palette', $palette );
}
add_action( 'after_setup_theme',
'webchil_add_my_editor_color_palette', 11 );上記の指定は、3色の例です。好みで増減してください。必ず ?> より上に追加してください。←慣れた人ほど忘れやすい（って私だけど）。
name：カラーパレットの色にマウスを合わせた時に表示される名前
slug：色を識別するための名前
color：カラーパレットに追加する色のコード（好きな色に変更）
色や名前は、好きなものに変更してください。
これでカスタムカラーパレットがブロックエディターに表示されますが、これだけでは実際に文字や背景の色は変わりません。パレットができただけです。
カラーパレットで追加されたクラス名を使って、スタイルシートで配色の指定が必要です。
スタイルシートを編集
PHPファイルで追加したクラス名に、スタイルシート（style.css）で色を指定します。クラス名は「has-slug名-color」になります。
外観＞カスタマイズ＞追加CSSを開きます。
PHPファイルと同様に、テーマファイルエディターの編集画面から、twentyseventeen-child: スタイルシート (style.css) を編集してもいいのですが、なぜか反映されなかったりするので、追加CSSの方がいいと思います。PC環境によっては、逆の場合もあるようなので、うまくいかなかったら両方試してみてください。
/* カラーパレットの色指定 */
:root {
--color-red: #cf2e2e;
--color-blue: #0693e3;
--color-purple: #9b51e0;
}
.has-red-color {
color: var(--color-red);
}
.has-blue-color {
color: var(--color-blue);
}
.has-purple-color {
color: var(--color-purple);
}
.has-red-background-color {
background-color: var(--color-red);
}
.has-blue-background-color {
background-color: var(--color-blue);
}
.has-purple-background-color {
background-color: var(--color-purple);
}それぞれPHPファイルで記載した「slug」と「color」に対応しています。
CSSやPHPを調整した場合、すでに開いている編集ページには反映されません。一旦閉じてから開き直すと反映されます。
プラグインがおすすめ
ここまで書いておいてなんですが、「Central Color Palette」というプラグインを入れる方が簡単です。この場合もカラーパレット全取っ替えになりますが、色名も自動で入るし、設定をエクスポートして、他のサイトでも使用できます。結局、私はこちらのプラグインに落ち着きました。
注意点は、このパレットにすると「クリア」の項目がなくなります。デフォルトに文字色を戻したい時などに困るので、デフォルトカラーも登録するのがおすすめです。デフォルトも文字色は「＃333」です。この他に、背景色がある時用に真っ黒「#000」も入れておくといいと思います。
また、エクスポートする際にファイル名が文字化けする場合があります。その場合は、文字化け部分を任意の数字などに書き直して（例：central-palette_01.bak）ください。
以上です。