WordPressでjQueryが動かない場合の対策と設定方法

スポンサード リンク

WordPressのテーマを自作した際にjQueryが動かない(エラーになる)不具合が発生しました。

具体的にはjQueryのコードが一切実行されず、Firebugのコンソールで確認すると「TypeError: $ is not a function」というエラーメッセージが表示される状態に。

結論としては、WordPressのテーマ内の設定方法を変更すことでエラーが解消されて、jQueryが正常に作動するようになりましたので、その設定方法と改善対策をメモしておきます。

プラグイン(lightboxやcolorboxなど)が動かないときにも要確認です。

でもその前に、そもそもWordPressがデフォルトで読み込んでいるjQueryの基本的な挙動(仕様)についても少し触れておきたいと思います。

WordPressが読み込むjQueryについて

jQueryを呼び出している場所はどこ?

WordPressでは各テーマでjQueryを呼び出しています。

どのテンプレートファイルから呼び出しているかは各テーマごとに違うのですが、多くの場合は下記のどちらかです。

header.php

header.phpには基本的に<html>タグや<head>タグが入っています。その<head>タグの中にjQueryを呼び出すコードが書かれている場合があります。

functions.php

functions.phpはテーマの設定を書くファイルです。

前述のheader.phpでjQueryを呼び出さずに、functions.phpでjQueryを呼び出すこともできますので、こちらに書かれている場合もあります。

jQueryを読み込んでいる関数は?

WordPressでjQueryを読み込んでいる関数(コード)は下記です。

wp_enqueue_script( 'jquery' );

このwp_enqueue_script関数はWordPressにデフォルトで含まれているスクリプトを呼び出すことができるコードです。

上記の場合ですと、WordPress内にあるjQueryのファイルを読み込んでいることになります。

通常のjQueryとWordPressのjQueryの違い

jQueryが動かなかった(エラーになった)原因は、「通常のjQuery」と「WordPressのjQuery」との違いにありました。

詳しくはこちらにも書かれていますが、WordPressにデフォルトで用意されているjQueryは、$がコンフリクト(衝突)するのを回避するために、noConflict()が使われています。

簡単に説明すると、複数のライブラリでjQueryの$を共有する場合、それぞれがぶつかってエラーになるのを防ぐために$が使えなくなっているという感じです。

jQueryがエラーになった原因

つまりWordPressのjQueryでは、noConflict()により$が使えなくなっているため、

$(function() {
  $('#ID').text('hoge');
});

というようなコードを書くと「TypeError: $ is not a function」=「$なんて関数はないよ」というエラーになってしまうのです。

noConflict()について詳しくはこちら

jQueryを利用するための対策・設定

【方法1】$jQueryに置き換える

noConflict()が設定されている場合、jQueryのコード内の$jQueryに置き換えることで正常に動作するようになります。

$(function() {
  $('#ID').text('hoge');
});

↓

jQuery(function() {
  jQuery('#ID').text('hoge');
});

ただし、デメリットとしては、

  • 書き換え(置換)に手間が掛かる
  • 管理上、ベターではない
  • コードが長くなりファイル容量が増える
  • CDNなど外部ファイルから読み込んでいる場合、そもそも書き換えできない場合がある

などが考えられますので、個人的にはあまりオススメできません。

【方法2】noConflictモードではないjQueryを読み込む

WordPressのjQueryではコンフリクト(衝突)を避けるためにnoConflict()が利用されているという説明をしましたが、コンフリクトの可能性がない場合(衝突するようなJavaScriptのライブラリを使用しない場合)ですと、通常のjQueryを読み込めば良いことになります。

その場合、WordPressデフォルトのjQueryの呼び出しを、CDNなどに置き換えてやればOKです。

wp_enqueue_script('jquery');

↓

wp_enqueue_script( 'theme-jquery-script', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' );

私の場合、jQueryと衝突するようなライブラリ(prototype.jsなど)を利用する予定がなかったので、この方法で「TypeError: $ is not a function」というエラーを回避し、jQueryを正常に利用できるようにしました。


WordPressは気軽に利用できるように思えますが、基本的な仕組みを理解していなければ「なんでそうなるの?」ということも多いですね。。。