【3.7.0】jQueryのCDN最新バージョン(2023年7月更新)

コピペ用【Google】

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

GoogleのCDN 公式サイト

Google jQuery CDN

よくある質問

jQueryのCDNは、どの種類を選び使用すればよいか?

jQueryのCDNはGoogleの他にも、jQueryの公式から出ているCDNやMicrosoftから出ているCDNがありますが、基本的にはどれを選んでも問題なしです。

こだわりがない限り、大手のGoogleから出ているCDNを使用するのが無難かと思います。

jQueryのCDNのコードをどこに記載するのか?

静的サイト(HTML)の場合

</body>よりも前+『jsファイル』よりも前に読み込む。

<head>~</head>内でも問題なしですが、サイトの表示スピードの観点から、</body>の前で読み込むことを、推奨しております。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>

<body>
  <header class="header">
  </header>

  <main>
  </main>

  <footer class="footer">
  </footer>

<!-- JSファイルの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="js/main.js?ver=1.0.0"></script>
</body>
</html>

動的サイト(WordPress)の場合

WordPressサイトでは、functions.php内でCSSとJSの読み込み制御をすることが推奨されてます。

『header.php』や『footer.php』内でも問題なしです。

functions.php

<?php

/**************************************************
JSファイルの読み込み
**************************************************/
function st_enqueue_scripts() {
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', array(), '3.7.0', true);
  wp_enqueue_script('main', get_theme_file_uri('js/main.js'), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');

動的サイト(WordPress)の場合の解説

解説コード

<?php /* functions.phpでは不要なトラブルが発生するため、閉じるタグ『?>』は記述しないこと。 */

/**************************************************
JSファイルの読み込み
**************************************************/
/* 『st_enqueue_scripts()』は任意の名前に、変更可能 『add_action('wp_enqueue_scripts', '〇〇');』の部分に名前を合わせること */
function st_enqueue_scripts() {

  /* WordPress標準のjQueryを削除 */
  wp_deregister_script('jquery');

  /* wp_enqueue_style('任意の名前', '/ディレクトリ/ファイル名.js', 読み込む順番を制御, '任意のバージョン', </body>タグ前で読み込むか); */
  wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', array(), '3.7.0', true);

  /* wp_enqueue_style('任意の名前', '/ディレクトリ/ファイル名.js', 読み込む順番を制御(この場合は、jQueryのcdnの後に読み込まれる), '任意のバージョン', </body>タグ前で読み込むか); */
  wp_enqueue_script('main', get_theme_file_uri('js/main.js'), array('jquery'), '1.0.0', true);
}

/* 『wp_enqueue_scripts』は任意の名前に、変更不可 */
/* 『st_enqueue_scripts』は任意の名前に、変更可能 『function 〇〇()』の部分に名前を合わせること */
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');

出力結果

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js?ver=3.7.0' id='jquery-js'></script>
<script type='text/javascript' src='https://renkosaka.com/wp-content/themes/xeory_base-child/js/main.js?ver=1.0.0' id='main-js'></script>
</body>
</html>

SNSでもご購読できます。

コメントを残す

前の記事

次の記事