お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

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

投稿日:2017年10月2日 更新日:



「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]

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2019 All Rights Reserved.