WordPressでjQueryを設置するための手順を忘れないようにまとめておきます。
jQueryの設置の仕方はいくつか選択肢がある
- jQueryを公式サイトよりダウンロードして任意のディリクトリに設置する。
- WordPressに組み込まれているjQueryを使う。
- Google AJAX Libraries API内のjQueryを使う。
(1)
WordPressなどCMSを使わない静的なサイトではjquery.jsをダウンロードして以下のようにhead要素に書いて設置します。
<script src="/任意のディリクトリ/jquery.js"></script>
(2)
しかし、WordPressはあらかじめ内部にjQueryが組み込まれています。下記のようにhead要素に記述すれば、簡単に呼びだすことができます。jquery.jsを公式サイトからダウンロードする必要はありません。…のはずなんですが…
<?php wp_enqueue_script('jquery'); ?>
(3)
実際には問題が発生してプラグインやJavaScriptが動作しない場合があるようです。自分の環境でもjQueryがうまく動きませんでした。詳しくはこちらのエントリーが参考になります。
別の手段としてGoogle AJAX Libraries API内のjQueryを使う方法をやってみます。
<?php wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '1.7.2'); ?>
これに切り替えたところ、自前で書いたスクリプトがうまく動作してくれました。(※自分でjquery.jsを設置しても大丈夫だったかもしれませんが未検証です。)jQueryの設置はこれで大丈夫のようです。
※wp_enqueue_script()というテンプレートタグを使っておりますが、これはjQueryや自作jsファイル、プラグインを使う場合などに誤動作が起きないようサポートしてくれる仕組みのようです。これについては別にエントリーを書きたいと思います。
wp_head()を忘れずに
最後にの直前にwp_head()を記述します。これを書いたところに先ほどのwp_enqueue_script()を使って書いた内容が出力されます。
<head>
…
…
<?php wp_head(); ?>
</head>
まとめ：どの設置方法がベスト?
ダウンロードして設置する手間ひまや、jQueryのバージョン管理を考えるとGoogleを使うのが自分的にはベストのような気がします。(※jQueryのバージョンアップに自動的に対応するurlの書き方があるようです)環境によってベストなやり方を選択しましょう。
※以下のエントリーを参考にさせていただきました。ありがとうございました。
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net