WordPressを利用してWebサイトを構築している場合でjQueryを使用するときにはファイルの読み込みや記述方法に少し気を付ける必要があります。場合によっては、jQueryが動作しないこともあります。

jQuery本体の読み込み

通常、jQuery本体を読み込む場合はそのパスを指定して使用しますが、WordPressには元々、jQueryがインストールされています。何かWordPressのプラグインを使用する場合、それを動かすために、もともとインストールされているjQueryが自動的に出力されたりします。そのため、いつも通り自分でパスを指定して読み込ませてしまうと2回もjQueryを読み込むことになってしまいます。このようなことを避けるためにWordPressでサイトを作っている場合は、もともとインストールされているファイルを使うようにします。
インストールされているjQueryを読み込ませるには、以下のように記述して使用します。

<?php
wp_enqueue_script( "jquery" );
wp_head();
?>

//</body>直前で読み込ませる場合
<?php
wp_enqueue_script( "jquery" );
wp_footer();
?>

このように「wp_enqueue_script()」という関数を使って「jquery」というパラメータを指定することでインストールされているjQueryを読み込ませることができます。

jQueryの記述方法

通常、jQueryでコードを書いていくときは「＄」を使って記述していきますが、WordPressではこれを使用するのは避けます。それはjQuery以外のもprototype.jsが利用されているからです。そのため、jQueryで「＄」を使ってしまうと、お互いにコンフリクト（競合）してしまうことがあります。これを避けるためにjQueryを記述するときには以下のような形でコードを書いていきます。

jQuery(function() {
  ～中身～
});

以上が、WordPressでjQueryを読み込む場合に気を付けておくべき内容となります。

おすすめの記事