[WordPress][wp_localize_script()]WordPressで外部JSファイルにテーマファイルのURLを渡す方法。

カテゴリー:
jQuery
WordPress

WordPressで、ブラウザのウィンドウサイズを判定して、サイズにより異なるjsファイルをロードさせる方法を調べてみました。

その際、wp_localize_script()という関数の存在を知り、調べたことをまとめてみます。

まずはコードを公開。global.jsというjsファイルを作り、以下の記述でウィンドウサイズを判定してjsフィアイルをロードします。

global.js

参考:レスポンシブデザイン対策!デバイスのサイズに応じてjava scriptを呼び変える

window.matchMedia()でウィンドウサイズを判定(IE9以下は未対応のようです)。

ajax()を使い、ロードしたいjsファイルのパスを記述するのですが、WordPressだと通常はテーマフォルダの中にjsファイルを置くと思ので、動的に記述する必要がありますよね。

jsファイルの中にパスを呼び出すテンプレートタグは記述できないので、以下のようにhead要素でwp_localize_script()を使ってglobal.jsに渡します。

head要素

参考:Javascriptでサイトのデータを扱う方法

wp_localize_script()とは?

WordPressには、PHPからJavaScriptにデータを渡すwp_localize_scriptという関数がある。元々は多言語対応のために、JavaScriptに翻訳文字列を渡すための関数だった。現在では翻訳文字列にかぎらず、さまざまなデータをPHPからJavaScriptに渡す用途で用いられる。

引用:wp_localize_scriptの生成するJSONはHTMLエスケープされない

今回初めて知りましたが、なかなか便利な関数ですね。JavaScriptに渡したいデータをJSON形式に変換するそうです。エスケープされていないので注意する必要があるようです。

JSONはあまり使ったことが無いので詳しくないのですが、フォームから入力されたデータをJavaScriptに渡すような場合、変換されたJSONデータをを無害化した方がよい、ということでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です