mineko のプロフィール写真

投稿者:

管理画面のカラースキームを増やすのは意外と面倒かも、と思った

2009 年 7 月 10 日 (カスタマイズ, プラグイン)

20090710

WPの方は2.8.1がリリースされたということであわただしくなってきた金曜日、ワタシはプロフィールのところで選択できる管理画面のカラースキームが簡単に増やせるのか調べてみました。

一番簡単な方法は「Easy Admin Color Schemes」のプラグインを使うことです。

画面からCSSを直接編集できたりインポートが出来たりするなど、これ一つあれば機能的には十分なのでしょう。ちょっとした修正でmu-pluginsディレクトリにでも動作しました。

でもサービスとして提供を考えた場合、ここまでの機能は多すぎると思います。ただ単に出来あいのスキーム数種類から選択できるようにするにはどうすればよいか、もうちょっと調べてみます。

・登録方法

wp-includes/general-template.php を見ると $_wp_admin_css_colors というグローバル変数(配列)に次のような値をセットしています。

$_wp_admin_css_colors[$key] = (object) array(‘name’ => $name, ‘url’ => $url, ‘colors’ => $colors);

この値を取得すれば既存のスキームが分かりますし、追加すれば値の登録ができそうです。実際wp-admin/admin.php には

wp_admin_css_color(‘classic’, __(‘Blue’), admin_url(“css/colors-classic.css”), array(‘#073447’, ‘#21759B’, ‘#EAF3FA’, ‘#BBD8E7’));
wp_admin_css_color(‘fresh’, __(‘Gray’), admin_url(“css/colors-fresh.css”), array(‘#464646’, ‘#6D6D6D’, ‘#F1F1F1’, ‘#DFDFDF’));

と記述されています。

・CSS

CSSのデータは上の「colors-classic.css」または「colors-fresh.css」を参考に作成することになるんじゃないでしょうか。ただのCSSとはいえ30Kもあります(>_<)
しかもそこらじゅうにcolor属性が… orz
デザイナさんに頼むのはあきらめました。

補足:wp-admin/css には他に color-{classic|flesh}-rtl.cssというのもあるようです。rtlっていうのは左右の…見なかったことにします。

・画像

wp-admin/images の中をみてみると、それらしいものがありました。cssの中でbackgroundとして使われていますが、すべてCSS Spriteになっています。スゴイですね。

blue-grad.png blue-grad.png    gray-grad.png gray-grad.png

これはそんなに大変じゃなさそう。

menu-vs.pngmenu-vs.png

menu.pngmenu.png

icons32-vsicons32-vs.png

icons32icons32.png

list-vs list-vs.png  list list.png

メニュー関係。下半分の色相、色温度を変えて作るか別のものにします。

site-admin.pngsite-admin.png これはサイト管理用のものなので省略してもOK。

もし自分でメニューを作成した場合、それらの画像も必要になります。CSSで@important属性を付けていくしかないでしょうね。

ワタシはプラグインで管理スキームを追加できるようにして、画像は適当に加工しようと思います。

問題はCSSだけど…

・選択画面

ここも難関。スキーム数が増えたら画面を占有しちゃう(T_T)
 wp-admin/useredit.php の中でTABLEをかっちり組まれてしまっていて、手の出しようがありません。
div class="color-option"
 input id="admin_color_<?php echo $color; ?>" type="radio" class="tog"
  table class="color-palette"
   td style="background-color: <?php echo $html_color ?>"
  label for="admin_color_<?php echo $color; ?>"

この辺のCSSを上書きしてもそんなに変わらなさそうです。JSでダイナミックに書き換えることまで考えましたが、数種類に厳選しておくのが無難ですね。

コメントをどうぞ

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