wordpressを自作するとjQueryが動かない場合の解決策3つ【5分】

HTML、CSSファイルをwordpress化して自作するときにjQueryが適用されない場合の解決策をお伝えします。

jQueryが適用されないと、例えばアコーディオンが反応しない、ページトップボタンが機能しなくなってしまいます。

wordpressを自作するとjQueryが動かない場合の前提

  • HTML、CSSファイルのindex.htmlをindex.phpやhome.phpに変更している
  • index.phpのheader部分を、header.phpへ、footer部分をfooter.phpへ移植している

下記の状態になっているのが前提です。

wordpress化した後のheader.php

wordpress化した後のfooter.php

wordpress化した後のindex.php

wordpressを自作するとjQueryが動かない場合にまず確認しておくべきこと

wordpressのjQueryファイルに対して、$をjQueryに変える

wordpressのjqueryファイルに対して、functionで全体を囲いましょう。

以下の場合、click.functionを、functionで囲いましょう。

 

wordpressを自作するとjQueryが動かない場合の解決策

head内のscriptタグの中にjsファイルの内容を書く

jsファイルを読み込めないなら読み込まない!head内に書いてしまいましょう。

header.php

head内のjQueryライブラリ読み込みのGoogleのCDNを消す

header.php

以下のGoogleのCDNのjQueryライブラリを消しましょう。

CDN( Contents Delivery Network, CDN )は、jQuery ライブラリをファイルダウンロードではなくインターネット経由で読み込むもので、src=””内にURLを書いて表示します。

以下のようなjQueryサイトのCDNは害を与えませんでしたが、googleのCDNは読み込みを阻害してしまいました。理由は謎ですが、私はこれで直りました。

jQueryサイトのCDN

wordpress自体のjQueryの読み込みをやめる

この記述を入れることで、wordpressにもともと入っていたjQueryの読み込みをやめて、自分の書いたjQueryを読み込ませることができます。