Wordpressで管理画面内の特定のページのみcssやjsファイルを読み込ませる方法

WordPressでcssやjsのファイルを読み込ませるときは
<head>内に直接書かず、functions.php内で
wp_enqueue_stypeやwp_enqueue_scriptを使って
読み込ませるのが定石です。

しかし、それでは基本的に全ページに読み込まれてしまうので
特定ページだけ読み込ませるときは制限してあげる必要があります。

私が利用している方法として2種類あるのでご紹介します。

$pagenowをglobalとして読み込んで利用する

グローバル変数の一つである$pagenowを使用して
wp-admin以下の〇〇.php部分で条件分岐します

参考関数リファレンス/add menu page WordPress Codex 日本語版

$pagenowの主な値はこちらに一覧が載っています

参考 $pagenow WordPress私的マニュアル

サンプルコードはこんな感じです。

functions.php

<?php

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

function my_admin_scripts( ){
  // グローバル変数を参照できるようにする
  global $pagenow;

  // 投稿編集もしくは新規投稿ページのとき
  if($pagenow === 'post.php' || $pagenow === 'post-new.php' ) {
    wp_enqueue_script( 'admin', get_template_directory_uri() . '/js/admin.min.js', "", false, true );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/admin.min.css' );
  }

  // ログインページのとき
  if($pagenow === 'wp-login.php' ) {
    // 省略
  }

  // admin.php(プラグインなど)でパラメータがabcの時
  if($pagenow === 'admin.php' && strpos($_GET['page'],'abc') !== false) {
     // 省略
}

あらゆるページに対して独自のcss,jsを反映することができます
他の人が作ったプラグインに対しても独自のカスタマイズを入れたい時には便利です。（もちろん自己責任ですが）

$hook_suffixを引数にして利用する

$pagenowと似ていて $hook_suffixが取得する値も概ね同じなのですが、admin.php系のプラグインや自作でトップレベルにメニューを追加したりする場合は$pagenowと異なってくるので注意が必要です。

参考 $hook_suffixとはWordPressカスタマイズ事典

functions.php

<?php

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

function my_admin_scripts($hook_suffix ){

  // 投稿編集もしくは新規投稿ページのとき
  if('post.php' === $hook_suffix  || 'post-new.php' === $hook_suffix  ) {
    wp_enqueue_script( 'admin', get_template_directory_uri() . '/js/admin.min.js', "", false, true );
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/admin.min.css' );
  }

  // ログインページのとき
  if('wp-login.php' === $hook_suffix  ) {
    // 省略
  }

  // abcプラグインのトップページの時
  if('toplevel_page_abc' === $hook_suffix ) {
    // 省略
  }

  // abcプラグインのサブページの時
  if('abc_page_sub' === $hook_suffix ) {
    // 省略
  }

}

$hook_suffixの値は
プラグインのトップページの場合では
toplevel_page_ + add_menu_pageの$menu_slug(第4引数)のようになっているようです。
なので、独自プラグインならpage以下は自由に決めることが出来ます。

また、プラグインのサブページの場合では
add_menu_pageの$menu_title(第2引数) + _page + add_submenu_pageの$menu_slug (第5引数)となっています。

…と一応書きましたが、テキストで書かれてもわかりにくいし
他の人が作ったプラグインだと調べるのも面倒なので
var_dump($hook_suffix)など
でページ毎に確認するのがてっとり早いと思います。

functions.php

<?php

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

function my_admin_scripts($hook_suffix ){
  var_dump($hook_suffix);
  // <body>直下あたりに出てくるのでディベロッパーツールなどで確認する
  // 例：string(26) "toplevel_page_ai1wm_export"
  // 省略
}

まとめ

自作でメニューを追加したり独自プラグインの場合は、そこにだけ適用させたいcssやjsがあるので使えるようになっておくと便利です。

ただ$hook_suffixがサブページのときに、add_menu_pageの第2引数を利用しているようなのですが、ここはメニューのタイトルにあたるので日本語入れている人も多いかと思います。その場合は文字化けしてしまいます。

何か方法はあるとは思いますが、$pagenow使えば悩まずできるので今の所は$pagenowの方が頻度は高めです。

いや$hook_suffixでやったほうがいいよー、こうやれば文字化けは解決できるから$hook_suffix一択にしろー、とかあればご教授いただけると大変助かります。