WordPressでjQueryが動かないときの対処法

「jQuery動かないんだけど！！」

約3時間、調べまくってやっと解決しました。

備忘録としてここに記しておきます。もう時間をムダにする人があらわれないことを願って……。

CDNを利用している場合

私はGoogle Hosted Librariesで配布されているjQueryを使っていましたが、記述に原因がありました。

[box class="blue_box"]<script type='text/javascript' src='http://ajax.googleapis.com/～'></script>[/box]

自分のブログが「https://～（保護された通信）」の場合、http:からはじまるものは読み込まれません。

よって、ここの記述を

[box class="blue_box"]<script type='text/javascript' src='//ajax.googleapis.com/～'></script>[/box]

に変更しました。

http/httpsを記述しないことにより、保護状態にかかわらず反映されるようになります。

読み込む順番に問題がある場合

jQueryが読み込まれる前にコードが書かれていると、うまく動かない場合があります。

[box class="blue_box"]<head> … <script type="text/javascript"> ( function( jQuery ) { コード } )( jQuery ); </script> … <script type='text/javascript' src='//ajax.googleapis.com/～'></script> … </head>[/box]

私は</head>の直前でjQueryを読み込んでいたので、コードの記述を</body>の前にくるように書き直しました。

[box class="blue_box"]<head> … <script type='text/javascript' src='//ajax.googleapis.com/～'></script> … </head> <body> … <script type="text/javascript"> ( function( jQuery ) { コード } )( jQuery ); </script> … </body>[/box]

自分のブログを右クリック→ページのソースの表示で、どの順番で読み込まれているのか確認してみてください。

$が競合している場合

WordPressあるあるのようです。

[box class="blue_box"]<script type="text/javascript"> ( function( $ ) { $("～").～(～(){ $～ }); } )( jQuery ); </script>[/box]

「$」を「jQuery」に書き直せばOKです。

[box class="blue_box"]<script type="text/javascript"> ( function( jQuery ) { jQuery("～").～(～(){ jQuery～ }); } )( jQuery ); </script>[/box]

おわりに：jQueryが動かないときはとにかく手を尽くしてみる

私は3時間かけていろいろなことを試してやっと動くようになりました。

どうしてもjQueryを使ってやりたいことがある場合、原因をつきとめるまで頑張ってみましょう。

（ただ半日が限界かな……）

[aside type="boader"]

参考にしたサイト（もっといろいろなパターンが書かれています！）

[/aside]