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

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'));
?>

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

wp_localize_script()とは?

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

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

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

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

コメントをどうぞ!