WordPressのjQueryは設定しないと読み込まれない

WordPressでjQueryを使うとき、なにも設定しないと読み込んでくれません。

wp_head()を記載しても読み込まれません

ネットで調べると、wp_head()を書けば、jQueryが読み込まれると書いてあります。これは、wp_head()と記載することで、WordPressに内蔵されているjQueryが、読み込んでくれるという理屈です。
昔はそうでしたが、今は読み込まれないことがあります(2021年4月現在)。それは使用するテーマによるからです。

使用するテーマによります

テーマ「Twenty Seventeen」は、jQueryが記載されていました。
しかし、「Twenty Nineteen」は記載されていません。よってjQueryは読み込まれません。

つまり、テーマによってjQueryが記載されていたり、記載されていなかったりします。
記載されていない場合は、自分でjQueryを記載する必要があります(jQueryが必要であれば)。昔とは違い、今の時代は、サイト制作にjQueryを使わないことがあります。だから記載されていないテーマがあります。

基本的には、WordPress内蔵のjQueryを使おう

jQueryが記載されていなかったら、<head>内や</body>前にリンク先を直接書いても良いです。その場合は、WordPress内蔵のjQueryではなく、自分で記載したjQueryが読み込まれます。
その場合、一部のプラグインが思ったように動かないことがあります。
だから基本的には、WordPress内蔵のjQueryを使った方が良いです。

内蔵jQueryを読み込む方法

functions.phpにjQueryを読み込むように設定します。

function theme_name_files() {
//jQuery読み込み
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'theme_name_files' );

若干異なりますが、下記でもOKです。これは、自作のjsファイル「utility.js」を読み込む記載です。ついでにWordPress内蔵のjQueryも読み込んでくれます。

function theme_name_files() {
//utility.jsの読み込み&jQuery読み込み
wp_enqueue_script( 'utlity', get_theme_file_uri('/utility.js') ,array('jquery') ,'',true);
}
add_action( 'wp_enqueue_scripts', 'theme_name_files' );

このコードでは、array(‘jquery’)がポイントです。この部分は依存するスクリプトハンドル名配列で指定する項目です。
依存するスクリプトは、jQueryになります。jQueryの構文で書いた自作のjsファイルだからjQueryに依存しています。
ハンドル名は「jquery」です。jQueryは、すでにハンドル名「jquery」で登録されています。補足ですが、ハンドル名とは仮名(かめい)のことです。ブログにコメントするとき、ハンドルネームを入れることがありますが、それと同じ意味です。
配列で指定なので、array(‘jquery’)という記載になります。

まとめ

2021年4月現在、jQueryは使用するテーマによって読み込まれたり、読み込まれなかったりします。
読み込みたい場合は、自分で設定する必要があります。
その場合、functions.phpにWordPress内蔵のjQueryを表示させるように追加してください。

facebook
twitter
line
hatena
pocket