【WordPress】簡単にjQueryの「$」を使えるようにする方法

WordPressではjQueryライブラリの使用もサポートしていますが、「$」メソッドを使えません。なぜか「$」を使おうとすると、以下のエラー文が流れます。

$ is not function

簡単に説明すると「$」という名前がWordPressで提供されるJavaScriptの処理と競合する懸念があるため、WordPress側でjQueryの「$」を無効化しているわけです。

今回は、そんな「$」を使えるようにする方法を説明します。

「$」を使えるようにする方法

結論から言うと、以下のコードをあらゆる自筆のJavaScriptの前に書いてください。

// jQueryの「$」を使用可能にする
window.$ = jQuery;

注意として、これは安全性が保障されていない方法です。

つまり、「この方法でトラブルが起こる可能性はゼロです！」とは言い切れません。あくまでも「jQueryの$を使えるようにする」という目的を果たすためだけのコードです。

 管理人の環境では一切不具合は見られませんでした。

記述する場所

コードを書く場所はjQueryを読み込んだ直後が望ましいです。

<!-- jQuery読み込み -->
<?php wp_enqueue_script("jquery"); ?>
<script>
  window.$ = jQuery;
</script>

初心者向けのなんちゃって解説

まず「window」というのは、JavaScriptにおけるグローバルオブジェクトの一つです。

自分で定義しなくても、ブラウザ実行時に勝手に定義されています。また、windowオブジェクトのプロパティは、オブジェクト名称を省略しても機能します。

例えば、よく使う「console.log」という関数は、正しくは「window.console.log」と書かないといけません。ただ、普通「console.log」と書きますし、windowオブジェクトのconsoleプロパティのlogメソッド、という呼び出し方をする必要はないでしょう。

/**
 * 以下はどちらも同じ
 */

// コンソールを出力
console.log("通常のパターン");

// コンソールを出力（windowオブジェクトから）
window.console.log("windowオブジェクトから");

また、このwindowは自由にプロパティを追加することができるため、グローバル変数やsetIntervalのセットに用いることが多いです。

先述のコードも、windowオブジェクトに「$」というプロパティを新たに追加し、そこにjQueryメソッドをそっくりそのまま代入しています。

実行後のwindowオブジェクトの中身を見てみると、「$」プロパティが追加されているのがわかりますね。

グローバルオブジェクトのプロパティにjQueryメソッドを持たせていれば、後に実行されるJavaScriptの処理では、jQuery(～～)ではなく、$(～～)という書き方ができるわけです。