この「WordPressの管理画面のスタイル編集」というのは、WordPressが普及しはじめた初期の頃から、
Web制作の実際の現場でも時々目にすることのあるご要望のひとつです。
（※WordPress離れの動きも一定数あり、JAMstackという概念が出て久しいということも勿論、実際に現場で目にしてよく知っているのですが、まだまだ改修案件等で、WordPressのシェアも根強く存在しているのもまた事実…ということで記事を書いています。）

特に、Webメディアを複数人スタッフで運営している企業・組織からのご依頼などで、

「新しいメディアを立ち上げるんだけど、管理画面の使い勝手や見た目を良くしたい」

というようなケースで見かけます。（※同時に、「機能面もこうしたいんだけど…」という依頼もセットで頂いたりします）

今回は、そういった際に使うことのできる、「WordPressの管理画面とログイン画面にカスタムCSSを読み込む方法」についての記事になります。

早速、コードなど

まずは結論から。コードのご紹介です。

これは、functions.php に追記するコードになります。

// 管理画面に独自cssを読み込み
function add_dashboard_edit_style() {
  $adminCustomCss = get_template_directory_uri().'/assets/css/admin-custom.css';
  wp_enqueue_style('add_dashboard_edit_style', $adminCustomCss);
}
if( !current_user_can('administrator') ) {
  add_action('admin_enqueue_scripts', 'add_dashboard_edit_style');
}

やっていること

まず、
2行目では get_template_directory_uri() を使用して、現在使用しているテーマまでのパスを取得。
それを、読み込みたいcssがある階層のパスと繋ぎ、変数 $adminCustomCss に格納しています。
(変数名は、後から見た人や同じチームで制作している他のメンバーが分かりやすければなんでも良いです)

3行目はWordPressが予め持っている関数 wp_enqueue_style() を使用することで、
2行目で定義したカスタムcssを読み込み対象としてセットしている部分です。
ものすごくざっくり言うと
（内部的には $wp_styles と言うglobal変数に格納されて…等々の処理が走っているのですが）

wp_enqueue_style(‘名前(ハンドル名)’, ‘読み込む対象のcss’);

と記述することで、カスタムcssを読み込み対象としてセットされる、という動きをしています。
それを
6行目のように
add_action(‘admin_enqueue_scripts’, ‘add_dashboard_edit_style’);
として、WordPressのアクションフックのひとつ admin_enqueue_scripts を使用して
そのタイミングで一緒に実行してあげることで、
管理画面にも独自のカスタムcssを読み込ませることができる、というわけです。

if( !current_user_can(‘administrator’) ) は何をしているか

上のセクションのコードの5行目、
if( !current_user_can(‘administrator’) ) {…
↑これは何をしているかというと、
「管理者としてログインしていない時」
を表している分岐になります。

冒頭の、「Webメディアを複数人のスタッフで運営している」という様なご依頼のケースでよくあるのが

・外部のライター用に、管理画面をカスタマイズした見た目にしたい
・お取引先の中にも更新作業をする方がいるので、その人がログインした場合にも管理画面の見た目を変えたい
・でも管理者でログインしたときはデフォルトの見た目のままにしたい

という様なケースです。

その様なとき、
if( !current_user_can(‘administrator’) ) {…

↑この分岐を書いてあげることで「管理者としてログインしていない時」の挙動を
定義することができる、というわけです。

おまけ： ログイン画面にカスタムcssを読み込むには

これも結構、実際にご要望としてあるケースなのですが

管理画面の他に、「ログイン画面にカスタムcssを読み込ませたい」

というご要望です。

例えば、制作したWebサイトを第三者とも共同で使う様な想定のサイトで、
「ログイン画面のロゴを独自のもの、自社サービスのものに変えたい」
「ログイン画面も使いやすくしたい」

といったご要望の場合です。

その際は、さっきのサンプルコードの末尾の部分に1行追加するだけで、
「ログイン画面にもカスタムcssを読み込ませる」ことが可能です。

具体的には次のとおり。

// 管理画面に独自cssを読み込み
function add_dashboard_edit_style() {
  $adminCustomCss = get_template_directory_uri().'/assets/css/admin-custom.css';
  wp_enqueue_style('add_dashboard_edit_style', $adminCustomCss);
}
if( !current_user_can('administrator') ) {
  add_action('admin_enqueue_scripts', 'add_dashboard_edit_style');
}
// ログインページにカスタムcssを読み込み
add_action('login_head', 'add_dashboard_edit_style');

↑先ほどの、管理画面に読み込ませる場合のアクションフック
add_action(‘admin_enqueue_scripts’, ‘add_dashboard_edit_style’);
に加えて、

add_action(‘login_head’, ‘add_dashboard_edit_style’);
↑こちらも実行させる、という形になります。

WordPressが動いているとき、その裏側の挙動（ものすごくざっくり言ってます）
として、「〇〇が読み込まれたとき」「〇〇の準備ができたとき」など、
「いろいろなタイミング」が存在しているのですが

その中のひとつ、
login_head というタイミングで同時に実行させている、という意味になります。

このタイミングで、先ほどのカスタムcssを読む関数を同時に実行してあげることで、
「ログイン画面にもカスタムcssを読み込ませる」ことが可能になる、というわけです。

公式解説ページ

WordPress公式の、
wp_enqueue_style() に関する解説ページは次になります。
wp_enqueue_style – Function

ちなみに enqueue ですが、エンキューと読むそうです。

この記事のまとめ

WordPressが普及しはじめた初期の頃から、
「WordPressの管理画面や、ログイン画面をカスタマイズしたい」
というご要望、ご依頼を度々、
実際の制作現場で目にしてきました。

つい最近も、似た様なケースでこの記事に書いた方法を使うことがあったため、今回あらためて記事にしてみました。
（※なお、冒頭にも書きましたが「WordPress離れの動き」も一定数あり、JAMstackという概念が出て久しいということも勿論、実際に現場で目にしてよく知っています。ですがまだまだ改修案件等で、WordPressのシェアも根強く存在しているのもまた事実…ということで記事を書きました。）

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。