wordpressにてjsファイルの読み込み

Question

wordpressでjsファイルを読み込ませたいのですが、うまくいきません。。。

コードを書いているcontact.phpについては

<?php
function calendar_scripts() {
    //wordpress特有のjqueryを読み込まない
    wp_deregister_script('jquery');

    //jsファイルの読み込み
    wp_enqueue_script( 'jquery', get_stylesheet_directory_uri().'/js/jQuery.min.js' , array());
    wp_enqueue_script( 'entercalendar-script', get_stylesheet_directory_uri().'/js/enterCalendar.js' , array());
}

add_action( 'wp_enqueue_scripts', 'calendar_scripts' );
?>

階層は

エラーとしては
syntax error, unexpected 'wp_enqueue_script' (T_STRING) in C:\xampp\htdocs\test\sample\wp-content\themes\twentyseventeen\contact.php on line 168
と出てきます。
line168はjsファイル読み込み２回目のところです。

調べてみても同じ方法を試してはみてもこのエラーが出てきます、、、助力お願いいたします。。。

stampdoorさんから教えていただいたことを行った後の追記
コメント欄に書かせていただいたエラーが起こったところの画像

Answer 1

まず書き込むファイルが違います。
functions.phpに書いて全体に読み込むようにします。

ページごとに読み込ませるファイルを変えたいならばその中で分岐させるべきです。

<?php
function calendar_scripts() {
    //wordpress特有のjqueryを読み込まない
    wp_deregister_script('jquery');

    //jsファイルの読み込み
    wp_enqueue_script( 'jquery', get_stylesheet_directory_uri().'/js/jQuery.min.js' , array());
    if(is_page("ID")とかis_single()とか){
    wp_enqueue_script( 'foo', get_stylesheet_directory_uri().'/js/bar.js' , array());
}else{
    wp_enqueue_script( 'entercalendar-script', get_stylesheet_directory_uri().'/js/enterCalendar.js' , array());
}
}

add_action( 'wp_enqueue_scripts', 'calendar_scripts' );
?>

Comments

[naonao11]

ありがとうございます！！
エラー表示がなくなりました！ただ呼び出しているファイルの表示はしてくれないです。。。

[stampdoor]

consoleを確認して見てください。404エラーが出ていますか？
それとも別のエラーが出ていますか？

chromeのデベロッパーツールなどでコンソールは確認できます。
https://www.buildinsider.net/web/chromedevtools/01

[naonao11]

Uncaught ReferenceError: $ is not defined
at (index):143
と出ました。。。画像については追記いたします

[stampdoor]

143行目に何が書いてあるのか不明ですがjQueryの$が効いていません。
可能であればなにかしらのjsファイルにその内容を書いてjQueryのあとで読み込むようにしてください。
もしどうしてもその箇所に書かなければ行けないということであればjQueryの読み込む箇所をhead内にするか$(function(){...});となっているところをjQuery(function($){...});としてみてください。

[naonao11]

$(function(){...});となっているところをjQuery(function($){...});変更した結果
Uncaught ReferenceError: jQuery is not defined
と出てきて

head内にすると
(index):4 Uncaught ReferenceError: $ is not defined
となります。。

[stampdoor]

143行目は何が書いてあるのでしょう？

[naonao11]

上記の１４３行目を
jQuery(function($){
に変えたものになっております。。。

[stampdoor]

とにかく順番としては
1.まずjQueryが先に読み込まれておく必要がある
2.jsファイル内の$(function(){...});となっているところをjQuery(function($){...});とする
3.index内に書かれているものをjsファイルにしてjQueryのあとに読み込む
です。

[stampdoor]

後はjQuery(function($){...});別の書き方を試してみるかですね。
jQuery(function(){...});
(function($){...})(jQuery);
などです。

[naonao11]

ありがとうございます！いろいろ試してみます！