WordPress管理画面に独自追加したページだけ特定のCSS/JSを適用

この記事は、以下に当てはまる方に向けて書いています。

1. functions.phpをカスタマイズしてWordPress管理画面に独自ページを作った
2. そのページだけに特定のCSS、JavaScriptを適用させたい。

①の独自ページとは、例えば以下「★マイページ★」のような感じです。

独自ページを追加することは割りと簡単なんですが、②を解決するのに時間が掛かったので同じ問題に悩む人の参考になれば。

コピペ＆編集だけで済むので簡単です！

WordPress管理画面に独自追加したページだけ特定のCSSを適用する

結論のコピペ用コードを先に

functions.phpへコピペし、★と★の間の文字列を修正するだけで以下２つを実現できます。

1. 管理画面に独自ページ追加
2. そのページにのみCSS, JavaScriptを適用

functions.php// これで管理画面に独自「マイページ」が表示されるようになる
function original_page() {
    add_menu_page('★マイページ★', '★マイページ★', 1, '★mypage★', 'original_menu', '', 6);
}
add_action('admin_menu', 'original_page');

// 「マイページ」に適用するphpファイルを用意すること！
function original_menu() {
    include '★mypage★.php';
}

// ↑で追加したページにのみCSS、JSを適用
function my_admin_style() {
    wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'★/css/my.css★' );
}
function my_admin_script() {
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'★/js/my.js★' );
}
add_action( 'admin_head-toplevel_page_★mypage★', 'my_admin_style' );
add_action( 'admin_head-toplevel_page_★mypage★', 'my_admin_script' );

修正時のポイント①：

７行目にも書きましたが、独自ページの実体となるphpテンプレートを用意してください。上記例のコードで実現される独自ページは、以下のようにmypage.phpというファイルに書いたコードが表示される状態になります。

修正時のポイント②：

19行目、20行目の★mypage★の部分は、３行目の★mypage★の部分と連動するので修正する際に気を付けてください。

これで、管理画面の独自ページにのみ指定したCSS、JSが適用されて無事解決するはずです！

僕がぶち当たっていた問題

ちなみに、僕がブチ当たった壁は、以下コードの最終行で示した「★★★」部分に指定するページ名は何になるのか！？という問題でした。

// まず、管理画面に独自「マイページ」を追加
function original_page() {
    add_menu_page('マイページ', 'マイページ', 1, 'mypage', 'original_menu', '', 6);
}
add_action('admin_menu', 'original_page');

function original_menu() {
    include 'mypage.php';
}

// ↑で追加したページにのみCSS、JSを適用
function my_admin_style() {
    wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my.css' );
}
function my_admin_script() {
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my.js' );
}
add_action( 'admin_head-★★★', 'my_admin_style' );
add_action( 'admin_head-★★★', 'my_admin_script' );

↑の例では、管理画面の「マイページ」には「mypage.php」というテンプレートが適用されています。

直感だと「admin_head-mypage.php」とすればイケるんじゃないかと思いましたが、それではダメ。

そこで色々調べた結果こう↓してダンプすると、

function original_page() {
    $hook = add_menu_page('マイページ', 'マイページ', 1, 'mypage', 'original_menu', '', 6);
    var_dump($hook);
}
add_action('admin_menu', 'original_page');

「admin_head-xxx」に書くべき答えが $hook に詰まって返ってくる、というオチでした↓