WordPressでPHPの値をJavaScriptに渡す方法

WordPressをカスタマイズしていると、PHPの値をJavaScriptに渡したいときがあります。WordPressにはそのための関数としてwp_localize_script()が用意されています。

テンプレートに直書きでPHPの値を出力しても同じことはできますが、wp_localize_script()を使った方がスクリプトの依存関係も含めて処理してくれるので便利で安全です。

この記事ではwp_localize_script()の詳しい使い方を説明していくので、使い方がよくわからない方は続きをご覧ください。

wp_localize_script()の詳細

<?php wp_localize_script( $handle, $name, $data ); ?>

パラメーター

$handle
データを使いたいスクリプトのハンドル名

$name
JavaScript内で使う変数名。名前が他の変数と重複しないように中。JavaScriptの変数なので-（ハイフン）は使えません。

$data
JavaScriptに渡すデータの配列。多次元配列も使用可能。

本家の解説はこちらになります。

関数リファレンス/wp localize script – WordPress Codex 日本語版

もともとは言語のローカライズ用に用意された関数のようです。ローカライズのAPIはPHPしかないのでそれをJavaScriptに渡す目的で使うことが想定されています。とはいえ、その他の用途にも問題なく使うことができます。

注意点

この関数は、変数を使うスクリプトを登録した後で呼び出す必要があります。そうしないと目的のスクリプトの変数を渡せないことがあるので注意してください。

使い方

PHP側には次のように記述します。この例ではテーマ設定の2つの値をJavaScriptに渡すことを想定しています。

function my_enqueue_scripts() {
  //テーマで読み込むJavaScript
	wp_enqueue_script(
		'my-theme-script',
		get_template_directory_uri() . '/js/my-theme.js',
		array( 'jquery' ),
		filemtime( get_template_directory() . '/js/my-theme.js' ),
		true
	);
	// JavaScriptで使いたい変数
	// 配列で定義
	$my_var = array('php_ver_1' => get_theme_mod('my_theme_settgin_1') );
		'bgColor' => get_theme_mod('background-color'),
		'logoColor' => get_theme_mod('logo-color'),
	);
	// 変数をスクリプトに登録
	wp_localize_script( 'my-theme-script', 'myVar', $my_var  );
}

JavaScript側では次のように使います。

var bgColor = myVar.bgColor;
var logoColor = myVar.logoColor;

いかがだったでしょうか？

使い方も簡単ですしスクリプトファイルの読み込み順も考える必要がないので便利なことがわかると思います。

PHPの値をJavaScriptに渡したいことって結構あると思うので、その場合はぜひwp_localize_script()を利用しましょう。

WordPressでPHPの値をJavaScriptに渡す方法

wp_localize_script()の詳細

使い方

関連記事

コメント

コメントする