外部のサーバー(CDN)からjQueryを読み込んでいましたが、wp_enqueue_script('jquery'); を使うことで、jQueryが読み込まれなくなりました。
あまり無いトラブルかもしれませんがまとめます。
wp_enqueue_script でJSファイルの依存関係に jQuery を追加
他のスクリプトが jQuery に依存している可能性があるので、明示的に jQuery を依存関係に設定します。
wp_enqueue_script( 'common-script', get_template_directory_uri() . '/js/common.js', ['jquery'], '1.0.0', true );これでjQueryを依存するスクリプト(common-script など)を読み込む際に jQuery が確実にロードされます。
jQueryが読み込まれているか確認
ブラウザの 開発者ツール(F12) を開いて、Consoleで以下のコードを実行します。
console.log(jQuery);ブラウザの開発者ツールを使用してコードをコピー&ペーストする際、セキュリティ警告が表示されることがあります。これは、悪意のあるスクリプトの実行を防ぐための措置です。
「allow pasting」と入力してEnterを押すと、一時的にペーストを許可できますが、意図しないコードが流れ込むリスクがあるため、手動での入力が推奨されます。
jQueryがロードされていない場合、変数がundefinedと表示されます。
この場合、ブラウザの開発者ツールの「Network」タブでjquery.min.jsがロードされているか確認してください。
もし「function」と表示されるなら、jQueryは読み込まれていますが、別の原因で動作しない可能性があります。
Uncaught TypeError: $ is not a function at script.js
これはjQueryの$が認識されていないことを示しています。
この問題は、WordPressなどの環境で、jQuery以外のJavaScriptライブラリと共存させるために、$のショートカットが無効化されていることが原因です。
$のエイリアスを有効にする
解決策として、$をスコープ内でエイリアスとして渡す方法があります。
これにより、$のエイリアスを有効にし、スクリプトが正しく動作するようになります。
jQuery(document).ready(function($) {
// jQueryのコードを書く
});function($) の $ に jQuery を渡すので、そのスコープ内では $ が jQuery を指すようにります。