はじめに
ユーザー→ プロフィール→管理画面の配色で、管理画面の配色を好みに合わせて選べます。
しかし、テーマやプラグインに合わせて独自の配色を使いたい場合もあるでしょう。
そこで、オリジナルの管理画面カラーステーマを追加します。
この記事では、この方法について説明します。
完成イメージ
標準の管理画面カラーテーマ
WordPressには、以下のようにあらかじめ複数の管理画面用カラースキームが用意されています。
(
[fresh] => stdClass Object
(
[name] => デフォルト
[url] =>
[colors] => Array
(
[0] => #1d2327
[1] => #2c3338
[2] => #2271b1
[3] => #72aee6
)
[icon_colors] => Array
(
[base] => #a7aaad
[focus] => #72aee6
[current] => #fff
)
)
[light] => stdClass Object
(
[name] => ライト
[url] => https://example.com/wp-admin/css/colors/light/colors.min.css
[colors] => Array
(
[0] => #e5e5e5
[1] => #999
[2] => #d64e07
[3] => #04a4cc
)
[icon_colors] => Array
(
[base] => #999
[focus] => #ccc
[current] => #ccc
)
)
[modern] => stdClass Object
(
[name] => モダン
[url] => https://example.com/wp-admin/css/colors/modern/colors.min.css
[colors] => Array
(
[0] => #1e1e1e
[1] => #3858e9
[2] => #7b90ff
)
[icon_colors] => Array
(
[base] => #f3f1f1
[focus] => #fff
[current] => #fff
)
)
[blue] => stdClass Object
(
[name] => ブルー
[url] => https://example.com/wp-admin/css/colors/blue/colors.min.css
[colors] => Array
(
[0] => #096484
[1] => #4796b3
[2] => #52accc
[3] => #74B6CE
)
[icon_colors] => Array
(
[base] => #e5f8ff
[focus] => #fff
[current] => #fff
)
)
[midnight] => stdClass Object
(
[name] => ミッドナイト
[url] => https://example.com/wp-admin/css/colors/midnight/colors.min.css
[colors] => Array
(
[0] => #25282b
[1] => #363b3f
[2] => #69a8bb
[3] => #e14d43
)
[icon_colors] => Array
(
[base] => #f1f2f3
[focus] => #fff
[current] => #fff
)
)
[sunrise] => stdClass Object
(
[name] => サンライズ
[url] => https://example.com/wp-admin/css/colors/sunrise/colors.min.css
[colors] => Array
(
[0] => #b43c38
[1] => #cf4944
[2] => #dd823b
[3] => #ccaf0b
)
[icon_colors] => Array
(
[base] => #f3f1f1
[focus] => #fff
[current] => #fff
)
)
[ectoplasm] => stdClass Object
(
[name] => エクトプラズム
[url] => https://example.com/wp-admin/css/colors/ectoplasm/colors.min.css
[colors] => Array
(
[0] => #413256
[1] => #523f6d
[2] => #a3b745
[3] => #d46f15
)
[icon_colors] => Array
(
[base] => #ece6f6
[focus] => #fff
[current] => #fff
)
)
[ocean] => stdClass Object
(
[name] => オーシャン
[url] => https://example.com/wp-admin/css/colors/ocean/colors.min.css
[colors] => Array
(
[0] => #627c83
[1] => #738e96
[2] => #9ebaa0
[3] => #aa9d88
)
[icon_colors] => Array
(
[base] => #f2fcff
[focus] => #fff
[current] => #fff
)
)
[coffee] => stdClass Object
(
[name] => コーヒー
[url] => https://example.com/wp-admin/css/colors/coffee/colors.min.css
[colors] => Array
(
[0] => #46403c
[1] => #59524c
[2] => #c7a589
[3] => #9ea476
)
[icon_colors] => Array
(
[base] => #f3f2f1
[focus] => #fff
[current] => #fff
)
)
)実装手順
以下の手順で実装します。
- ラベル独自のカラーテーマを作成
以下の手順で作成します。
- WordPress標準の管理画面用カラースキームのCSSファイルを参考にします。
例えば、wp-admin/css/colors/blue/colors.cssやlight/colors.min.cssなどが該当します。 - 自分のカラーステーマに合わせて、背景色・メニュー色・リンク色・アイコン色などのカラーコードを置き換えます。
- スタマイズしたCSSファイルを、子テーマの直下などに保存します。
- WordPress標準の管理画面用カラースキームのCSSファイルを参考にします。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
add_action('admin_init', function () { wp_admin_css_color( 'my_custom_scheme', // スラッグ 'My Custom Scheme', // 管理画面で表示されるスキーム名 get_stylesheet_directory_uri() . '/color.css', [ // メニュー表示用配色 '#009688', '#4caf50', '#000000', '#cddc39', ] ); });
さいごに
今回紹介した方法を使えば、管理画面の配色を自由にカスタマイズし、テーマやブランドイメージに合わせたオリジナルのカラーテーマを作成できます。
