管理メニュー

PHP

【WordPress】admin_enqueue_scriptsアクション等の使い方と重要な注意点

更新日：2023/01/19

管理画面にスクリプトやスタイルを出力するときは、admin_enqueue_scripts、admin_print_styles、admin_print_scripts等のアクションフックを使用します。
今回はこれらのアクションフックの使い方と、注意点についてお伝えします。

構文と使用例

管理画面にスクリプトやスタイルを出力するアクションフックの構文と、使用例をお伝えします。
ここで挙げた例は、次のコードで管理画面を追加したと想定します。

add_menu_page('設定テスト', '設定テスト', 'manage_options' , 'my_test_option'
    , 'echo_my_test_option','',3);

admin_enqueue_scripts

admin_enqueue_scriptsアクションフックは、wp_enqueue_script()やwp_enqueue_style()を使って管理画面に出力するスクリプトやスタイルをキューに登録する関数を登録します。

add_action( 'admin_enqueue_scripts', $callback );

引数$callbackは呼び出されるコールバック関数で、引数を一つ受け取ります。

$hook： 表示される管理ページを識別する文字列

$hookはページの位置（親メニューか子メニューか等）で決まりますが、最後にページのスラッグが追加されます。
（ページのスラッグはadd_menu_page()の４番目の引数です。）

add_action('admin_enqueue_scripts',function ($hook){
  if('my_test_option' !== substr( $hook , -strlen('my_test_option') )) return;
  wp_enqueue_script('my_test_option',get_template_directory_uri().'/my_test_option.js');
  wp_enqueue_style('my_test_option',get_template_directory_uri().'/my_test_option.css');
});

admin_print_styles、admin_print_scripts

admin_print_stylesとadmin_print_scriptsアクションフックは、echo等で全ての管理画面にスタイルまたはスクリプトを出力することを目的としています。

add_action( 'admin_print_styles', $callback );
add_action( 'admin_print_scripts', $callback );

引数$callbackは呼び出されるコールバック関数で、引数はありません。

add_action('admin_print_styles',function (){
?>
<style>
body{ font-size:18px; }
</style>
<?php
});

add_action('admin_print_scripts',function (){
?>
<script>
console.log( "test" );
</script>
<?php
});

admin_enqueue_scriptsのようにフック名の確認を行いたいときは、$hook_suffixをglobalで取り込みます。

add_action('admin_print_scripts', function () {
  global $hook_suffix;
  if ('my_test_option' !== substr($hook_suffix, -strlen('my_test_option'))) return;
  echo '<script>console.log("hello!")</script>';
});

ただし、フック名毎に呼び出すことを目的としたadmin_print_styles-{$hook_suffix}、admin_print_scripts-{$hook_suffix}アクションフックが用意されています。

フック名の確認が面倒ですが、本来の使い方としてはそちらを使用したほうがいいかもしれません。

admin_print_styles-{$hook_suffix}、admin_print_scripts-{$hook_suffix}

admin_print_styles-{$hook_suffix}、admin_print_scripts-{$hook_suffix}は、アクションフックはecho等で全ての管理画面にスタイルまたはスクリプトを出力することを目的としています。
{$hook_suffix}は、フック名に置き換えてください。

add_action( 'admin_print_styles-{$hook_suffix}', $callback );
add_action( 'admin_print_scripts-{$hook_suffix}', $callback );

引数$callbackは呼び出されるコールバック関数で、引数はありません。

add_action('admin_print_scripts-toplevel_page_my_test_option', function () {
  echo '<script>console.log("hello!")</script>';
});

注意点

admin_enqueue_scriptsフックでフック名を確認しないと、全ての管理画面にスクリプトやスタイルが出力されます。
必要が無いスクリプトとスタイルを読み込むのは避けたいところです。

また特定の管理画面用に作成したスクリプトは、他の管理画面でエラーを出力する可能性があります。
場合によっては想定外の影響を与えることもあります。

フック名の確認は、必ず行うようにしましょう。

フック名の確認方法

admin_enqueue_scriptsアクションのコールバック関数に渡されるフック名を確認したいケースもあります。
理想としてはデバッガでブレークポイントを設定して確認できればいいのですが、それが難しいこともあります。

そこでいくつかの方法を考えてみます。

ブラウザのデバッグコンソールで確認

一つ目は、scriptタグを出力してブラウザのコンソールにフック名を出力する方法です。
次のコードを記述します。

add_action('admin_enqueue_scripts',function ($hook){
 echo '<script>console.log("$hook='.$hook.'")</script>';
});

目的の管理画面を開いた後、ブラウザのデベロッパーツールを開いてコンソールを確認してください。

管理画面内に表示

二つ目は、管理画面に内にフック名を出力する方法です。
全てのページに表示されるので、複数の人員で管理画面を使用しているときは通達等が必要なため、少し使いにくいかもしれません。

add_action('admin_notices',function (){
 global $hook_suffix;
 if( !current_user_can( 'manage_options') ) return;
 echo '<div class="notice notice-info"><p>フック名 : ' . $hook_suffix . '</p></div>';
});

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。