functions.phpでのcss・js読み込みについて

Question

ポートフォリオサイトのWordPress化を行っているのですが、functions.phpでのcssとJavaScript、jQueryの読み込みが上手くできません。
独自のcssとmain.jsは出来ていると思うのですが、slickやjQueryのプラグイン、googleフォント等の読み込み方を教えてください。

  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="slick/slick.css"/>
  <link rel="stylesheet" href="css/style.css" media="all" />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@1,500&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
  <script src="slick/slick.js"></script>
  <script src="js/main.js"></script>

functions.php

<?php

add_theme_support('title-tag');
add_theme_support('post-thumbnails');

function load_script() {
  if ( !is_admin() ) {
    
    // reset.css
    wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' );
    // slick.css
    wp_enqueue_style( 'slick', get_template_directory_uri() . '/slick/slick.css' );
    // style.css
    wp_enqueue_style( 'main', get_template_directory_uri() . '/css/style.css' );
    // google font
    

    // jquery.min.js
    wp_enqueue_script('jquery.min.js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array('jquery'), '3.4.1', false);
    // slick.js
    wp_enqueue_script( 'slick.js', get_template_directory_uri() . '/slick/slick.js', array('jquery'), false, true );
    // gsap.min.js
    wp_enqueue_script('gsap.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js', array('jquery'), '3.6.1', false);
    //ScrollTrigger.min.js
    wp_enqueue_script('ScrollTrigger.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js', array('jquery'), '3.6.1', false);
    // main.js
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true );
  }
}

add_action('init', 'load_script');
?>

Answer 1

自前のjQueryファイルを読み込む場合は、一度WordPress標準のjQueryを削除する必要があります。
このような感じでいかがでしょう？

<?php

add_theme_support('title-tag');
add_theme_support('post-thumbnails');

/*
 * デフォルトのjQueryを解除
 */
function load_script() {
  if ( !is_admin() ) {
    wp_deregister_script('jquery');
    // jquery.min.js
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), '3.4.1');
 }
}
add_action('init', 'load_script');

/*
 * JS・CSSファイルを読み込む
 */
function add_files() {

    // reset.css
    wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' );

    // style.css
    wp_enqueue_style( 'main', get_template_directory_uri() . '/css/style.css' );

    // slick.css
    wp_enqueue_style( 'slick', get_template_directory_uri() . '/slick/slick.css' );

    // slick.js
    wp_enqueue_script( 'slick.js', get_template_directory_uri() . '/slick/slick.js', array('jquery'), false, true );

    // gsap.min.js
    wp_enqueue_script('gsap.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js', array('jquery'), '3.6.1', false);

    //ScrollTrigger.min.js
    wp_enqueue_script('ScrollTrigger.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js', array('jquery'), '3.6.1', false);

    // main.js
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true );

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

Comments

[aot]

修正してみましたが、変化がなくmain.js以外実装されていない状態です。

また、Googl fontを追加したらエラーが出てしましました…
function add_files() {
wp_enqueue_style('fontawesome'.'https://use.fontawesome.com/releases/v5.6.1/css/all.css');
}

add_action('wp_enqueue_scripts','enqueue_scripts');

[Fushi_me]

こちらの環境ではこのコードで問題なく読み込まれているのですが...Chromeであれば右クリック→検証でデベロッパーツールで現在のHTMLが見られますが、コンソールに何かエラーが出ていますか？出ていれば共有頂けますか？
Google fontsではなくfontawesomeのようですが、関数名が違いますね。別のアクションフックで読み込むのであれば、add_actionの表記と揃えて、function enqueue_scripts()にしてみてください。

[aot]

現在のHTMLとコンソールを追加しました。
先ほど間違っていたfontawesomeは一旦消してあります。

[Fushi_me]

憶測ですが、コンソールにエラーが出ていないので、functions.phpではなくほかのテーマファイル内の記述の問題の可能性があると思います。ソースコードの中に<footer></footer>が存在しなさげなことと、jsがコメントアウトされているのが気になります。footer.phpなどの記述に間違いがないか確認してみてください。

[aot]

確認したところheader.phpに問題があり、無事解決しました！
ありがとうございました。

[Fushi_me]

解決されたようで良かったです。良ければどのような問題があり修正したのかを、書ける範囲で回答に書いていただくと、今後同じ問題で検索された方の役に立つかもしれません。