【LP・ワードプレス】JavaScript(jQuery)の読み込み方法【動かない】 — よろろぐ
よろろぐ >
プログラミング > 【LP・ワードプレス】JavaScript(jQuery)の読み込み方法【動かない】
【LP・ワードプレス】JavaScript(jQuery)の読み込み方法【動かない】
2019.03.31 / 更新日:2020.10.18
困ってる人
こんにちは、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の閉じタグ)の手前に、
|
// JavaScriptの読み込み <script src="js/script.js"></script> <script src="js/jquery.*****.js"></script> |
これらを書くだけでOKですが、
ただ、これらをWordPressで使用するとなると、
|
// JavaScriptの読み込み <script src="js/script.js"></script> <script src="js/jquery.*****.js"></script> |
の部分を、
に置き換えて「functions.php」にファイルを読み込む記述を書かなきゃダメ。
|
<?php wp_head(); ?> と <?php wp_footer(); ?> |
この2つをきちんとHTML内(index.php)に書いておかないと「functions.php」に書かれた命令が上手く読み込まれないんですね。
なので、これら2つは必須。
ワードプレスでCSSファイルの読み込み方法
ワードプレスでCSSファイルを読み込む場合は、HTMLのヘッダー部分に
|
// 通常のCSSの読み込み方法 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/responsive.css"> |
でOK。
ただ、ワードプレスで推奨されているのは、CSS、JavaScriptは「functions.php」に書いて読み込ませること。
なので、CSSを読み込む場合もヘッダーにそのまま書くのではなく出来れば「functions.php」に書いて読み込ませた方がいいみたい。
そして「functions.php」に書く内容というのが、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
// WordPressでJavaScript, CSSを読み込む記述 <?php // CSSの読み込み function register_stylesheet() { // 読み込むCSSを登録する wp_register_style('style', get_template_directory_uri().'/css/style.css'); wp_register_style('responsive', get_template_directory_uri().'/css/responsive.css'); } function add_stylesheet() { // 登録したCSSを以下の順番で読み込む register_stylesheet(); wp_enqueue_style('style', '', array(), '1.0', false); // ページの末尾で読み込ませるならtrue, head内ならfalse(デフォルトはfalse) wp_enqueue_style('responsive', '', array(), '1.0', false); } add_action('wp_enqueue_scripts', 'add_stylesheet'); // JavaScriptの読み込み function register_script() { // 読み込むJavaScriptファイルを登録 wp_register_script('script', get_template_directory_uri().'/js/script.js'); wp_register_script('*****', get_template_directory_uri().'/js/jquery.*****.js'); } function add_script() { // 登録したファイルを以下の順番で読み込む register_script(); wp_enqueue_script('script', '', array(), '1.0', false); wp_enqueue_script('*****', '', array(), '1.0', false); } add_action('wp_print_scripts','add_script'); |
もしくは、↓ こんな感じで短く書いて、
|
// WordPressでJavaScriptを読み込む記述 // JavaScriptの読み込み function add_script() { wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array(), '1.0', false); wp_enqueue_script('*****', get_template_directory_uri().'/js/jquery.*****.js', array(), '1.0', false); } add_action('wp_enqueue_scripts','add_script'); |
これでも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の書き方だと、
|
// 通常のjQueryの書き方 $(function() { この中に命令を書いていく }); |
ただし、HTMLとWordPressの場合では、jQueryの書き方が違っていて、
|
// WordPressでのjQueryの書き方 jQuery(function($) { この中に命令を書いていく }); |
こうやって書かないとダメ。
僕は、散々つまづいた結果、最後にこれを試したところ上手くいきました。
最後にまとめ
という事で、最後に内容をまとめると、
エラーの原因を特定
JavaScriptファイルの読み込み方法を確認
WordPressでのjQueryの書き方を確認
これらを上から順番に潰していけば、どこかしらで原因が特定出来るのではないでしょうか?
特に、ランディングページ(LP)を作る際には分割するファイルが少ないので、
どこかしらで適当に書いちゃって、その結果ファイルが読み込まれなかったり、動かないという単純なエラーが出てくるので注意。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
-->
作ったサイトをワードプレス化してみたんだけど、なぜかJavaScript(jQuery)が読み込まれない
何で動かないんだろう
普段は問題なく動いてるんだけどなぁ