wp_enqueue_script()関数を使ってscriptファイルを読み込みたいのですが上手くいきません。

wp_enqueue_script()関数を使ってscriptファイルを読み込みたいのですが認識されません。

footer.phpに記載しているscriptファイル(下記画像)をfunctions.phpにwp_enqueue_script()関数を使ってscriptファイルを読み込ませたいのですが、認識されません。

php
1function twpp_enqueue_scripts() {
2  wp_enqueue_script( 
3    'main-script', 
4    get_template_directory_uri() . '/dist/js/slick.min.js',
5    array(),
6    false,
7    true
8  );
9}
10add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

上記のように書いて、slick.min.jsだけでも読み込むか試してみたのですが、ブラウザで表示すると
slickを使って画像のフェードイン・フェードアウトをしていた箇所の画像が縦に並んで表示され、
slick.min.jsが認識されておりませんでした。

wp_enqueue_script()関数を使ってslick.js、aos.js、script.jsの３つをfunctions.phpからフッターに読み込ませたい場合はどうすればいいのか?
fontawesomeの箇所はどすればいいのか?

ご教授ください。

yuki84web

2021/03/22 12:07

'tru'は'true'ですか？

Fukusuke0604

2021/03/22 12:11

'tru'ではなく'true' です。すみません。　修正しました。

tabuu

2021/03/22 23:34

上手くいかないだけでは判りません。どのような状態になることを目標としているのか、現時点ではどのような結果になっているのか、を本文に追記してください。

Fukusuke0604

2021/03/23 05:17

すみません。ご指示いただいたように内容を修正しました。 wp_enqueue_script()関数を使ってslick.js、aos.js、script.jsの３つをfunctions.phpからフッターに読み込ませたいです。

yuki84web

2021/03/23 11:57

そもそもscriptタグは出力されているのでしょうか。あとはパスが通っていないか、jqueryが必要なライブラリでjqueryより先に読み込んでいるとか

行動規範の内容に同意します

回答1件

ベストアンサー

HTML にscript タグがでているという前提で...

wp_enqueue_script(

'main-script', 
get_template_directory_uri() . '/dist/js/slick.min.js',
array(),
false,
true

);

まず、質問のコードでは、wp_enqueue_script の第3パラメータに array() と空の配列を記載していて依存するスクリプトのハンドルを指定していないので、読み込み順は指定されていません。

slick.js は、jQuery に依存しているはずなので、jQuery よりあとに読み込む必要があります。
関数リファレンス/wp_enqueue_script の「jQuery に依存するテーマのスクリプトをリンクする」にあるように wp_enqueue_script の第3パラメータで、 array( 'jquery' ) と jQuery のハンドルを指定して、jQueryよりあとに読み込むという指定が必要です。

同様に script.js が、 slick.min.js に依存している場合は、 slick.min.js よりあとに読み込むために script.js を読み込ませる wp_enqueue_script の第3パラメータで、wp_enqueue_script で指定したslick.min.js のハンドルを指定する必要があります。

投稿2021/03/24 13:33