wordpress　jsの読み込み方法について

実現したいこと

htmlのwordpress化で jsを読み込ませたい。

発生している問題・分からないこと

wordpressでオリジナルテーマを作成しているのですが、jsが反映されません。
functions.phpでcssとjsを読み込んでおり、cssは反映されております。
検証を確認したところファイル自体は読み込まれているようなのですが、該当箇所のテキストや画像もまるっと表示されていない状態です。

該当のソースコード

php
1<?php
2  function my_script_init(){ 
3    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/script.js', true );
4    wp_enqueue_script( 'splide-js', get_template_directory_uri() . '/js/splide.min.js', true );
5    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.0.1' );
6    wp_enqueue_style( 'reset-css', get_template_directory_uri() . '/css/reset.css', array(), '1.0.1' );
7    wp_enqueue_style( 'splide-css', get_template_directory_uri() . '/css/splide-core.min.css', array(), '1.0.1' );
8  }
9  add_action('wp_enqueue_scripts', 'my_script_init');
10?>

javascript
1// JavaScript Document
2new Splide(".splide",{
3  type: "loop",
4  autoplay: true,
5  interval: 5000,
6  speed: 800,
7  pauseOnHover: false,
8  pauseOnFocus: false,
9  padding: { left: "0", right: "4rem" }, 
10  gap: 20,
11  arrows: false,
12  classes: {
13  pagination: "splide__pagination tk-class-pagination",
14  page: "splide__pagination__page tk-class-page",
15  },
16 }).mount();

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

bodyの直前<?php wp_footer(); ?>とheadの手前に<?php wp_head(); ?>は配置済みです。

補足

特になし

CHERRY

2024/01/13 01:38

ファイルの読み込み順の影響のような気もするのですが、ページを開いた際に　Webブラウザのデベロッパーツールのコンソール画面で、何かエラーメッセージが表示されていたりしないでしょうか。

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

回答1件

ファイル名的に多分こうではないでしょうか。（ script.jsからSplideが呼ばれているのに先に読み込まれていないからエラーになっているのでは）

PHP
1    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/script.js', true );
2    wp_enqueue_script( 'splide-js', get_template_directory_uri() . '/js/splide.min.js', true );

↓

PHP
1    wp_enqueue_script( 'splide-js', get_template_directory_uri() . '/js/splide.min.js', true );
2    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/script.js', true );