【WordPress】管理画面の特定ページのみCSS・JSを読み込む方法

テーマやプラグインの開発で管理画面の特定ページでCSS・JSを読み込ませたいときの方法についてサンプルを作りました。

管理画面でCSS・JSを読み込む方法

まずはWordPressの管理画面でCSS・JSを読み込む方法です。

管理画面でCSS・JSを読み込ませるためにはadmin_enqueue_scriptsアクションを使ってファイルをエンキューします。

例えばこんな感じ▼

function aktk_admin_enqueue_scripts() {
  //css
  wp_enqueue_style(
    'aktk-admin-style',
    get_template_directory_uri() . '/css/admin/admin.css'
  );

  //js
  wp_enqueue_script(
    'aktk-admin-script',
    get_template_directory_uri() . '/js/admin/admin.js'
  );
}
add_action( 'admin_enqueue_scripts', 'aktk_admin_enqueue_scripts' );

アクションは管理画面用のものを使いますが、wp_enqueue_styleとwp_enqueue_scriptについてはフロント側での使用方法と特に変わりはありません。

管理画面の特定ページだけCSS・JSを読み込む方法

場合によっては管理画面の特定のページだけCSS・JSを読み込みたい場合もあるでしょう。

そんなときはadmin_enqueue_scriptsで実行する関数に引数を追加します。

function aktk_admin_enqueue_scripts( $hook ) {
  if ( 'post.php' == $hook ) {
    //enqueue
  }
}
add_action( 'admin_enqueue_scripts', 'aktk_admin_enqueue_scripts' );

第1引数でページの判断をすることができます。

引数にはpost.phpとかwidget.phpなど、管理画面を表示しているphpファイルの名前が入るイメージになりますが、プラグインの開発などで独自に追加した設定ページではまた別の文字列がセットされます。

目的のページで引数にどのような文字列が入ってくるかはvar_dump等でページに表示させて調べてみましょう。

function aktk_admin_enqueue_scripts( $hook ) {
  var_dump( $hook );
}
add_action( 'admin_enqueue_scripts', 'aktk_admin_enqueue_scripts' );

リリース前にvar_dump等を消すのを忘れずに（汗

ではまた。