wp_add_inline_script() の使い方|説明・引数・注意点

説明

wp_add_inline_script() は、登録済みのスクリプトの前後に、インラインJavaScriptを追加する関数です。

基本構文

wp_add_inline_script( string $handle, string $data, string $position = 'after' ): bool

引数

  • $handle:対象のスクリプト識別名
  • $data:追加するJavaScript(script タグは不要)
  • $position:before または after

戻り値

成功すれば true。

使い方(サンプル)

wp_add_inline_script( 'my-script', 'const MyConfig = ' . wp_json_encode( array( 'debug' => false ) ) . ';', 'before' );

注意点

  • 対象のスクリプトが登録されていないと追加できません。
  • PHPの値を渡すときは wp_json_encode() を使うと安全です。

実務での使いどころ

  • スクリプトの前に、設定値などの変数を定義するとき(before)。
  • スクリプトの後に、初期化の処理を追加するとき(after)。

よくあるミスと対処

  • <script> タグを含めて渡している。タグを渡すと、警告が出て、タグが取り除かれる。JavaScriptのコードだけを渡す。
  • 対象のハンドルが、登録されていない。登録されていないと、false が返り、追加されない。
  • 値を、PHPで文字列として連結し、エスケープが不十分になる。wp_json_encode() を使う。

NG例

wp_add_inline_script( 'my-script', '<script>var a = 1;</script>' ); // 警告が出て、タグが取り除かれる

OK例

wp_add_inline_script( 'my-script', 'const a = ' . wp_json_encode( $value ) . ';', 'before' );

使い分け早見表

関数 特徴
wp_add_inline_script() インラインのJavaScriptを追加する
wp_localize_script() PHPの配列を、JavaScriptのオブジェクトとして渡す(トップレベルの数値・真偽値は、文字列になる)
wp_add_inline_style() インラインのCSSを追加する

関連項目

wp_localize_script()、wp_add_inline_style()

公式リファレンス:wp_add_inline_script() | Function | WordPress Developer Resources

コメント

タイトルとURLをコピーしました