slickで実装した、jqueyにエラーが出てしまう。

前提・実現したいこと

HTMLファイルからslickのスライドショーを実装し、PHPでWordPress化した際にも同じように実装したい。

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

WordPress化した際にjqueryが反映されない。
エラーメッセージ
ncaught ReferenceError: jQuery is not defined
at slick.min.js?ver=5.6.2:1
at slick.min.js?ver=5.6.2:1
(anonymous) @ slick.min.js?ver=5.6.2:1
(anonymous) @ slick.min.js?ver=5.6.2:1
jquery-migrate.min.js?ver=3.3.2:2

該当のソースコード

    script.js

jQuery(document).ready(function() {
jQuery('.slider').slick({
arrow: true,
dots: true,
autoplay: true,
autoplayspeed: 1000,
});
});add_action( 'wp_enqueue_scripts', 'my_script' );

functions.php
function my_script(){
wp_enqueue_script(
'myscript',
get_template_directory_uri() .'/js/slick.min.js',
get_template_directory_uri() .'/js/script.js',
array(),
false,
true
);

}
add_action( 'wp_enqueue_scripts', 'my_script' );

試したこと

まず最初に試したことは、script.jsファイルの記述で、ネットで検索した際にWordPressでは＄が使えないとあった為、
$(function() {
$('.slider').slick({
arrow: true,
dots: true,
autoplay: true,
autoplayspeed: 1000,
});
});から
jQuery(document).ready(function() {
jQuery('.slider').slick({
arrow: true,
dots: true,
autoplay: true,
autoplayspeed: 1000,
});
});へ変更しました。
次に試したのはfunctions.phpへの記述で、jqueryやjavascriptを読み込む為の記述です。

function my_script(){
wp_enqueue_script(
'myscript',
get_template_directory_uri() .'/js/slick.min.js',
get_template_directory_uri() .'/js/script.js',
array(),
false,
true
);

}
add_action( 'wp_enqueue_scripts', 'my_script' );と記述しています。

header.phpには

<!DOCTYPE html> <html <?php language_attributes(); ?> <head> <meta charset="<?php bloginfo('charset'); ?> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title><?php bloginfo('name'); ?></title> <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"> <link rel="css/slick.css" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="css/slick-theme.css" href="<?php echo get_stylesheet_uri(); ?>"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?>

footer.phpには
<footer>
<p class="copy">copyright ©️all reserved.</p>
</footer>

<?php wp_footer(); ?>  </body> </html> 　と記述しています。コメントアウトを解除しても、script.jsへの記述変更、functions.phpへの記述も試しましたが、上記のエラーが出てしまいます。 ### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

自己解決

function my_script(){
wp_enqueue_script(
'myscript',
get_template_directory_uri() .'/js/slick.min.js',
get_template_directory_uri() .'/js/script.js',
array(),
true
false←これが余計な記述でした。今回はfooterで読み込みにしていたので
);

}
add_action( 'wp_enqueue_scripts', 'my_script' );

投稿2021/02/24 09:32

yamayuki39

総合スコア0

コードを記述する際はエディタの<code>マークを使って見やすくインデントを整えてください。
WordPressでも$は使えます。
下記のような感じで。

<script>
jQuery( function($){
　//この中に書きたいjQueryコードを書いてください。
});
</script>

投稿2021/02/24 08:55

Anon_

総合スコア334

yamayuki39

2021/02/24 09:30

回答ありがとうございます。参考になりました。functions.phpで function my_script(){ wp_enqueue_script( 'myscript', get_template_directory_uri() .'/js/slick.min.js', get_template_directory_uri() .'/js/script.js', array(), true 　　false←ヘッダーで読み込み部分を削除してみたら、エラーが消えました。 ); } add_action( 'wp_enqueue_scripts', 'my_script' );

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

あなたの回答