[WordPress] WordPress から JavaScript へ値を渡す方法

必要となる場面は少ないのですが、たまに 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:\/\/memocarilog.info\/"};
/* ]]> */
</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 でそれぞれの値を扱えるようになります。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ