【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法|Knowledge Base

公開日：2019(令和元)年10月5日／最終更新日： 2019(令和元)年10月10日

私は数個のWordPressサイトを管理しています。先日複数のサイトの管理画面を開き、記事を書いていたらびっくり！！目的とは違うサイトで記事を書き続けていたんです。

まあ、下書き保存中に判明したので事なきを得たのですが（大げさですね・・）、管理画面が共通というのはこうした場合に間違い易いのでできればサイトごとに変えたい！！でもプラグインを使うのはちょっと・・という方のためのカスタマイズ方法を紹介します。

なお、ユーザーごとに管理画面の色をそれなりに変えるということでしたら「ユーザー」から変更するユーザーをクリックして「管理画面の配色」で変更可能ですので、それで事足りる方はそちらの方が簡単です。

この方法での注意点

最初にこのカスタマイズの注意点について書かせていただきます。この記事ではある程度不都合が生じないようにするためのCSSサンプル（デザイン要素のコード）を紹介し、コピペで適用できるようにはしていますが、すべての管理画面で不都合なく表示されるとは限りません。

例えばプラグインの設定などで基本背景にそのまま文字などを表示するような管理画面の作りの場合、濃い色の背景を指定すると文字が見えないなどの不都合が出ます。これを解消するためには個々の画面や部分に対してデザインの変更をしていくことが必要となりますので、デベロッパーツールなどを使ったCSSの確認や編集の知識がないという方にはおすすめしません。

この方法で表示した参考例

【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法|Knowledge Base

もちろんこの方法を用いて当サイトも管理画面をカスタマイズしています。以下がログイン画面や管理画面のサンプル画像になります（表示画面の配色と同じにしています）

ちなみに管理している別のサイトはこんな感じです

ね！これなら間違えることはほぼなくなりますし、なんだかオリジナルでやる気も出てきますよね？？（私だけ？）

それでは進めていきましょう！！

WordPressの管理画面側にデザインを適用する準備

WordPressのログイン画面や管理画面に対するデザイン要素は、通常のテーマのCSSなどへいくら追記しても適用されません。全く別物だからです。従って管理画面側のデザインを変更するには準備が必要になります。

１．管理画面のデザイン要素を記述するファイルを作る

まずはパソコン上でテキストエディタを開き、空のままファイル名を「style-admin」、拡張子を「css」、文字コードを「UFT-8 BOMなし」で保存します。

文字コード？という方は

WordPressのテーマファイルをアップロードしてもファイルの内容が空になる現象の原因と対処

をご覧になってみてください。

ファイルを作成したらFTPクライアントツールやサーバーのファイルマネージャーを使って「style-admin.css」をテーマフォルダ内へアップロードしてください（子テーマを使っている場合には親テーマのフォルダ内へアップロードしてください）

子テーマへアップロードしても使える方法は今回は割愛します。

ファイルのアップロードが終わったら、管理画面から「外観」→「テーマエディタ」を開いてファイルが存在しているかを確認ください（子テーマの場合は画面右上のテーマ選択から親テーマに切り替えてください）

２．１のファイルをテーマ内に読み込む

次に１でアップロードしたファイルがテーマの中で読み込まれる（プログラムとして認識される）ようにします。

以下のコードを(親)テーマのfunctions.php末尾へ追記します

/******* 管理画面のCSS(admin-styles.css)を読み込む *******/
function load_custom_wp_admin_style() {
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/style-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-admin.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

簡単に何をしているかを解説させていただくと

上半分は管理画面のスタイルに「style-admin.css」を適用させてちょ
下半分はログイン画面のスタイルに「style-admin.css」を適用させてちょ

という風にしています。

デザイン要素例

試しに以下のコードを「style-admin.css」へ追記してみてください

/********** 管理画面のデザイン **********/
/** 管理バー **/
div#wpadminbar {
background: #07093d;
}
/** サイドメニュー **/
ul#adminmenu {
background: #07093d;
}
/*** ダッシュボード ***/
body.index-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
/*** 投稿・固定ページ一覧 ***/
body.edit-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.edit-php .subsubsub{
background-color: #fff;
}
body.edit-php .tablenav-pages{
color:#fff;
}
/*** 投稿・固定ページ編集 ***/
body.post-new-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.post-new-php .subsubsub{
background-color: #fff;
}
body.post-new-php .inside {
background-color: #fff;
}
body.post-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.post-php .subsubsub{
background-color: #fff;
}
body.post-php .inside {
background-color: #fff;
}
/*** テーマエディタ ***/
body.theme-editor-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.theme-editor-php .subsubsub{
background-color: #fff;
}
body.theme-editor-php label {
color: #fff;
}
body.theme-editor-php h2 {
color: #fff;
}
/*** プラグインエディタ ***/
body.plugin-editor-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.plugin-editor-php .subsubsub{
background-color: #fff;
}
body.plugin-editor-php label {
color: #fff;
}

body.plugin-editor-php h2 {
color: #fff;
}
/*** メディアライブラリ ***/
body.upload-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.upload-php .subsubsub{
background-color: #fff;
}
body.upload-php .tablenav-pages{
color:#fff;
}
/*** メディア追加 ***/
body.media-new-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.media-new-php .subsubsub{
background-color: #fff;
}
body.media-new-php label {
color: #fff;
}

body.media-new-php p {
color: #fff;
}

body.media-new-php a {
color: #fff;
}

/*** プラグイン一覧 ***/
body.plugins-php #wpcontent {
background: linear-gradient(#107fc9,#07093d);
}
body.plugins-php .subsubsub{
background-color: #fff;
}
body.plugins-php .tablenav-pages{
color:#fff;
}

/** ログイン画面のデザイン **/
body.login.login-action-login.wp-core-ui.locale-ja {
background: linear-gradient(#107fc9,#07093d);
}

.login #backtoblog a, .login #nav a {
color: #fff;
}

バックエンド用のCSSなので、コードをまとめず場所ごとに記述しています

どの部分に対するCSSなのかについてはコード内のコメントを参照ください。

先程の表示例の上（ブルー）になりましたよね？もしも変わらない場合には一度キャッシュをクリアしてみてください
それでもダメな場合にはここまでの設定を再確認してください。

これで自由に管理画面側、ログイン画面のデザインが変更できるようになりました。ちなみに表示例下のように画像をWマークの代わりに表示させたい時は

320×150のサイズの画像を用意する
以下のコードを「style-admin.css」へ追記する（画像のURLは指定してください）

.login h1 a {
background-image: url(画像のURL);
background-image: none,url(画像のURL);
background-size: 320px;
background-position: center top;
background-repeat: no-repeat;
color: #444;
height: 150px;
font-size: 20px;
font-weight: 400;
line-height: 1.3em;
margin: 0 auto 25px;
padding: 0;
text-decoration: none;
width: 320px;
text-indent: -9999px;
outline: 0;
overflow: hidden;
display: block;
}

で表示させることができます。サイズを変えたい時は・・・やはりCSSの要素を変更する必要があります・・・。