wordpressでサイトを構築中、jQueryを使ったコードを書き込むことがよくあるかと思います。
でも、動かない・・・。
ネットで「このコードをコピペしたら動くよ」っていうのを参考にきちんとやっているはずなのに。
でも、動かない・・・。

そんな時に役立つ「Google Chrome」を利用した原因の特定方法と、一般的な「$の別名定義」エラーに起因するトラブルの解決方法を紹介します。

１．エラー原因の特定

何はともあれコードが実行されない原因の特定を行います。Javascriptのエラーは「Google Chrome」のデベロッパーツール Developer Toolsを利用すると簡単に調べることができます。

以下の手順でエラーをチェックしてみてください。

(1) Developer Toolsを表示する

jQueryのコードが実行されないページを表示した状態で、「F12」キーを押します。

(2) ページ内で発生しているエラーを表示する

Developer ToolsのConsoleタブをクリックし、コンソール画面を表示します。

上記の手順で表示したコンソール画面に、
Uncaught TypeError: $ is not a function
というエラーが表示されている場合、コードが実行されないのは「$の別名定義」が原因です。

大抵のwordpressテーマでは、jQuery本体自体はすでに読み込まれているものの、jQueryと他のjavascriptライブラリがコンフリクトしないように、jQueryが使用する「$」という関数名の別名定義を未定義状態にしています。なので「$」マークを使って書かれたコードが効かなくなるのです。

２．解決策

解決策としては、以下の２つの方法があるかと思います。どちらでもお好きな方で対応してください。

(1) 「$」を再定義する

最もお手軽＆一般的な方法です。コピペしたjavascriptのコードをすべて以下のコードで囲ってしまいます。

jQuery(function($){

  // ここにコピペしてきたコードを貼り付ける

});

これだけで、別名定義を起因とするエラーは解決されます。

(2) コード中の「$」をすべて「jQuery」に書き換える

通常は上記の解決策でいいのですが、ついでにもう一つの解決策も示します。

「$」は定義されていないので、コピペしたコードの「$」と書かれた部分を、本来jQueryが使っている「jQuery」という関数名に書き換えてあげれば動きます。エディタの置き換え機能などを使えば一発でいくはず。