WordPressでadmin_print_stylesを使わずにプラグイン管理画面へCSSを読み込ませる

英訳に自信がありませんが日本語ページと英語ページの用例に齟齬があったため、英語ページの内容をメモとして記載します。英訳間違ってたらごめんなさい。

実現したいこと

• プラグインを自作し、そのプラグインの管理画面にだけCSSを読み込ませる
• admin_print_stylesを使わない

admin_print_styles

1. 関数リファレンス/wp enqueue style [用例]
2. Plugin API/Action Reference/admin print styles

今回重要なのは2つ目のadmin_print_stylesの使用に関してです。

上記1の日本語コーデックスではadmin_print_stylesを使った方法が用例として示されていますが、2つ目の英語のadmin_print_stylesのページでは以下のように書かれています。

Note

admin_print_styles should not be used to enqueue styles or scripts on the admin pages. Use admin_enqueue_scripts instead.

管理画面で、スタイルシートやJSファイルのエンキューのためにadmin_print_stylesを使うべきではない。 admin_enqueue_scriptsを使え。
という意味かと思います。

• admin_print_styles | Hook | WordPress Developer Resources

Fires when styles are printed for all admin pages.

上記ページはフックの説明のみだからか特に注記もなく。

とりあえずコーデックスは英語版の内容が最新と考えてadmin_print_stylesを使わない方法を試します。

サンプル

• Plugin API/Action Reference/admin enqueue scripts

プラグイン用に用例がしっかり載っているため以下に引用します。

function load_custom_wp_admin_style($hook) {
 // Load only on ?page=mypluginname
 if($hook != 'toplevel_page_mypluginname') {
  return;
 }
 wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

$hookの値

ちょっと悩んだのが$hookです。

admin_enqueue_scriptsにフックさせた際に自動で入ってくる引数で、具体的にはadd_menu_pageなどで設定した$menu_slugが使われます。

• 関数リファレンス/add menu page

具体例として、上記ページからコードを引用します。

function wpdocs_register_my_custom_menu_page(){
 add_menu_page( 
  __( 'Custom Menu Title', 'textdomain' ),
  'custom menu',
  'manage_options',
  'custompage',// ←ここ
  'my_custom_menu_page',
  plugins_url( 'myplugin/images/icon.png' ),
  6
 ); 
}
add_action( 'admin_menu', 'wpdocs_register_my_custom_menu_page' 

上記のcustompageが$menu_slugのため、この例でいけば以下のようになります。

function load_custom_wp_admin_style($hook) {
 //$fookには"toplevel_page_custompage"という形ではいっている
 if($hook != 'toplevel_page_custompage') {
  return;
 }
 wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

$hookの値をアドレスバーで確認する

前述の英語版のサンプルコードに以下のコメントが書かれています。

// Load only on ?page=mypluginname

これは登録したプラグインページの管理画面を開いてアドレスバーを見ればわかります。

アドレスバーにはこの形でクエリパラメータとしてプラグイン名がでているため、ここを見るだけでも確認可能です。

結び

日本語ページの用例よりも簡潔に記述できわかりやすいので、以降はadmin_enqueue_scriptsでよいかもと。

admin_print_stylesについては用例もなくどこでどう使うべきなのかよくわかりませんでした。