027：編集画面カスタムカラー追加

公開日:2020年11月08日更新日:2020年11月13日

WordPress

投稿や固定ページの編集画面にカスタムカラーを追加します。

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;
}