【JavaScript】particlesJSで「Uncaught ReferenceError」

https://coco-factory.jp/ugokuweb/move02/5-8/

↑こちらの紙吹雪が舞うJavaScript、particlesJSを導入したいなあ、と思いなんやかんややってましたが、中々表示されず

エラーを確認してみたところ、「Uncaught ReferenceError: particlesJS is not defined」とありましたので、どういうことなの～？と、探ってみました。

めっちゃ凡ミスでした。

Uncaught ReferenceError: particlesJS is not defined

Uncaught ReferenceError: particlesJS is not definedの意味をとりあえず書いておくと、

particlesJSがないよ！どこにあるの？

ということ。
該当するファイルを確認してみても、

particlesJS("particles-js",{

とあるし、いや、定義されてるよ？！
と、すごい悩んでたんですけど

私の場合は、読み込みの順番を間違えてただけでした。

解決方法

フッターで読み込むわけですから、親テーマのフッターを子テーマにコピペして
</body>直前に<script>で読み込みたいわけですね。

そんでエラー出てた時の読み込み方↓

<!-- scripts -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/app.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/particles.js"></script>

コードは上から順番に読み込まれる。
という、大前提を思いっきり失念していた私……。

上から読み込まれるのに、基本のjsファイルを無視してapp.jsを先に読み込んじゃってたわけなんですよね。

なので正しくはこう↓

<!-- scripts -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/particles.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/app.js"></script>

まずparticles.jsを読み込んでから、オプションについて書きこまれてるapp.jsを読み込む。
これだけで表示されました。

定義云々じゃない、前提を、前提をまず……しっかりせなあかんかったんや……。

まとめ

まあ凡ミスを経て強くなるので、いいってことにします。