管理画面に新しい配色を追加するwp_admin_css_color

WordPress

wordpressのadmin panelにwindows8タイプの配色を設定する

admin_initアクションにwp_admin_css_colorをフックする

wordpressの管理画面にデザイナーや開発者が設定した配色を選択可能にする。

WordPress3.8 管理画面の色をカスタマイズして設定する方法では、マルチサイト環境におけるブログセットアップ時(ユーザー登録時)に配色を変えてセットアップする方法を書いた。

本エントリーでは、デフォルトで選択可能な8種類の配色に新しい配色を追加する方法をエントリーする。wordpress3.8.1の標準の配色は以下のようになっている。

admin-color

エクトプラズムを選択した状態の管理画面の配色にしてある。この状態を以下のように変えてみる。

windows8-admin-color

Windows8タイプの配色を追加して選択したのが上の状態。

まず、admin_initに配色を設定するための関数をフックする。

add_action('admin_init', array($this, 'w8_admin_color'));

このフックの仕方はプラグインで用いる方法で、テーマの関数(functions.php)でフックする場合は、

add_action('admin_init', 'w8_admin_color');

という感じになる。

配色設定関数w8_admin_colorは以下のようにした。

function w8_admin_color()
{
    wp_admin_css_color(
        'windows8',
         __('windows8'),
	admin_url("css/colors/windows8/colors.css"),
        array('#00A600','#008A00','#2672EC','#BF1E4B')
    );
}

ここまでの設定で管理画面にアクセスすると配色の一覧にwindows8が追加されていることを確認できる。

新しい配色のcssを作成

上で載せた、wp_admin_css_color関数の中でwindows8用のcssのパスを指定している点に注目してほしい。

admin_url("css/colors/windows8/colors.css"),

上のcssファイルでwindows8用の配色を定義する。そのため、そのcssファイルを新規に作成することになる。管理画面の配色のためのcssが格納されている階層、

wp-admin\css\colors

にアクセスすると以下のようになっている。

admin-css-default

このディレクトリ階層内で、今回はectoplasmフォルダをwindows8というフォルダにしてコピーした。それが以下の状態。

admin-css-windows8

windows8フォルダを開くと、colors.cssというファイルが存在するので、そのcssファイルに対して色の変更を行っていく。ectoplasmの配色からwindows8の配色へと変更を行う作業になる。

具体的に変えた配色と変更後の色は以下のとおり

#523f6d → #00A600
#413256 → #008A00
#a3b745 → #2672EC
#d46f15 → #BF1E4B

上のように変更したが、ディレクトリを分けてあるので、変えたい色を変えたいようにcssをカスタマイズすることができる。Windows8の配色は、以下のサイトを参考に選択した。

http://teamwindows8.com/windows-8-colors-hex-code/

「管理画面に新しい配色を追加するwp_admin_css_color」への4件のフィードバック

  1. 大変参考になりました。

    一つ質問なのですが、デフォルトで選択可能な8種類の配色を非表示にして、追加した配色だけを表示し選択できるようにすることはできるでしょうか？

    返信

    1. こんにちは、初のコメントありがとうございます。

      以下の方法でできそうです。
      配色を1色のみにしてしまうと配色が反映されるだけとなるようです。2つの配色を追加すれば、色が選べる状態になります。

      function w8_admin_color_scheme()
{
	global $_wp_admin_css_colors;

/*echo "<pre>";
var_dump($_wp_admin_css_colors);
echo "</pre>";*/

    wp_admin_css_color(
        'windows8',
         __('windows8'),
		admin_url("css/colors/windows8/colors.css"),
        array('#00A600','#008A00','#2672EC','#BF1E4B')
    );
    wp_admin_css_color(
        'windows7',
         __('windows7'),
		admin_url("css/colors/windows7/colors.css"),
        array('#00A600','#008A00','#2672EC','#BF1E4B')
    );

	unset($_wp_admin_css_colors['fresh']);
	unset($_wp_admin_css_colors['light']);
	unset($_wp_admin_css_colors['blue']);
	unset($_wp_admin_css_colors['midnight']);
	unset($_wp_admin_css_colors['sunrise']);
	unset($_wp_admin_css_colors['ectoplasm']);
	unset($_wp_admin_css_colors['ocean']);
	unset($_wp_admin_css_colors['coffee']);
}

      コメント部分を外せばunsetする配列名を調べることができます。

      wp_admin_css_colorは、

      wp-includes\general-template.php

      に書かれているので、その部分が参考になります。

      返信

  2. dimensionさん、ありがとうございます。

    大変参考になります。

    さっそく反映させてみます。

    今後もちょくちょく覗かせていただきますので宜しくお願いいたします。

    返信

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

管理画面に新しい配色を追加するwp_admin_css_colorの記事にコメントを投稿

カスタマイズ