025：JSファイルの読み込み

投稿日：2020年11月08日

WordPress

JSファイルの読み込みは「functions.php」に記述します。

functions.php

/*********************************
  JS読み込み
 **********************************/
add_action('wp_enqueue_scripts', function () {
  wp_deregister_script('jquery');
  wp_enqueue_script(
    'jquery',
    // 'https://code.jquery.com/jquery-1.12.4.min.js',
    // 'https://code.jquery.com/jquery-2.2.4.min.js',
    'https://code.jquery.com/jquery-3.4.1.min.js',
    array(),
    false,
    true
  );
  // カルーセル
  wp_enqueue_script(
    'slick_js',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js',
    array('jquery'),
    false,
    true
  );
  // スクロールアニメーション
  wp_enqueue_script(
    'aos_js',
    'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js',
    array('jquery'),
    false,
    true
  );
  // 共通JS
  wp_enqueue_script(
    'common_js',
    get_theme_file_uri('/js/script.js'),
    array('jquery', 'slick_js', 'aos_js'),
    filemtime(get_theme_file_path('/js/script.js')),
    true
  );
});

WordPress内でのjQuery

WordPressは何もしなくてもjQueryファイルが読み込まれています。

jQueryを読み込まない場合

wp_deregister_script('jquery');

jQueryを自分で読み込む場合

jQueryのバージョンを指定して読み込む場合などに使用します。

元から読み込んでいるjQueryを無効にした後に、指定したバージョンのjQueryを読み込みます。

  wp_deregister_script('jquery');
  wp_enqueue_script(
    'jquery',
    // 'https://code.jquery.com/jquery-1.12.4.min.js',
    // 'https://code.jquery.com/jquery-2.2.4.min.js',
    'https://code.jquery.com/jquery-3.4.1.min.js',
    array(),
    false,
    true
  );

jQueryプラグインを読み込む

第3引数に「array('jquery')」を指定してjQuery本体ファイルの後に読み込むように読み込み順番を指定します。

  // カルーセル
  wp_enqueue_script(
    'slick_js',
    'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js',
    array('jquery'),
    false,
    true
  );
  // スクロールアニメーション
  wp_enqueue_script(
    'aos_js',
    'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js',
    array('jquery'),
    false,
    true
  );

オリジナルJSを読み込む

オリジナルJSは必要ファイルをすべて読み込んだ後に読み込みます。

第3引数に事前に読み込むJSファイルを指定します。

第4引数にファイル更新日時を指定することでファイル名の後に更新日時クエリ文字列を付与することができます。クエリ文字列を付与することでファイル名（実際は読み込みURL）が更新前と違うものになりキャッシュされたファイルではなく更新されたJSファイルが読み込まれます。これによりキャッシュを強制的に削除することができます。

  // 共通JS
  wp_enqueue_script(
    'common_js',
    get_theme_file_uri('/js/script.js'),
    array('jquery', 'slick_js', 'aos_js'),
    filemtime(get_theme_file_path('/js/script.js')),
    true
  );

WordPressでjQueryを利用する際の注意

WordPressでは他のJSライブラリーとの競合を避けるために「$」が使えなくなっています。
※jQuery以外のJSライブラリでも「$」を関数名に使っているものがあるため

そのため「$()」を正式な書き方「jQuery()」で記述しなければいけません。

ただ、面倒なので以下の記述を使って無名関数内でのみ「$()」を使えるようにします。

    <script>
    window.addEventListener('load', function() {
      jQuery(function($) {
        // ここにjQueryを使ったコードを記述
      });
    });
    </script>

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

add_action()

wp_enqueue_script()

get_theme_file_uri()

PHP関数

filemtime()