WordPressでjQueryを読み込む方法。動かない時の対策も紹介。

jQueryは、手軽に使えるJavaScriptライブラリなので、Web制作で幅広く利用されていますよね。ただし、WordPressでjQueryを使う際には、少し注意が必要です。

当記事では、WordPressでjQueryを扱う時によくある以下の問題について解説していきます。

WordPressではjQueryをどうやって読み込むの？
なぜjQueryが動かないの？

WordPressでjQueryを読み込む方法

まず、知っておきたいのが、WordPress本体に「jQuery」が組み込まれていることです。本来、jQueryを利用するには、専用のファイルを自分で用意して読み込む必要があります。

WordPressでは自動で内蔵のjQueryを読み込むため、その手間が必要ないんですよね。今回は、以下の2つの方法をそれぞれご紹介します。

WordPressのjQueryを利用する方法
独自のjQueryを利用する方法（非推奨）

なお、JavaScriptファイルを読み込む方法が分からない方は、以下で解説してますので、こちらを参考に実装してください。

2023.11.20

WordPressでJavaScriptを外部ファイルで読み込む方法

Webサイトに何かしら動きをつけたい時にJavaScriptが必要になります。しかし、WordPress開発に慣れていないと、JavaScriptをどう読み込むべきか分からないですよね。当記事では、WordPressでJavaScriptを外部ファイルとして読み込む基本的な方法をご紹介します...

WordPressのjQueryを利用する方法

WordPressにデフォルトで備わっているjQueryを利用する方法です。この場合、「wp_enqueue_script()」を使って何かしらのjsファイルを読み込んでいれば、jQueryが自動的に読み込まれます。

特に読み込み作業がないため非常に楽ですが、「$」をそのまま利用できない点にご注意ください。

例えば、以下をjsファイルに書いても「Uncaught TypeError: $ is not a function…」とconsoleにエラーが表示されてうまく動作しません。

// NG例
$(function() {
  $('.selector').addClass('active');
});

WordPressでは他のライブラリとの衝突を避けるため、jQueryファイル内で「noConflict()」が実行されています。（$を使えなくするメソッド）

jQuery.noConflict() | jQuery API Documentation

そのため、以下のように「$」を「jQuery」に書き換える必要があります。これで正常に動作しますが、「$」が使えないので非常に不便です。

// OK例
jQuery(function() {
  jQuery('.selector').addClass('active');
});

そこで、「$」を使いたい方は、以下のように書き換えてみてください。

// OK例（$を使えるのでオススメ）
jQuery(function($) {
  $('.selector').addClass('active');
});

この書き方であれば、「jQuery(function($) {〜})」の中でのみ「$」を使えるようになります。この方法が最も書きやすいと思いますので、ぜひ試してみてください。

独自のjQueryを利用する方法（非推奨）

自分で用意したjQueryを利用する方法については、正直あまりオススメしません。というのも、独自のjQueryを使うためには、WordPressのjQueryを無効化して新たに読み込む必要があるからです。

WordPressでは、テーマ以外にもプラグインによって様々な機能を拡張できます。もちろん、WordPress内蔵のjQueryを使う前提としたプラグインも存在するため、これらが正常に動作しなくなる可能性があるんですね。

どうしても自分で用意したい方は、以下の書き方で読み込んでみてください。（functions.phpに記載）

/* 独自のjQueryを読み込む */
add_action( 'wp_enqueue_scripts', function(){

  // デフォルトのjQueryの読み込みを無効化
  wp_deregister_script( 'jquery' );

  // 好きなjQueryを読み込み
  wp_enqueue_script( 'my_jquery', '読み込むjQueryのパス', );

} );

jQueryがうまく動かない時は？

まずは、さきほど紹介した以下2つの対策を行っているかご確認ください。

WordPressのjQueryを利用	「$」を使っていないか？→「jQuery」に書き換える
独自のjQueryを利用	jQueryを2重読み込みしていないか？→ソースコードで確認する（不要な読み込みをなくす）

ここまで対策して正常に動作しない場合は、自分のコードを書いたjsファイルがjQueryの後に読み込まれているかご確認ください。（jQueryよりも先にコードが読み込まれると動作しません。）

「wp_enqueue_script()」で読み込んでいる場合は、第三引数にスクリプトの依存関係「array(‘jquery’)」を指定してください。こちらを利用することで、jQueryの後に読み込ませることができます。

/* jQueryでコードを書いたファイル（my-script.js）を読み込む場合 */
add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/my-script.js', array( 'jquery' ) );
} );

consoleにエラー「Uncaught ReferenceError: jQuery is not defined」が表示される場合は、こちらを疑ってください。