memocarilog

必要となる場面は少ないのですが、たまに WordPress から JavaScript へ値を渡したい時があるのでその方法のメモです。

WordPress から外部の JavaScript ファイルへ配列の値を渡す

WordPress のオプション値など PHP の値を外部の JS ファイルに渡したい場合は、wp_localize_script() という関数が WP には用意されているのでこれを使用します。

wp_localize_script() を使用すると PHP の連想配列を JS のオブジェクトとして扱えるようにしてくれます。

wp_localize_script の使用方法

functions.php 又は プラグインファイルに以下のように記入します。

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

$handle → 値を渡したい JS ファイルのハンドル名（JS ファイルを wp_enqueue_script() で登録した時のハンドル名）
$name → JS で受け取った時に PHP の配列が入るオブジェクト名（任意のもの）
$data → 渡したい PHP の配列の名前

具体的な使用例

以下のような中身の連想配列 $ex_array があったとして、

// JS に渡したい配列
$ex_array = array(
	'text' => 'example_text', 
	'url'   => 'https://memocarilog.info/'
); 

値を渡したい JS ファイル example.js が以下のように wp_enqueue_scripts フックで登録されているとします。

// 配列を渡したい JS ファイル
add_action( 'wp_enqueue_scripts', 'example_enqueue' );
function example_enqueue(){
	wp_enqueue_script( 'ex_js', plugin_dir_url( __FILE__ ) . 'js/example.js', array( 'jquery' ), false, true );
}

以下のように example_enqueue() 内に追加で記述するか、別途 wp_enqueue_scripts フックに対して wp_localize_script を実行するような記述をすると、$ex_array の値を JS のオブジェクト ex_js として example.js ファイルで扱えるようになります。

add_action( 'wp_enqueue_scripts', 'example_enqueue' );
function example_enqueue(){
	wp_enqueue_script( 'ex_js', plugin_dir_url( __FILE__ ) . 'js/example.js', array( 'jquery' ), false, true );
	$ex_array = array(
		'text' => 'example_text',
		'url'   => 'https://memocarilog.info/'
	); 
	wp_localize_script( 'ex_js', 'ex_js', $ex_array );
}

どんな仕組みで扱えるようになるのか

wp_localize_script() 関数を使用すると example.js を読み込む直前に、以下のようなコードを echo し ex_js に PHP の配列の値をエンコードして入れてくれます。

<script type='text/javascript'>
/* <![CDATA[ */
var ex_js = {"text":"example_text","url":"http:\/\/orientalpage.heteml.net\/memocarilog\/"};
/* ]]> */
</script>
<script type='text/javascript' src='http://example/wp-content/plugins/example/js/example.js?ver=4.5.3'></script>

example.js では、ex_js.text と ex_js.url でそれぞれの値を扱えるようになります。

PHP で JavaScript へ配列の値を渡す

1つのファイル内で JavaScript に直接配列の値を渡す場合には json_eocode() したものを echo して渡す方法もあります。

以下のコードを、header.php に直接記入するか wp_head アクションフックに登録するかして実行できます。

<?php
	$ex_array = array(
		'text' => 'example_text',
		'url'   => 'https://memocarilog.info/'
	); 
?>
<script type='text/javascript'>
	var ex_js = <?php echo json_encode( $ex_array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ); ?>;
</script>

wp_head アクションフックで使用する場合

functions.php 又はプラグインファイルに以下のように記入します。

add_action( 'wp_head', 'ex_array' );
function ex_array() {
	$ex_array = array(
		'text' => 'example_text',
		'url'   => 'https://memocarilog.info/'
	); 
	$ex_array = json_encode( $ex_array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT );
	echo '<script type="text/javascript">var ex_js = ' .$ex_array. '</script>'.PHP_EOL;
}

これで、外部ファイルの時と同じように ex_js.text と ex_js.url でそれぞれの値を扱えるようになります。