WordPressでjQueryを使うときの手順まとめ。wp_enqueue_script()とwp_head()

カテゴリー:
jQuery
WordPress
タグ:

WordPressでjQueryを設置するための手順を忘れないようにまとめておきます。

jQueryの設置の仕方はいくつか選択肢がある

  1. jQueryを公式サイトよりダウンロードして任意のディリクトリに設置する。
  2. WordPressに組み込まれているjQueryを使う。
  3. Google AJAX Libraries API内のjQueryを使う。


(1)
WordPressなどCMSを使わない静的なサイトではjquery.jsをダウンロードして以下のようにhead要素に書いて設置します。

(2)
しかし、WordPressはあらかじめ内部にjQueryが組み込まれています。下記のようにhead要素に記述すれば、簡単に呼びだすことができます。jquery.jsを公式サイトからダウンロードする必要はありません。…のはずなんですが…

(3)
実際には問題が発生してプラグインやJavaScriptが動作しない場合があるようです。自分の環境でもjQueryがうまく動きませんでした。詳しくはこちらのエントリーが参考になります。
別の手段としてGoogle AJAX Libraries API内のjQueryを使う方法をやってみます。

これに切り替えたところ、自前で書いたスクリプトがうまく動作してくれました。(※自分でjquery.jsを設置しても大丈夫だったかもしれませんが未検証です。)jQueryの設置はこれで大丈夫のようです。
※wp_enqueue_script()というテンプレートタグを使っておりますが、これはjQueryや自作jsファイル、プラグインを使う場合などに誤動作が起きないようサポートしてくれる仕組みのようです。これについては別にエントリーを書きたいと思います。

wp_head()を忘れずに

最後にの直前にwp_head()を記述します。これを書いたところに先ほどのwp_enqueue_script()を使って書いた内容が出力されます。

まとめ:どの設置方法がベスト?

ダウンロードして設置する手間ひまや、jQueryのバージョン管理を考えるとGoogleを使うのが自分的にはベストのような気がします。(※jQueryのバージョンアップに自動的に対応するurlの書き方があるようです)環境によってベストなやり方を選択しましょう。

※以下のエントリーを参考にさせていただきました。ありがとうございました。
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です