wordpressでslickの反映方法について

Question

初心者です。

必要な箇所に必要なファイルを入れたつもりですが、slickのみ反応しません。

画像のように「Uncaught TypeError: jQuery(...).slick is not a function」が時間をかけてもわかりませんでしたが、改善策おわかりでしょうか？「$」を「JQuery」に変えたりしたのですが、未だslickが反応せず、要素の画像が縦に並んでいるだけです。
どうぞよろしくお願い致します。

Comments

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

[sasai_tacos]

画像を追加しました。もし解決策がおわかりでしたらご教授いただけますと幸いです。

[kei344]

「必要な箇所に必要なファイルを入れた」とありますが、どこに入れてどう取り出すコードを書いたかも提示されてはいかがでしょうか。

Answer 1

slickはちゃんとjqueryより後に読み込まれてますか？

wp_enqueue_scriptでslickを読み込んでいるなら
第３引数に['jquery']と書いてjqueryより後に読み込まれるようにしましょう

scriptタグでslickを読み込んでいるなら
少なくともwp_head()より後に書くようにしましょう

---

追記

1. jQuery読み込み
2. slick.js読み込み
3. jQuery(...).slick()の実行

の順番に処理されているか
コードを追って確認

slickの後にさらにjqueryが読み込まれてないかも確認
wpはデフォルトでjquery読み込んでいるので
普通にheadにjquery読み込みのコードを追加すると二重読み込みになる
wp_enqueue_scriptを使う形をとること
wpの組み込みのjqueryのバージョンが気に入らないなら
wp_deregister_scriptするなり相応の手順を踏むこと

slickを実行するコードも

$(...).slick();

ではなく

jQuery(function($){
  $(...).slick();
});

のようにする

Comments

[sasai_tacos]

返答ありがとうございます。
jqueryより後に読み込まれているようですが、反応しません。
以下URLの画像の表示が出る場合、他の原因は考えられますでしょうか。
https://21.gigafile.nu/1117-b352d97b6cc2bc060892630423d5e4f12

[KazuhiroHatano]

不特定多数の使うSNSで晒されたファイルをダウンロードするとか
不用心な真似はしたくありません、codepenとか使ってください