wp_localize_scriptを使用して、特定のスクリプトハンドルなしでグローバルJS変数を作成することは可能ですか?


27

wp_enqueue_scriptを使用してjsスクリプトが適切にキューに登録されていない場合でも、何らかの方法でwp_localize_script()を使用して、すべてのjsファイルからアクセスできる特定のスクリプトハンドルなしでグローバルjs変数を作成できますか?

これは私が使用しているコードで、「ajaxscript」ハンドルのバリベールを作成するため、header.phpに直接含まれているjsファイルのオブジェクト「ajaxobject」にアクセスできません <script src="xxx" .... />

wp_register_script( 'ajaxscript', get_bloginfo( 'template_url' ) . '/js/ajaxscript.js', array(), $version );
wp_enqueue_script( 'ajaxscript' );
wp_localize_script( 'ajaxscript', 'ajaxobject',
    array( 
        'ajaxurl'   => admin_url( 'admin-ajax.php' ),
        'ajaxnonce' => wp_create_nonce( 'itr_ajax_nonce' )
    )
);

5
テーマ内にインラインJSを追加するだけです。wp_localize_scriptとにかくそういうことです。両方の方法で、変数はどのスクリプトからでもアクセス可能です
onetrickpony

3
スクリプトを制御している場合、ヘッドが適切にキューに入れられていないスクリプトにどのようになりますか?wp_localize_scriptの概念は、wp_enqueue_scriptで適切にロードしているスクリプトで利用できるようにすることです。どのような場合に、これらの変数を必要とするスクリプトをwp_enqueue_scriptからロードするのではなく、ヘッダーファイルに故意にロードしますか?
cale_b

@cale_b:header.php内にすでに含まれているスクリプトがあり、wp_enqueue_scriptでそのjsファイルをエンキューしようとすると、物事を壊し始める多くのスクリプトが含まれています。そのスクリプトファイルからajax呼び出しを行う必要があります。そのため、機能を壊して1つずつ修正する代わりに、迅速な解決策が必要でした。'wp_enqueue_script'の小さな変更のためにサイトのどの部分が壊れているのかさえ分かりません:(
Subharanjan

けっこうだ。ヒントとして、Firebug for Firefoxを入手すると、コンソールを使用してjavascriptエラーを監視/表示できます。トラブルシューティングのための貴重なツール。
cale_b

回答:


22

その場合、wp_localize_scriptを使用する代わりに、js変数をwp_headでフックすることができます。これにより、次のようにすべてのjsファイルで使用できるようになります。

function my_js_variables(){ ?>
      <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajaxnonce = '<?php echo wp_create_nonce( "itr_ajax_nonce" ); ?>';
      </script><?php
}
add_action ( 'wp_head', 'my_js_variables' )

また、@ Weston Ruterが提案したように、変数をjsonエンコードできます。

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo json_encode( array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}

4
あなたは使用する必要がありjson_encode、たとえば、ここに:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
ウェストンRuter

さて、これから先に追加します
Kumar

12

wp_head上記の答えが示すように、フックに必要なデータをエクスポートできます。ただし、json_encode生の値をJSリテラルに埋め込むのではなく、JSへのエクスポート用にPHPデータを準備するために使用する必要があります。

function my_js_variables(){
    ?>
    <script>
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ) ?>;
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ) ?>;
    var myarray = <?php echo json_encode( array( 
        'food' => 'bard',
        'bard' => false,
        'quux' => array( 1, 2, 3, ),
    ) ) ?>;
    </script>
    <?php
}
add_action ( 'wp_head', 'my_js_variables' )

を使用json_encodeすると簡単になり、文字列に引用符が含まれている場合に誤って構文エラーが発生するのを防ぎます。さらに重要なことは、json_encodeXSS攻撃を阻止することです。


1

結局これをやった。今すぐ動作します!! ありがとう@ dot1

function itr_global_js_vars() {
    $ajax_url = 'var itrajaxobject = {"itrajaxurl":"'. admin_url( 'admin-ajax.php' ) .'", "itrajaxnonce":"'. wp_create_nonce( 'itr_ajax_nonce' ) .'"};';
    echo "<script type='text/javascript'>\n";
    echo "/* <![CDATA[ */\n";
    echo $ajax_url;
    echo "\n/* ]]> */\n";
    echo "</script>\n";
}
add_action( 'wp_head', 'itr_global_js_vars' );

8
json_encodeJSONを手動で作成する代わりに使用する必要があります。
ウェストンルーター

私はjson_encode今使用しています:)ありがとう@WestonRuter !!
スハラハンジャン

0

これは私の最高の仕事ではありませんが、これは応答にデータを入れるためのもう1つの簡単な方法です。

<?php

/**
 * Add data to global context.
 *
 * @param string $name
 * @param mixed $value
 * @return mixed|array
 */
function global_js($name = null, $value = null)
{

    static $attached = false;
    static $variables = [];

    if (! $attached) {

        $provide = function () use (&$variables) {

            if (! empty($variables)) {

                echo("<script type=\"text/javascript\">\n\n");

                foreach ($variables as $name => $value) {

                    echo("    window['$name'] = JSON.parse('".json_encode($value)."');\n");
                    unset($variables[$name]);

                }

                echo("\n</script>\n");

            }

        };

        add_action('wp_print_scripts', $provide, 0);
        add_action('wp_print_footer_scripts', $provide, 0);

        $attached = true;

    }

    if (is_null($name) && is_null($value)) {
        return $variables;
    }

    return $variables[$name] = $value;

}

ウィンドウコンテキストにいくつかのJSデータを追加します。

<?php

global_js('fruits', ['apple', 'peach']);

// produces: `window['fruits'] = JSON.parse('["apple", "peach"]');`

これはヘッダースクリプトまたはフッタースクリプトのいずれかで機能し、繰り返されません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.