WordPress で、外部 JavaScript を読み込むプラグインを作成する際、"wp-head" をフックして <head> 内に書き込むことは良くあると思う。
ただ、これだと jQuery やら prototype.js やらのライブラリが必要なプラグインを複数アクティブにした場合、同じライブラリを複数読み込んでしまうことになる。
しかも、それぞれのプラグインが読み込んでいるライブラリのバージョンが違うと目も当てられない。
で、そんな混乱を避けるために WordPress 2.1 から導入されたのが wp_enqueue_script() 関数などの一連の関数群と "wp_print_scripts" と言うアクションフック。
これらを使えば、JavaScript ライブラリのロードは簡単になる。
以下、使用方法を簡単に。
wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false )
- $handle スクリプトの識別名
- $src スクリプトへのパス(オプション)
- $deps 依存するスクリプトの識別名を配列で列挙(オプション)
- $ver バージョン(オプション)
jquery や prototype.js, scriptaculous なんかはデフォルトで登録されているので、$handle を渡すだけでOK。
他にデフォルトで登録されているライブラリが調べたい人は wp-includes/script-loader.php を参照してみてください。
使用例
function addScripts() {
if (!is_admin()) {
wp_enqueue_script('jquery');
wp_enqueue_script('wp-lightpop', get_settings('site_url').'/wp-content/plugins/wp-lightpop/js/jquery.lightpop.js', array('jquery'), '0.5.0');
}
}
add_action('wp_print_scripts', 'addScripts');
こうすることで、<head> がこんな感じになる。
<script type='text/javascript' src='https://dogmap.jp/wp-includes/js/jquery/jquery.js?ver=1.2.3'></script> <script type='text/javascript' src='https://dogmap.jp/wp-content/plugins/wp-lightpop/js/jquery.lightpop.js?ver=0.5.0'></script>
他のプラグインで wp_enqueue_script('jquery'); していても jquery.js は、1度しか書き出されない。
しかも wp_enqueue_script('prototype'); されていたら、コンフリクトが発生しないようにロード順を調整してくれるのでチョー便利。
書き出されるスクリプトの後ろに ?ver=hoge が着くのが嫌な場合は "script_loader_src" フィルタをフックしてやれば、好きなように加工できる。
ピンバック: jQuery.autopagerをWordPressで利用して、ajaxで追加記事を読み込み、その後別のjsを動かす使い方 | Shinichi Nishikawa's blog