WordPressの管理画面にCSSを追加することで、管理者向けのUIをカスタマイズすることができます。この記事では、admin_enqueue_scriptsアクションフックを使用して、簡単に管理画面にスタイルを追加する方法を紹介します。
admin_enqueue_scriptsアクションフックを使用する
WordPressでは、管理画面にCSSやJavaScriptを追加するために、admin_enqueue_scriptsというアクションフックを使います。このフックは、管理画面にスタイルやスクリプトを追加する際に便利です。
基本的なCSS追加方法
まずは、管理画面にCSSを追加するための基本的なコードを見てみましょう。以下のコードを、テーマのfunctions.phpファイルに追加します。
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');- wp_enqueue_style() 関数を使って、カスタムCSSファイルを読み込みます。
- ‘custom-admin-css’ はこのスタイルシートのハンドル名です。後で削除したり変更したい場合に使用します。
- get_template_directory_uri() は、現在のテーマディレクトリのURLを取得し、そこにあるadmin-style.cssというカスタムCSSファイルを指定しています。
これにより、WordPress管理画面全体に指定したCSSファイルが適用されます。
特定の管理画面にのみCSSを適用する
管理画面のすべてのページにCSSを適用するのではなく、特定のページ（例えば投稿編集画面など）にのみCSSを適用したい場合もあります。次のコードで、その条件を指定することができます。
function my_custom_admin_styles($hook) {
if ($hook != 'post.php' && $hook != 'post-new.php') {
return;
}
wp_enqueue_style('custom-admin-css', get_template_directory_uri() . '/admin-style.css');
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');- $hook は現在表示している管理画面の識別子を表します。
- post.php は投稿編集画面、post-new.php は新規投稿作成画面です。これらの画面でのみカスタムCSSが適用されます。
- この方法により、指定した管理画面にのみスタイルを適用することができ、不要なページには影響を与えません。
まとめ
WordPressの管理画面にCSSを追加することで、管理者向けのUIを簡単にカスタマイズできます。admin_enqueue_scriptsフックを使用し、CSSを追加する場所や範囲を自由に指定できるので、特定の管理画面にのみカスタムスタイルを適用することも可能です。ぜひ、自分のサイトの管理画面に応じてCSSを活用してみてください。
