web-dev-qa-db-ja.com

カスタムページテンプレートでwp_localize_scriptを使用する方法

ホームページに割り当てられたhomepageというテンプレートと、スクリプトタグを持つテンプレートの下部があります。今、私はそのスクリプトタグで私のJSONを使用したいです。

home-template.php

add_action('wp_enqueue_scripts', 'pass_var_to_js',99);
function pass_var_to_js() {

// Localize the script with new data
$translation_array = array(
'popularDestination' => json_encode($data['POPULAR DESTINATIONS']),
);
wp_localize_script( 'home_page_json', 'home', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'home_page_json' );
}

<script type="text/javascript">
 var data = home.popularDestination;
</script>

しかし私のページにwp_localize_scriptがロードされていない私はview-sourceをチェックします。表示されません。

悪い英語をごめんね。

javascriptwp-enqueue-scriptjson
1
Bhautik

提供されたコードに基づいて、 wp_localize_script がどのように機能するかを誤解しているようです。関数のシグネチャは次のようになります。

wp_localize_script( $handle, $name, $data );

$handleは、登録またはキューに入れたJavaScriptファイルの名前です。 の前に wp_localize_scriptを呼び出す。 コーデックスの例 を見てください（以下に行番号を追加しました）。

1: <?php
2: 
3: // Register the script
4: wp_register_script( 'some_handle', 'path/to/myscript.js' );
5: 
6: // Localize the script with new data
7:  $translation_array = array(
8:    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
9:    'a_value' => '10'
10: );
11: wp_localize_script( 'some_handle', 'object_name', $translation_array );
12: 
13: // Enqueued script with localized data.
14: wp_enqueue_script( 'some_handle' );

  1. 上記の4行目を見てください。最初にJavaScriptファイルが$handle'some_handle'に登録されています。

  2. 次に、11行目でwp_localize_script()を使って4行目で登録したスクリプトハンドル'some_handle'のローカライズデータを登録します。

  3. 最後に、14行目で、JavaScriptファイル（4行目に登録されています）がエンキューされます。 wp_localize_script()は4行目で登録されたものと同じ$handleを渡されたので、WordPressはwp_enqueue_script( 'some_handle' );が呼ばれる各ページのローカライズされたデータを自動的に含みます。

つまり、登録済みのJavaScriptファイルにwp_localize_script と を使用する必要があります。あなたが現在やっているようにそれ自体ではありません。

notesセクション からのこの引用は、ほぼ同じことを言っています。

重要です。 wp_localize_script（）は、スクリプトがwp_register_script（）またはwp_enqueue_script（）を使用して登録された後に呼び出さなければなりません。

また、私はあなたがあなたの$dataをjson_encode()する必要があるとは思わない。 WordPressはあなたのためにそれをするべきです。

3
DaveLak