無料オンライン勉強サービス10選おすすめ

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

 

jQueryが動かない場合に確認しておくべきこと

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

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

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

 

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

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

この記述を入れることで、WordPressにもともと入っていたjQueryの読み込みをやめて、自分の書いたjQueryを読み込ませましょう。