WordPressでjQueryが読み込まれない原因を解決

外部のサーバー(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 を指すようにります。

コメントを残す

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください