WordPressでjQueryプラグイン「Vegas2」を実装する方法

質問失礼いたします。
WordPressでjQueryプラグイン「Vegas2」を実装したいのですが、どうしてもうまく機能しません。

こちらの記事を参考にして、以下のように設定しました。

①
overlays
vegas.min.css
vegas.min.js
上記三つのファイルをダウンロード。
overlaysはテーマフォルダに、
vegas.min.cssはテーマフォルダの「css」ファルダに、
vegas.min.jsはテーマフォルダの「js」フォルダに格納。

②
functions.phpに次のように記述。

function wp_enqueue_styles() {
  if(is_front_page()) {
    wp_enqueue_style(
      'vegas-style',
      get_template_directory_uri() . '/css/vegas.min.css'
    );
  }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_styles' );

③
header.phpに次のように記述。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <?php if(is_front_page()): ?>
  <script script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/vegas.min.js"></script>
  <script script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/function.js"></script>
  <?php endif; ?>
  <?php wp_head(); ?>
</head>

④
function.jsというファイルを作成して「js」フォルダに格納し、次のように記述。

$(function() {
  $('#vegas').vegas({
      slides: [
          { src: './img/dummy01.jpg' },
          { src: './img/dummy02.jpg' },
          { src: './img/dummy03.jpg' },
      ],
  });
});

④

HTML
1<div id="vegas"></div>

CSS
1#vegas {
2  width: 100vw;
3  height: 300px;
4}

以上です。
これでテストしてみましたが真っ白で何も表示されず動きません。

どなたか原因を教えていただけると助かります。
何卒よろしくお願いいたします。

【追記】

Space-Monkey様からいただいたコメントを受け、
ディベロッパーツールでエラー表示を確認しました。

どうやら画像が取得できていないようなのですが、
たしかに「img」フォルダに「dummy01.jpg」という画像は入っています。
WordPressだと特別なパスの指定方法が必要なのでしょうか。

【追記】
画像のパスに「wp-content/themes/テーマ名」を付け加えたところ、
画像は表示されるようになりました。
ただ、上記の画像の黄色の部分の通り、まだvegasのcssとjsの読み込みに不具合があるようで
動いてくれません。
いま改めて試行錯誤しています。

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

回答1件

ベストアンサー

jQueryが二重に読み込まれていないか
vegas.min.css、vegas.min.js、function.jsが読み込まれているか
指定したパスに画像が設置してあるか
エラーが出ていないか

ブラウザのソースとデベロッパーツールで確認

JQueryはヘッダー側で構わないとして、JSは正常にロードしておりエラーが無い場合でもフッターで読み込んだ方が良い場合もある

試行錯誤も必要
とりあえずエラー等の確認

追記
wp-contentやwp-adminディレクトリがある階層にimgディレクトリを設置しているのならそのパスで良いだろうが、テーマのディレクトリ内にあるならばそのパス(URL)にしなければ404になる。

こんな感じ
http://wordpress0727.local/wp-content/themes/wordpress0727/img/dummy01.jpg

こうすると設置するサーバーが変わると再度書き換えないといけないので面倒。
だからWordPress関数が使えるようにheader.phpでインラインで読み込む方が無難かと。

PHP
1<?php if(is_front_page()): ?>
2<script>
3$(function() {
4  $('#vegas').vegas({
5      slides: [
6          { src: '<?php echo get_template_directory_uri(); ?>/img/dummy01.jpg' },
7          { src: '<?php echo get_template_directory_uri(); ?>/img/dummy02.jpg' },
8          { src: '<?php echo get_template_directory_uri(); ?>/img/dummy03.jpg' },
9      ],
10  });
11});
12</script>
13<?php endif; ?>