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

- WordPress -
2019.11.25
WordPress

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

  1. WordPress管理画面に独自に画面を作った
  2. その画面だけに特定のCSS、JavaScriptを適用させたい。

①は簡単なんですが、②を解決するのに時間が掛かったので同じ問題に悩む人の参考になれば。

コピペ&編集だけで済むので簡単です!

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

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

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

  1. 管理画面に独自ページ追加
  2. そのページにのみCSS, JavaScriptを適用
// これで管理画面に独自「マイページ」が表示されるようになる
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' );

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

WordPress管理画面に独自ページ

修正時のポイント②:
19行目、20行目の★mypage★の部分は、3行目の★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 に詰まって返ってくる、というオチでした↓

WordPress管理画面に独自ページ

以下サイト様の記事が参考にして解決しました。ありがたやm(_ _)m

参考admin_headを特定のページでのみ使用するにはhook_suffixを知るべし