admin_enqueue_scripts()

Q: admin_enqueue_scripts と wp_enqueue_scripts の違いは？

admin_enqueue_scripts は管理画面専用、wp_enqueue_scripts はフロントエンド専用。

Q: admin_enqueue_scripts は管理画面のどのページでも実行される？

はい。ただし $hook で特定のページのみ適用することが可能。

Q: スクリプトを管理画面のフッターで読み込むには？

wp_enqueue_script() の第5引数に true を指定する。

2025/3/17 Monday

admin_enqueue_scripts は、WordPress の管理画面にスクリプトやスタイルシートを適切に読み込むためのフックです。このフックを利用することで、特定の管理ページのみでスクリプトやスタイルを適用でき、不要なリソースの読み込みを防ぐことができます。本記事では、admin_enqueue_scripts の基本的な使い方からカスタマイズ方法、よく使う関連タグ、トラブルシューティングまで詳しく解説します。

機能の説明

admin_enqueue_scripts は、管理画面のスクリプトやスタイルシートをエンキューするために使用されます。主に以下のような場面で利用されます。

プラグインやテーマの設定ページに独自の JavaScript や CSS を追加したいとき
特定の管理画面（投稿編集ページなど）にカスタムスクリプトを適用したいとき
管理画面の特定の機能を拡張したいとき

このフックは wp_enqueue_script() や wp_enqueue_style() と組み合わせて使用します。

シンプルなコード例

以下のコードは、管理画面に独自の JavaScript ファイルを追加する最もシンプルな例です。

function my_admin_enqueue_scripts() {
    wp_enqueue_script('my-custom-admin-script', plugin_dir_url(__FILE__) . 'js/admin-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

wp_enqueue_script() を使って admin-script.js を読み込んでいます。
依存関係として jquery を指定しています。
フッターで読み込むために true を指定しています。
admin_enqueue_scripts フックを使用してスクリプトを管理画面に追加しています。

使い方の説明

admin_enqueue_scripts には、条件分岐を加えて特定の管理画面のみでスクリプトを読み込むことも可能です。

特定の管理画面でのみスクリプトを読み込む

function my_admin_enqueue_scripts($hook) {
    if ($hook != 'toplevel_page_my_plugin_settings') {
        return;
    }
    wp_enqueue_script('my-custom-admin-script', plugin_dir_url(__FILE__) . 'js/admin-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

$hook は現在の管理画面のスラッグを取得します。
toplevel_page_my_plugin_settings 以外のページではスクリプトを読み込まないようにしています。

一緒に使うことが多い関連タグ

`wp_enqueue_script()`

admin_enqueue_scripts 内でスクリプトを追加する際に必ず使われます。

wp_enqueue_script('script-handle', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);

`wp_enqueue_style()`

管理画面の CSS を追加する際に使用されます。

wp_enqueue_style('custom-admin-style', get_template_directory_uri() . '/css/admin-style.css');

追加情報で取得したい場合

管理画面のスクリプトやスタイルの情報を取得するには、以下の方法を使用できます。

現在の管理ページを判別する

function my_admin_enqueue_scripts($hook) {
    global $pagenow;
    if ($pagenow == 'edit.php' && isset($_GET['post_type']) && $_GET['post_type'] == 'custom_post') {
        wp_enqueue_script('custom-admin-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
    }
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

想定されるトラブル