【LP・ワードプレス】JavaScript(jQuery)の読み込み方法【動かない】

man

困ってる人

作ったサイトをワードプレス化してみたんだけど、なぜかJavaScript(jQuery)が読み込まれない
何で動かないんだろう
普段は問題なく動いてるんだけどなぁ


こんにちは、ikuxxと申します。

今回の内容は、jQueryでのアニメーションが沢山あるようなランディングページ(LP)を作る際に起こる事で、

いざ、LPにワードプレスを組み込んでみたところ、なぜかJavaScriptが動かない、

といった場合の対策方法をまとめてみました。


ワードプレスでJavaScript(jQuery)が動かない、読み込みが出来ない場合

① まずは、原因を特定するところから始める:デベロッパーツールでJavaScript(jQuery)のエラーを確認

まず、今回ワードプレスでJavaScript(jQuery)が読み込めない場合に確認する点は3つ。

  • JavaScriptの読み込みが出来ない原因を特定
  • JavaScriptファイルの読み込み方法について
  • ワードプレスでのjQueryの書き方について

  • まずは始めに、どこに原因があるのかを調べて、一つ一つ問題を潰していく必要があるので、

    まずは「Google Chrome」「デベロッパーツール」を使って、きちんとJavaScriptのファイルが読み込まれているかを確認し、何かしらエラーが出ているかを調べる。

    「デベロッパーツール」を開いて「Console」タブを確認

    ※「デベロッパーツール」を開く方法は、右クリックから、もしくはWindowsの場合は「F12」

    そうすると、何かしらエラーがある場合は、

    Failed to load resource: the server script.js:1 responded with a status of 404 (Not Found)

    や、

    GET http://*****.com/js/script.js net::ERR_ABORTED 404 (Not Found)

    などと表示されます。

    この場合はつまり「script.js」というファイルが読み込めない状態というエラーメッセージで、

    ここでもし何もエラーが出ていなければ、他の部分に問題がある可能性があるという事なので、今度は他の原因を探ってみる必要があります。

    通常のHTMLとワードプレスの場合だと、jQueryの書き方が違ってたりもしますので、この場合は、そこら辺も後々確認しないといけません。

    ② WordPress(ワードプレス)でのJavaScript(jQuery)ファイルの読み込み方法

    例えば、ランディングページ(LP)と呼ばれる1枚で完結するようなものを作る場合は、

    「header.php」「footer.php」というものがなくても、サイト自体は作れるのですが、

    ワードプレスでJavaScript(jQuery)のファイルを読み込む場合、

    これらは「header.php」「footer.php」を作る作らないに限らず、

    「headの閉じタグの手前」に、

    そして、bodyの閉じタグの手前に

    を追加する必要があります。

    例えば、普通のHTMLのまま外部ファイルを読み込む場合、(bodyの閉じタグ)の手前に、

    これらを書くだけでOKですが、

    ただ、これらをWordPressで使用するとなると、

    の部分を、

    に置き換えて「functions.php」にファイルを読み込む記述を書かなきゃダメ。

    この2つをきちんとHTML内(index.php)に書いておかないと「functions.php」に書かれた命令が上手く読み込まれないんですね。

    なので、これら2つは必須。

    ワードプレスでCSSファイルの読み込み方法

    ワードプレスでCSSファイルを読み込む場合は、HTMLのヘッダー部分に

    でOK。

    ただ、ワードプレスで推奨されているのは、CSS、JavaScriptは「functions.php」に書いて読み込ませること。

    なので、CSSを読み込む場合もヘッダーにそのまま書くのではなく出来れば「functions.php」に書いて読み込ませた方がいいみたい。

    そして「functions.php」に書く内容というのが、

    もしくは、↓ こんな感じで短く書いて、

    これでもOK。

    wp_enqueue_style関数:スタイルシートを読み込む為のもの

    wp_enqueue_script関数:JavaScript(jQuery)を読み込むためのもの

    wp_enqueue_script関数は「functions.php」に記述

    「functions.php」に独自の関数を作り、その中で読み込ませ、add_actionで動作させる。

    add_actionの、wp_enqueue_scriptsはJavaScriptだけでなくCSSの呼び出しまでやってくれる。

    ③ WordPressにおけるjQueryの書き方

    そして「デベロッパーツール」でエラーも出ないし、ファイルもきちんと読み込まれている、

    にも関わらず、jQueryが読み込まれないという場合は、jQueryの書き方に問題がある場合が多い。

    通常のjQueryの書き方だと、

    ただし、HTMLとWordPressの場合では、jQueryの書き方が違っていて、

    こうやって書かないとダメ。

    僕は、散々つまづいた結果、最後にこれを試したところ上手くいきました。

    最後にまとめ

    という事で、最後に内容をまとめると、

  • エラーの原因を特定
  • JavaScriptファイルの読み込み方法を確認
  • WordPressでのjQueryの書き方を確認

  • これらを上から順番に潰していけば、どこかしらで原因が特定出来るのではないでしょうか?

    特に、ランディングページ(LP)を作る際には分割するファイルが少ないので、

    どこかしらで適当に書いちゃって、その結果ファイルが読み込まれなかったり、動かないという単純なエラーが出てくるので注意。

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール