コンテンツへスキップ
ホーム » WordPressでjQueryを使うときの手順まとめ。wp_enqueue_script()とwp_head()

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

  • by

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

コメントをどうぞ!