WordPressで「Uncaught ReferenceError: $ is not defined」エラーが表示された場合の対処方法について解説します。
Uncaught ReferenceError: $ is not definedエラー
このエラーは、JavaScriptの記述不備などによって発生するエラーで、Google Chromeの開発者ツールのコンソール画面などから確認することができます。
Uncaught ReferenceError: $ is not defined
at (index):128このエラーメッセージは「$ が定義されてされていない」という内容となっており、主にjQueryを利用するスクリプトのデバッグ時などに発生します。
WordPressでjQueryを使用する
WordPressでjQueryを使用できるようにする方法
WordPressでjQueryなどのライブラリを使用する場合、直接head要素などにコードを記述するのではなく、wp_enqueue_scriptsフィルターフックを使用して呼び出しを追加します。
function add_user_script() {
wp_enqueue_script(
'ext-script', // スクリプトを登録、削除するための名前を設定する
get_template_directory_uri() . '/js/ext-script.js', // jsファイルの場所を指定する
array('jquery') // jQueryなどのスクリプト名を指定する
);
}
add_action( 'wp_enqueue_scripts', 'add_user_script' );
このようにしておくことで、プラグインやテーマなどで繰り返し使用する共通のライブラリが重複して呼び出されないよう、WordPress内部で処理された最終的なhtmlヘッダが出力されるようになります。
WordPressでのjQueryの標準動作
WordPressではデフォルトでjQueryを「noConflict」モードで使用するようになっています。
jQueryと特徴的なオブジェクト呼び出しに「$」記号を使った方法があり、この記述を使うことで$("p")のようにスクリプト全体の記述を簡略化することができます。
<script>
$(document).ready(function(){
...
});
</script>WordPressでは複数のプラグインやテーマなど、さまざまなモジュールがそれぞれの環境で異なる形で動作しており、これらの互換性の維持や動作の衝突回避のため、jQueryの「noConflict」モードが使われているとのことです。
この「noConflict」モードは、有効化されることで$の短縮形が使用できなくなり、$("p")などで記述されていたスクリプトは本来のjQuery("p")と記述する必要が発生します。
前述の例のようなコードがエラーになってしまう場合、以下のように$の短縮形をjQueryに置き換えることで正しく動作するようになります。
<script>
jQuery(document).ready(function(){
...
});
</script>もし、既存のコードの流用や一部の互換性維持のために「$」の記述を利用したい場合、以下のコードでラップすることで利用可能です。
(function ($) {
...
この関数の内側に$を使ったスクリプトを記述します。
}(jQuery));
コメント