[wp] 『管理画面の配色』を追加する

wordpress3では『管理画面の配色』という項目から管理画面全体配色が選べるのですが、今回は配色を追加して他の配色と同じように選択切り替えしてみよう、というお話です。

↓このように『★カスタムカラー01』というピンク色の配色を追加して切り替え出来るようにしてみます。 『管理画面の配色』を追加する5

① functions.phpに下記を追記します

add_action('admin_init', 'custom01_admin_color');
function custom01_admin_color()
{
    wp_admin_css_color(
        'z_custom01', //←「custom01」でもよいのですがabc順で表示される為「z_」を頭につけています。
         __('★カスタムカラー01'), //←このネームが配色名として管理画面に表示されます。
    admin_url("/wp-content/themes/colors/cudtom_color_01/colors.css"),
        array('#FFB8B8','#ff9999','#FF8D1F','#F3F2E6') //管理画面に表示されるカラーバー4色を左から。
    );
}

② 既存のCSSをコピーしてカスタムベースにします

今回は試しに「コーヒー」という配色をカスタムベースにしてみます。
『cudtom_color_01』というディレクトリ名は上記の『admin_url』に記述したURLと合わせます。

CSSファイルのコピー

/wp-admin/css/colors/coffee/colors.css

/wp-content/themes/colors/cudtom_color_01/colors.css
にコピーします。

※ /wp-admin/css/colors/の中に追加するのもアリなんですが、新規で作成したものは/wp-admin/の中に入れたく無いので、/wp-content/themes/にしています。

③ CSSの『@import url』のパスを変更します

まずは、コピーした
/wp-content/themes/colors/cudtom_color_01/colors.css
のCSSファイルの行頭にある『@import url』のパスを変更します。

『@import url』のパス変更前

@import url("../../colors.css");
『管理画面の配色』を追加する3

『@import url』のパス変更後

/*@import url("../../colors.css");*/
/* インポートしているCSSのパスを変更する */
@import url("/wp-admin/css/colors.css");
『管理画面の配色』を追加する4

④ CSSの6進数のカラーコードを変更します

次に16進数のカラーコード4色変更し、更に余計に置換してしまったところをプロパティ「color」や「background-color」込みで指定して段階的に置換していきます。

①『#46403c』 を 『#FFB8B8』 に6カ所置換
②『#59524c』 を 『#ff9999』 に10カ所置換
③『#c7a589』 を 『#FF8D1F』 に26カ所置換 //左カラムオンマウス等
④『#9ea476』 を 『#F3F2E6』 に6カ所置換

この段階だと余計な色も置換されて、左カラムのメニューが↓のように残念なことになっております。 『管理画面の配色』を追加する6 なのでもう少し置換を。

⑤『color: #FF8D1F;』 を 『color: #fff;』 に17カ所置換
⑥『background-color: #fff;』 を 『background-color: #FF8D1F;』 に5カ所置換
⑦『color: #cdcbc9;』 を 『color: #fff;』 に4カ所置換 //リンクカラーを白に

⑤ 完成でございます

これで、新規追加した『★カスタムカラー01』を選択すると全体がピンクになりましたね。 『管理画面の配色』を追加する2

Similar posts