フリーランスが会社員収入を継続して得られないパターン7つ

LPをwordpress化するときにjqueryが適用されない

バンコクのエンジニア講座であるisara3期の課題でみんながつまづいた、

【wordpressテーマ自作】LPをwordpressのテーマ化するときにjqueryが適用されない場合の解決策をお伝えします。

jqueryが適用されない場合は、例えばアコーディオンが反応しない、pageTopアイコンが機能しなくなってしまいます。

前提

  • LPのindex.htmlをindex.phpに変更している
  • index.phpのheader部分を、header.phpへ、footer部分をfooter.phpへ移植している

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

header.php

footer.php

index.php

確認事項

1.$をjQueryに変えましょう。

2.functionで全体を囲いましょう。

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

 

解決策

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

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

header.php

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

header.php

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

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

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

jQueryサイトのCDN

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

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