WordPressの開発環境と本番環境を見分けやすくするプラグインを作った

WordPressに限らず、サイトの制作や保守をしている時には開発環境、ステージング環境、本番環境、という感じで、用途別の環境をいくつか用意することが多いと思います。

WordPressでの制作の時にずっと不便だなと思っていたのが、ログイン状態でサイトを見た時に管理バーの色が変わってくれないこと。そこで、それを解決するためのプラグインを作りました。

テスト環境と本番環境の見分けを簡単にしたい

WordPressの制作をやっていると、時折プラグインやコアの更新業務が発生しますよね。

この時、テスト環境で更新して本番環境と見比べる、という作業をするのですが、この時に「あれ？今どっち見てるんだっけ？」と混乱して作業効率が落ちたり、テスト環境と勘違いして本番環境を更新してしまう、という事故に繋がったり。

これをどうにかしたい、と思っていました。

こんな対応もあるにはあるが

最初に考えた対策は、開発環境のサイト名に■開発■と加える方法。これでもさほど不便はないんですが、テストから本番への移行は基本的にAll in one WP Migrationを利用したい…と考えると、なるべく設定内容に変更が無いようにしたい。

そこで、ユーザーのプロフィールから管理画面の配色を変える、という手を考えました。配色はむしろ、作業者アカウントでクライアントさんの管理画面に入るときにも変わっていて欲しいので、引き継がれても問題ないです。

ログイン状態でサイトを見た時に、管理バーの色が変わらない

ところが管理画面の配色を変えても、サイト閲覧時の管理バーはデフォルト配色のまま変わらない。ここも変わってくれることを期待していたのですが、そうはいかなかった。管理画面の配色を変えるプラグインを複数試してみるものの、管理バーは変わらず。

だったら作ろう、という経緯で開発しました。

機能

機能はいたってシンプルで、ユーザープロフィールで設定された配色のキーカラーを管理バーにも当てるだけ、です。例えば管理画面の配色を何らかのプラグインで変えている場合には動作しません。

また、もしWordPress側でのデータ構造や配色の命名が変わったりしたら動作しません。

コード

１ファイル完結のプラグインです。もっといい書き方はありそうです。

<?php
/*
Plugin Name: Inherit Adminbar Color Plugin
*/
?>
<?php
//wp_headフックで動作させる
add_action('wp_head','change_wpadminbar_color');

function change_wpadminbar_color(){
    //ログインしているユーザーのIDを取得する
    $user_id = get_current_user_id();
    //ユーザーメタを取得する
    $user_meta = get_user_meta($user_id);
    //ユーザーメタから、管理画面の配色配列１つ目の中身[配色名]を取る。
    $admin_color = $user_meta["admin_color"][0];
    //取得した文字列に合わせて、スタイルを出力する。
	switch($admin_color){
		case "fresh":
        echo '<style>#wpadminbar{background-color:#23282d;}</style>';
        break;
		
		case "light":
        echo '<style>
        #wpadminbar{
            background-color:#e5e5e5;
            color:#333;
        }
        #wpadminbar .ab-item,
        #wpadminbar a.ab-item,
        #wpadminbar > #wp-toolbar span.ab-label,
        #wpadminbar > #wp-toolbar span.noticon{
            color:#333;
        }
        #wpadminbar .ab-icon,
        #wpadminbar .ab-icon:before,
        #wpadminbar .ab-item:before,
        #wpadminbar .ab-item:after{
            color:#999;
        }
        </style>';
        break;
        
		case "modern":
		echo '<style>#wpadminbar{background-color:#1e1e1e;color:#fff}</style>';
        break;
        
		case "blue":
		echo '<style>#wpadminbar{background-color:#52accc;color:#fff}</style>';
        break;
        
		case "coffee":
		echo '<style>#wpadminbar{background-color:#59524c;color:#fff;}</style>';
        break;
        
		case "ectoplasm":
		echo '<style>#wpadminbar{background-color:#523f6d;color:#fff;}</style>';
        break;
        
		case "midnight":
		echo '<style>#wpadminbar{background-color:#363b3f;color:#fff;}</style>';
        break;
        
		case "ocean":
		echo '<style>#wpadminbar{background-color:#738e96;color:#fff;}</style>';
        break;
        
		case "sunrise":
		echo '<style>#wpadminbar{background-color:#cf4944;color:#fff;}</style>';
		break;
	}
	
	
}