More than 3 years have passed since last update.

WordPressでJavaScriptが動かない時、もしかしたらこれが原因かも

Last updated at 2020-11-23Posted at 2020-10-18

『WordPress JavaScript 動かない』などで検索をすると大体

・そもそもJavaScriptが読み込まれているか確認しましょう
・ブラウザのキャッシュを削除しましょう

のような記事が出てくるのですが、これらだけでは解決しない場合があります

JavaScriptが動作しない原因と解決策

functions.phpでJavaScriptを読み込む場合、下記のようなコードを書くと思います

functions.php

wp_enqueue_script('sample, get_template_directory_uri().'/js/sample.js');

これだけでも読み込みはされているはずです。

検証ツールをみてみても読み込まれているのがわかると思います。

ただ読み込まれている場所が問題です

内にJavaScriptが読み込まれると、getElementByIdなどのHTMLを参照するコードが全てエラーになってしまいます

JavaScript→HTMLの順で読み込まれると、id(やclassなど)を取得できないからです

したのように記述することで通常と同じように、

JavaScriptの読み込み場所を直前にすることができます

functions.php

wp_enqueue_script('sample', get_template_directory_uri().'/js/sample.js', array(), '1.0', true);

array()や1.0は関係ないですが、

最後の引数で、値をtrueにすることで、JavaScriptが直前で読み込まれるので

HTML→JavaScriptの順で読み込まれ、id（やclass）を取得できるのでエラーになりません

WordPressでJavaScriptが動かない時に、やるべきこと

・そもそもJavaScriptが読み込まれているか確認しましょう
・ブラウザのキャッシュを削除しましょう

＋ wp_enqueue_scriptの第5引数をtrueにしましょう

以上です

この記事の内容が役に立ったという方がいましたら、Twitterでも情報発信をしていますので、フォローしていただけると嬉しいです