動的なオプション値を、外部 javascript に適用する

javascriptファイルのオプション値は、大抵 head 要素内に、インラインのスクリプトを記述していることが多いと思います。

ダイナミックなオプション値は、

このようにテンプレート内でないと、WordPress 関数も記述できず、インラインのスクリプトが必要になるためです。

私自身も、このような記述を現在もしているわけですが、もっとすっきりと記述する方法がないか探していました。

wp_localize_script()を使うと、動的なオプション値を外部スクリプトに渡すことが出来るようなので、メモに残します。

試験的に、動的なフィールドを作ります。

functions.php

次に、スクリプトのインクルードと 動的なオプション値を設定します。
functions.php

add_action( ‘wp_enqueue_scripts’, ‘my_load_scripts’ );

外部スクリプトファイルを作ります。

js/my-script.js

このスクリプトを実行すると、以下のようになります。

tested twentytwelve

javascript-option

wp_localize_script()は、どんな働きをしているのか?

下のようにjavascriptの変数を出力しています

javascript内で、my_script_vars.css と指定してやると、関数で定義した値を取得できるようになります。

wp_localize_script()を使うと、PHPで記述できるので、文字列の翻訳もできるので( 関数名から察するとこっちがメインの使い方なのかもしれません )
テーマファイルのスクリプト部分の国際化で困っている人にはとても便利な関数になるかも、


コメントは受け付けていません。