functions.php設定したのにJavascriptが反映されない時の対処法

こんにちは、レックです。
プログラマーとして活動しております。

最近は、web制作でwordpressを導入する機会も多いのではないでしょうか。

ただ、wordpressでカスタマイズする時には、今までは当たり前にできていたものができなくなったりします。
例えば、最初の頃はJavascriptが効かなくなるのも定番です。

今回は、functions.php設定したのにJavascriptが反映されない時の対処法ということでお話ししたいと思います。
WordPressを導入し始めたての方に少しでも役立てばと思います。

functions.php設定したのにJavascriptが反映されない時の対処法

前提

まず、functions.phpで

「wp_enqueue_script(‘main_script’,get_stylesheet_directory_uri().’/index.js’);」

のような設定をしていることが前提になります。

WordPressのオリジナルテーマでCSSやJavascriptを使用するには、このようなfunctions.phpでCSSやJavascriptの設定をする必要があります。

ただ、問題は

「ちゃんとfunctions.phpで設定したのに、Javascriptが反映されない！」

ということです。

また、

というケースにも当てはまるかと思いますので、その対処法をご紹介します。

結論

結論として、

「document.addEventListener(‘DOMContentLoaded’, function() {
// DOM操作のコード
});　」

を使えば直ります。

例えば（JSの方をご覧ください）、

See the Pen Untitled by 寺園太紀 (@jvncluib-the-builder) on CodePen.

のようにDOM操作のコードを先ほどのコードで囲みます。

おそらく、これで直るというケースが大半だと思います。

なぜか？

で終わるのも悪くないかもしれないですが、一応理由を説明します。

まず、どのようにしてJavascriptでDOM操作をしているのかを理解する必要があります。

wordpressを使わないパターンでは以下のようになります。

上から下へ読み込まれますので、

①まずDOMが読み込まれて
②次にscriptが読み込まれる

ですが、Wordpressの場合だとscriptがheadタグの中に記述されます。

なので、まずscriptから読み込まれてしまいます。

そうなるとどういうなるかというと、例えば

document.querySelector(‘.elm’)などのDOM操作をするとまだ、②elmクラスのDOMは読み込まれてないので、scriptは

「document.querySelector(‘.elm’)ってなに？」

ってなっちゃうんです。

WordPressなしの時のように、scriptよりも先にDOMが読み込まれてたら「ああ、それのことね」ってなるんですけど、scriptが先だと「まだDOM読み込んでないんですけど、、、」となってJavascriptが反映されないわけです。

なので、まずscriptよりも先にDOMを読み込ませる必要があります。

よって、「document.addEventListener(‘DOMContentLoaded’, function() {
// DOM操作のコード
});　」を使用してDOMを先に読み込んでもらいます。

また、「console.log()は反映されるけど、DOM操作ができない」というのは、別にconsole.log(‘active’)とかだったら別にDOM操作してないから、DOM読み込まなくても関係ない、ただconsole.log(document.querySelector(‘.elm’));とかだったらDOM操作なので反映しなくなる
というわけですね。

まとめ

「functions.phpで設定したのにJavascriptが反映しない」

＝＞「document.addEventListener(‘DOMContentLoaded’, function() {
// DOM操作のコード
});　」

で解決する