WordPressの管理画面に独自のJavaScript・CSSを読み込む方法

WordPressの管理画面に独自のJavaScript・CSSを読み込む方法

2025年05月09日

WordPressのテーマのカスタマイズやプラグイン作成をする際、状況によっては、独自で作成したJavaScriptやCSSを読み込ませる必要があったりします。

今回は、管理画面に読み込む方法と特定の管理画面に読み込む方法をたまに忘れてしまう自分自身の備忘のため、まとめてみようと思います。

目次

管理画面にJavaScript・CSSを読み込む基本

WordPressの管理画面に独自のJavaScriptとCSSを読み込むにはadmin_enqueue_scriptsというフックを使用します。

function unique_enqueue_scripts(){
  wp_enqueue_script('custom-admin-js',get_stylesheet_directory_uri().'/js/custom-admin.js');
  wp_enqueue_style('custom-admin-css',get_stylesheet_directory_uri().'/css/custom-admin.css');
}
add_action('admin_enqueue_scripts','unique_enqueue_scripts');

JavaScriptを読み込む場合はwp_enqueue_script()を使い、CSSはwp_enqueue_style()で読み込みます。

特定の管理画面にのみJavaScript・CSSを読み込む

次に、特定の管理画面のみにJavaScript・CSSを読み込む方法です。

例えば、新規投稿ページや投稿編集ページのみに独自のJavaScript・CSSを読み込ませたいという場合は以下のように分岐してやります。

function unique_enqueue_scripts($hook_suffix){
  if($hook_suffix === 'post.php' || $hook_suffix === 'post-new.php'){
    wp_enqueue_script('custom-admin-js',get_stylesheet_directory_uri().'/js/custom-admin.js');
    wp_enqueue_style('custom-admin-css',get_stylesheet_directory_uri().'/css/custom-admin.css');
  }  
}
add_action('admin_enqueue_scripts','unique_enqueue_scripts');

このソースコードにある$hook_suffixには管理画面各ページに独自の接尾辞（suffix）が格納されています。

上記の例だと、post.phpが「編集ページ」post-new.phpが「新規投稿ページ」に該当します。もし、他の管理画面のhook_suffixを確認したい場合はfunctions.phpに以下のソースコードを追記してください。

function current_hook_suffix(){
  global $hook_suffix;
  if(current_user_can('administrator')){
    echo '<div class="updated"><p>'.$hook_suffix.'</p></div>';
  }
}
add_action('admin_notices','current_hook_suffix');

すると、このような形でhook_suffixが表示されます。

hook_suffixの表示
hook_suffixの表示

ここで確認したhook_suffixを基にして分岐してやれば、特定の管理画面へJavaScript・CSSを読み込むことが可能となります。