特定ページにのみslider.jsを読み込みたい

Question

実現したいこと

WordPress化をしている段階です。特定の個別ページにのみsilider.jsを反映させたいと思っています。

発生している問題・エラーメッセージ

現在はこのようなエラーが起きています。
多分ファイル自体は読み込めていると思うのですが、slider.js自体が読み込めていないのかなと思っております。

jquery.min.js:2 Uncaught TypeError: $(...).slick is not a function
    at sliderSetting (slider.js:17:62)
    at HTMLDocument.<anonymous> (slider.js:20:2)
    at e (jquery.min.js:2:30038)
    at t (jquery.min.js:2:30340)

該当のソースコード

現在はfunction.phpで全体の読み込み、header.phpで特定のページ（visionページ）で読み込もうとしています。
以下各コードです。

function.php

<?php
function style_scripts(){
  wp_enqueue_style('my-style', get_stylesheet_uri(), array(), '1.0.0', 'all');
  wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.6.1.min.js', "", "1.0.1");
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array() ,'1.0.0', true);
}
add_action('wp_enqueue_scripts', 'style_scripts')

header.php

<?php if ( is_page( 'vision' ) ): ?>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="<?= get_template_directory_uri(); ?>/js/script.js"></script>
      <script src="<?= get_template_directory_uri(); ?>/js/slider.js"></script>
      <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <?php endif; ?>

試したこと

考えているのは以下の２つです。
・slider.jsを読み込めていない
・読み込むファイルの順番が違う

一応ファイルなどを入れ替えはしたのですが、うまくいかなかったです。
（<?php if ( is_page( 'vision' ) ): ?>は間違えていないのでその他の部分での問題かなと思っております）

Comments

[Lhankor_Mhy]

slider.js というファイルには slick.js のライブラリが含まれているのですか？

[yudai1107]

入っているかと思います！
以下中身です。

```
$(function(){
function sliderSetting(){
var width = $(window).width();
if(width <= 769){
$('.js-visionPage__sliderImgBox').not('.slick-initialized').slick({
autoplay: true,
centerMode: false,
arrows: false,
infinite: true,
dots:true,
slidesToShow: 3,
slidesToScroll: 1,
centerPadding: '0px',
autoplaySpeed: 2000
});
} else {
$('.js-visionPage__sliderImgBox.slick-initialized').slick('unslick');
}
}
sliderSetting();
$(window).resize(function(){
sliderSetting();
});
});
```

[Lhankor_Mhy]

そちらではなくて、slick のライブラリ自体の方です。
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js

slider.js には含まれていないようなので、別の場所でこちらが読み込まれているか、確認してみてはどうでしょうか。

[yudai1107]

申し訳ありません。
こちら完全に失念しておりました・・・！
ご指摘いただきありがとうございました！

Answer 1

https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js

このライブラリーを読み込んだらうまく行きました！