投稿や固定ページの編集画面にカスタムカラーを追加します。
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関数は「公式サイトのドキュメント」で確認しましょう。