WordPressでjQueryがエラーになる原因について

はじめに

WordPressでjQueryが動作しない場合の原因や対処方法は、多くのサイトで説明されています。

この記事では、WordPressに同梱されているjQueryライブラリとの違いについて触れ、jQueryの記述方法を詳しく説明します。

一般的に以下のようなエラーメッセージがコンソールに表示されます。

Uncaught ReferenceError: $ is not defined

WordPressにはjQueryライブラリが同梱されていますが、一般的にはGoogleのjQueryライブラリを参照する場合もあります。
この二つのライブラリには違いがあります。

Cocoon 2.9.1以降、GoogleではなくWordPressに同梱されているjQueryライブラリを使用するように変更されました。

WordPress同梱のjQueryライブラリ（/wp-includes/js/jquery/jquery.min.js）の最後の1行には以下のようなコードが追加されています。

jQuery.noConflict();

このコードは、jQueryと他のJavaScriptライブラリの$シンボルの競合を防ぐためのメソッドです。特に、$という短縮記法を他のライブラリが使用している場合、このメソッドが競合を回避します。

そのため、以下のような記述ではエラーが発生します。

$(function () {
  // DOMの読み込み完了後に実行される処理
});

WordPressのjQueryライブラリ以外を使用している場合、他のライブラリが短縮記法として$シンボルを使用していなければ、上述でエラーとならない場合があります。

安全にjQueryライブラリを使用するために、以下のように記述します。
jQueryの短縮記法としての$をローカルに使いながら、DOMが完全に読み込まれた後に実行したい処理を記述します。

jQuery(function ($) {
  // DOMの読み込み完了後に実行される処理
});

似たような構文があり、勘違いをしそうなので、まとめます。

$(function () {
  // DOMの読み込み完了後に実行される処理
});

上記の構文は、DOMが読み込まれた後に処理を実行します。

以下の構文は一見似ていますが、$をローカルに使える即時実行関数となります。
このままではDOMの読み込みが完了していることは保証されません。

(function ($) {
  // 即時実行される処理
})(jQuery);

このため、即時実行関数を使用する場合は、以下のようにDOMが完了した後の処理を記述する必要があります。

(function ($) {
  // スクリプトが読み込まれた直後に実行される
  $(function () {
    // DOMの読み込みが完了した後に実行される
    ...
  });
})(jQuery);

WordPressでjQueryを使用する際は、ライブラリの競合やDOMの読み込みタイミングに注意が必要です。
正しい記述方法を理解することで、エラーを回避できます。