WordPressの管理画面にCSSを追加することで、管理者向けのUIをカスタマイズすることができます。この記事では、admin_enqueue_scriptsアクションフックを使用して、簡単に管理画面にスタイルを追加する方法を紹介します。
admin_enqueue_scriptsアクションフックを使用する
WordPressでは、管理画面にCSSやJavaScriptを追加するために、admin_enqueue_scriptsというアクションフックを使います。このフックは、管理画面にスタイルやスクリプトを追加する際に便利です。
基本的なCSS追加方法
まずは、管理画面にCSSを追加するための基本的なコードを見てみましょう。以下のコードを、テーマのfunctions.phpファイルに追加します。
NG：子テーマ環境ではCSSが404になる
function my_custom_admin_styles() {
wp_enqueue_style('custom-admin-css', get_template_directory_uri() . '/admin-style.css');
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');
get_template_directory_uri() は親テーマのURLを返す
get_template_directory_uri()は親テーマのディレクトリURLを返す関数です。子テーマを使っている環境（このサイトのcocoon-child-masterもそうです）で、上記のコードを子テーマのfunctions.phpに追加しadmin-style.cssを子テーマ側に置くと、URLが親テーマ（例：cocoon-master）を指してしまい、ファイルが見つからずCSSが適用されません。子テーマのURLを正しく取得するにはget_stylesheet_directory_uri()（現在有効なテーマのURLを返す）を使います。OK：子テーマでも正しく読み込まれる
function my_custom_admin_styles() {
wp_enqueue_style('custom-admin-css', get_stylesheet_directory_uri() . '/admin-style.css');
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');
wp_enqueue_style()関数を使って、カスタムCSSファイルを読み込みます。'custom-admin-css'はこのスタイルシートのハンドル名です。後で削除したり変更したい場合に使用します。get_stylesheet_directory_uri()は、現在有効なテーマ（子テーマ使用時は子テーマ）のディレクトリURLを取得し、そこにあるadmin-style.cssというカスタムCSSファイルを指定しています。
これにより、WordPress管理画面全体に指定したCSSファイルが適用されます。
特定の管理画面にのみCSSを適用する
管理画面のすべてのページにCSSを適用するのではなく、特定のページ（例えば投稿編集画面など）にのみCSSを適用したい場合もあります。次のコードで、その条件を指定することができます。
functions.php：投稿編集画面にのみCSSを適用
function my_custom_admin_styles($hook) {
if ($hook != 'post.php' && $hook != 'post-new.php') {
return;
}
wp_enqueue_style('custom-admin-css', get_stylesheet_directory_uri() . '/admin-style.css');
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');
$hookは現在表示している管理画面の識別子（$hook_suffix）を表します。post.phpは投稿編集画面、post-new.phpは新規投稿作成画面です。これらの画面でのみカスタムCSSが適用されます。- この方法により、指定した管理画面にのみスタイルを適用することができ、不要なページには影響を与えません。
関連記事
- functions.phpだけでできる！管理画面の便利カスタマイズ集
- wp_enqueue_styleの使い方｜CSSを正しく読み込む方法
- 特定のページでのみCSS・JSを読み込む方法｜条件分岐・子テーマパス・キャッシュ対策
よくある質問（FAQ）
QWordPress管理画面にカスタムCSSを追加するには？
A
admin_enqueue_scriptsフックでwp_enqueue_style()を呼び出します。またはadmin_headフックでstyleタグを直接出力する方法もありますが、enqueue方式が推奨です。子テーマを使っている場合はURL取得にget_stylesheet_directory_uri()を使ってください。Q特定の管理画面ページにのみCSSを適用するには？
A
admin_enqueue_scriptsのコールバックは現在の管理ページのスクリーンID（$hook_suffix）を引数として受け取ります。if($hook_suffix === 'post.php')のように条件分岐して適用ページを絞り込みます。Q管理画面のCSS変更がプラグイン更新で上書きされないようにするには？
A子テーマの
functions.phpにadd_action('admin_enqueue_scripts', ...)で追加します。プラグインのCSSを上書きする場合はwp_enqueue_styleの優先度を下げるか、!importantを使わずにより詳細なCSSセレクターを使います。まとめ
WordPressの管理画面にCSSを追加することで、管理者向けのUIを簡単にカスタマイズできます。admin_enqueue_scriptsフックを使用し、CSSを追加する場所や範囲を自由に指定できるので、特定の管理画面にのみカスタムスタイルを適用することも可能です。子テーマ環境ではget_stylesheet_directory_uri()を使うことを忘れずに、ぜひ自分のサイトの管理画面に応じてCSSを活用してみてください。
