wp enqueue script｜WordPressでjQueryを使う

2009/05/25

こんにちは。きんくまです。

wpにはwp enqueue scriptという関数があるみたいです。
⇒Function Reference/wp enqueue script

これは他のプラグインやテーマに干渉されずに、安全にjsライブラリや自作jsファイルを読み込む関数みたい。
この説明が詳しいです。
⇒WordPress : Using Javascript libraries with your plugin or theme

私はjQueryを使いたいので
header.phpの中の

<?php wp_head(); ?>

の直前に（これ重要）、以下を書きました。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('kinkuma', '/wp-content/themes/kinkuma_design/kinkuma_common.js'); ?>

これをやると、wp側で読み込む順番を考慮してくれたりする。themesファイルの中に入っているkinkuma_common.jsは自作のjsファイルです。

var ClassA = function(){
  this.$ = jQuery;
};
ClassA.prototype = {
  init: function(){
    this.$('h1').hide();
  }
};

jQuery(document).ready(function($) {
  //このfunction内のみ$は有効
  //他はjQueryでグローバル変数としてアクセス可能
  $('.description').click(function(){
    var myclass = new ClassA();
    myclass.init();
  });
});

変数「$」はPrototype.jsとかで使うから、jQueryではそのまま使えないように設定されていて、グローバルのjQueryという変数名でアクセスできる。
jsの自作クラスの中で使うのに、jQueryと打つのも面倒なのでインスタンスの変数にあてはめてしまってアクセスするようにしたのが、上記のプログラム例です。

⇒Using jQuery with Other Libraries

このwpのカスタマイズは英語を勉強しながらやっています。
今感じているメリットとしては、根っこの情報をつかめるので、あまりネットをうろうろしないですむんで、時間の節約になる。ということかな。
…ウソです。今は辞書をひきひきしながらだから、あんまり変わらないかも。ただ、細かいニュアンスはよくわかんないけど、大筋が読めればプログラム自体はなんとかなりそうですね。