投稿や固定ページの編集画面にカスタムカラーを追加します。
functions.php
/*********************************
編集画面カスタムカラー追加
**********************************/
add_theme_support('editor-color-palette', array(
array(
'name' => 'ピンク',
'slug' => 'pink',
'color' => '#f78da7',
),
array(
'name' => 'レッド',
'slug' => 'red',
'color' => '#cf2e2e',
),
array(
'name' => 'オレンジ',
'slug' => 'orange',
'color' => '#ff6900',
),
));
CSSファイル
追加した色に合わせて背景色と文字色CSSを追加します。
セレクタのルール
.has-{slug}-background-color {
background-color: 色番号;
}
.has-{slug}-color {
color: 色番号;
}
/*---------------------------------
palette
---------------------------------*/
.has-pink-background-color {
background-color: #f78da7;
}
.has-pink-color {
color: #f78da7;
}
.has-red-background-color {
background-color: #cf2e2e;
}
.has-red-color {
color: #cf2e2e;
}
.has-orange-background-color {
background-color: #ff6900;
}
.has-orange-color {
color: #ff6900;
}
このページで出てくる関数
WordPress関数は「公式サイトのドキュメント」で確認しましょう。