WordPressで、ブラウザのウィンドウサイズを判定して、サイズにより異なるjsファイルをロードさせる方法を調べてみました。
その際、wp_localize_script()という関数の存在を知り、調べたことをまとめてみます。
global.js
global.jsというjsファイルを作り、以下の記述でウィンドウサイズを判定してjsフィアイルをロードします。
// global.js
jQuery(function() {
//PC環境の場合
if (window.matchMedia( '(min-width: 769px)' ).matches) {
jQuery.ajax({
url: pc.url,
dataType: 'script',
cache: false
});
//モバイル環境の場合
} else {
jQuery.ajax({
url: mobile.url,
dataType: 'script',
cache: false
});
}
});
参考:レスポンシブデザイン対策!デバイスのサイズに応じてjava scriptを呼び変える
window.matchMedia()でウィンドウサイズを判定(IE9以下は未対応のようです)。
ajax()を使い、ロードしたいjsファイルのパスを記述するのですが、WordPressだと通常はテーマフォルダの中にjsファイルを置くと思ので、動的に記述する必要がありますよね。
jsファイルの中にパスを呼び出すテンプレートタグは記述できないので、以下のようにhead要素でwp_localize_script()を使ってglobal.jsに渡します。
head要素
<?php // ※head要素内に記述
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery-2.1.1.min.js','2.1.1');
wp_enqueue_script('global', get_template_directory_uri().'/js/global.js',array('jquery'));
wp_localize_script('global', 'pc', array('url' => get_template_directory_uri().'/js/pc.js'));
wp_localize_script('global', 'mobile', array('url' => get_template_directory_uri().'/js/mobile.js'));
?>
wp_localize_script()とは?
WordPressには、PHPからJavaScriptにデータを渡すwp_localize_scriptという関数がある。元々は多言語対応のために、JavaScriptに翻訳文字列を渡すための関数だった。現在では翻訳文字列にかぎらず、さまざまなデータをPHPからJavaScriptに渡す用途で用いられる。
引用:wp_localize_scriptの生成するJSONはHTMLエスケープされない
今回初めて知りましたが、なかなか便利な関数ですね。JavaScriptに渡したいデータをJSON形式に変換するそうです。エスケープされていないので注意する必要があるようです。
JSONはあまり使ったことが無いので詳しくないのですが、フォームから入力されたデータをJavaScriptに渡すような場合、変換されたJSONデータをを無害化した方がよい、ということでしょうか。