概要
wp_add_inline_script関数は、WordPressのプラグインやテーマ内で、登録済みのスクリプトにインラインスクリプトを追加するために使用されます。この関数は、ページ内でJavaScriptコードを直接埋め込むことができるため、スクリプトのロードを効率化し、依存関係の順序を管理しやすくします。
通常、この関数は次のような機能を実装する際に使用されます。
- ページ特有の設定をJavaScriptで反映する
- 特定の条件に基づいて動的に値を変更する
- スクリプトの初期設定を行う
- DOM操作を行う前に準備を整える
- JavaScriptライブラリのカスタマイズを行う
- AJAXリクエストの設定を行う
- グローバルJavaScript変数の設定
- JavaScriptエラーを防ぐためのコードを追加する
構文
wp_add_inline_script( string $handle, string $data, string $position = 'after' )
パラメータ
$handle(string) : すでに登録されているスクリプトのハンドル名$data(string) : 追加するインラインスクリプト$position(string) : スクリプトを挿入する位置 (‘before’ または ‘after’ のいずれか)
戻り値
この関数は真偽値を返し、成功した場合は真(true)、失敗した場合は偽(false)を返します。
関連する関数
使用可能なバージョン
この関数はWordPress 4.5.0以降で利用可能です。
コアファイルのパス
wp-includes/script-loader.php
サンプルコード
サンプルコード 1: 基本的なインラインスクリプトの追加
function my_enqueue_scripts() {
wp_enqueue_script('my-script', 'path/to/my-script.js', array(), '1.0.0', true);
wp_add_inline_script('my-script', 'console.log("Hello, World!");');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
このサンプルでは、my-script.jsというスクリプトに対して”Hello, World!”というメッセージをコンソールに出力するインラインスクリプトを追加しています。
サンプルコード 2: 動的データの追加
function my_enqueue_dynamic_script() {
wp_enqueue_script('dynamic-script', 'path/to/dynamic-script.js', array(), '1.0.0', true);
$data = json_encode(array('ajax_url' => admin_url('admin-ajax.php')));
wp_add_inline_script('dynamic-script', 'var myData = ' . $data . ';');
}
add_action('wp_enqueue_scripts', 'my_enqueue_dynamic_script');
このサンプルでは、admin-ajax.phpのURLを含む動的データをインラインスクリプトとして追加しています。
サンプルコード 3: 特定のフラグの設定
function my_enqueue_flags() {
wp_enqueue_script('flag-script', 'path/to/flag-script.js', array(), '1.0.0', true);
wp_add_inline_script('flag-script', 'var isUserLoggedIn = true;');
}
add_action('wp_enqueue_scripts', 'my_enqueue_flags');
この例では、ユーザーがログインしているかどうかを示すフラグをインラインスクリプトとして設定しています。
サンプルコード 4: jQueryを用いたDOMの操作
function my_jquery_script() {
wp_enqueue_script('jquery');
wp_add_inline_script('jquery', 'jQuery(document).ready(function($) { $("#myElement").hide(); });');
}
add_action('wp_enqueue_scripts', 'my_jquery_script');
このサンプルでは、jQueryを使用してDOMが読み込まれたときに特定の要素を非表示にするインラインスクリプトを追加しています。
サンプルコード 5: AJAXリクエストの設定
function my_ajax_script() {
wp_enqueue_script('ajax-script', 'path/to/ajax-script.js', array('jquery'), '1.0.0', true);
wp_add_inline_script('ajax-script', 'var ajax_object = { ajax_url: "' . admin_url('admin-ajax.php') . '" };');
}
add_action('wp_enqueue_scripts', 'my_ajax_script');
この例では、AJAXリクエストを行うために必要なURLを含むオブジェクトをインラインスクリプトとして追加しています。
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | 〇 |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head | 〇 |
この関数は特定のワードプレスバージョンで非推奨又は削除された情報はありません。