＜目次＞
コピペ用【Google】
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Googleの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.1/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.1/jquery.min.js', array(), '3.7.1', 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.1/jquery.min.js', array(), '3.7.1', 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.1/jquery.min.js?ver=3.7.1' 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>
