会社でWordpressのアップデートを行うにあたり、検証環境と本番環境の違いが分かるように管理画面の配色を変更します。
しかしこの機能、実は1つだけ悩みがあります。
WordPressの「管理画面の配色」の欠点
管理画面側で色を変えても…
フロント側で表示されない(涙)
個人的にもやもやしているので色々と調べてみたのですが、かというプラグインも見当たらず、functuons.phpに記載したり別途CSSで当てたりして、無理やり追加する方法しか見当たらない…
ということで、 自作プラグインを作りました！
プラグイン「Front Adminbar Color」
「front-adminbar-color」フォルダをpluginファイルにアップロード、もしくはzipに圧縮して管理画面からアップロードしてご利用ください。
出来ること
1.管理画面で選択した「管理画面の配色」に対応して、プラグインのIDであるwpadminbarにCSSが付く機能
管理画面の配色に関しては
get_user_option( 'admin_color' );で取得することが出来ました。
なお、現在設定可能な色は
- ライト
- ブルー
- コーヒー
- エクトプラズム
- ミッドナイト
- オーシャン
- サンライズ
になります。
参考
https://tenman.info/labo/snip/archives/6605
2.管理画面から色を設定出来る機能
「オリジナルの色に設定」の選択で、記入したCSSを使うか、テーマの色を利用するかを選択できます。
色は#(シャープ)付きでもrgbでも登録出来るようにテキスト形式にしました。
初めてプラグインを作る上で、参考にしたサイト
プラグインの土台は、以下のサイトを参考にしました。
0からわかるWordPressプラグイン開発（スッテプ・バイ・ステップ）
管理画面で入力する箇所は複雑になりそうだったので、以下の記事も合わせて参考にしました。
なお、Wordpressでは普段クラスを使わないので、クラスの使い方を完全に忘れていました。
同じクラス内で、function メソッドＢ内でメソッドＡで返ってきた結果を利用するには、$this->を使います。
class クラス名 // クラスを定義
{
function メソッドＡ() { // メソッドを定義
メソッド内処理文;
}
function メソッドＢ() { // メソッドを定義
$this->メソッドＡ(); // このメソッドと同じクラスの「メソッドＡ」のメソッドを呼び出す
メソッド内処理文;
}
}今後の展望
hoverや子メニューの時の色はまだ変えられなかったり、カラーパレットで色を選択できなかったりと、まだ作りが甘いところがあります。なので、今後は必要あれば作り込んでいきたいですね。
もし今後作り込んで使い勝手が良さそうだったら、公式サイトに登録を試してもいいかもしれないですね。
