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」=「$
なんて関数はないよ」というエラーになってしまうのです。
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は気軽に利用できるように思えますが、基本的な仕組みを理解していなければ「なんでそうなるの?」ということも多いですね。。。