WordPressでjQueryを使う方法(Google Libraries APIを設定する。)

wordpress

WordPressでjQueryを使いたいという意見をよく聞きます。
わたしもWordPress使い始めのころは、jQueryを使いたい。でも出来ない。といった状態でした。(TT)

WordPressにjQueryの設定をする際に、ハマったことや、おさえておきたい部分を備忘録的に残しました。

一見して難しそうな、jQueryの設定ですが、基本的なところが理解できれば、設定自体は簡単です。
これからWordPressにjQueryの設定を考えているかたは、是非参考にしてみてください。

[スポンサーリンク]

この章でやること

WordPressで「jQuery UI」を使えるように設定します。
「jQuery UI」は自分でダウンロード&アップロードではなく、「Google Libraries API」を使用するようにします。

修正するファイル

私の場合、ヘッダー(header.php)を修正しました。
たぶん皆さんの環境もヘッダー(header.php)を修正することになると思います。
(こればかりはWordPressのテーマに依存してしまうので、header.phpと言い切ることができません。)

ここから先は、ヘッダー(header.php)を修正することを前提として、話を進めていきます。

ヘッダー(header.php)の修正方法

googleの「Google Libraries API」を読み込むよう修正します。追加箇所は必ずwp_head();より前に記述して下さい。
変更前

	wp_head();

変更後

	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
	wp_deregister_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-core','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js');
	wp_head();

補足

Google Libraries APIの説明については、こちらをどうぞ。

既にjQueryを読み込んでいる場合

既存の「jquery_custom.js」から、「Google Libraries API」が提供しているjqueryに変更します。
変更した方が絶対によいです。
(「jquery_custom.js」のファイル名は、WordPressテーマによって異なります。)

変更前

	wp_enqueue_script('jquery');
	wp_register_script('xxx', get_template_directory_uri().'/js/jquery_custom.js');
	wp_head();

変更後

	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
	wp_deregister_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-core','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js');
	wp_head();

WordPressの既存jQueryを消すことのメリット

先ほど、既にjQueryを読み込んでいる場合は、既存の「jquery_custom.js」から、「Google Libraries API」に変更しました。

既存のjQueryを使うことも可能なのですが、制限があります。
既存のjQueryを使った場合、jQueryでおなじみの「$」という表現が使えなくなります。

既存jQueryの場合、これは動かない

    $( function() {
        $( '#aaa' ) .click(
            function() {
         alert("ok");
            }
        );
    } );

既存jQueryの場合、これだと動く

    jQuery( function() {
        jQuery( '#aaa' ) .click(
            function() {
         alert("ok");
            }
        );
    } );

なぜ既存jQueryだと「$」が動作しないのでしょうか。
既存JQueryファイルには、他jsライブラリファイルとの競合(コンフリクト)を回避する設定「noConflict:function(X)」が記述されています。
この設定が邪魔をして、「$」では動作しないようになっています。

わたしは、「$」を使った記述方法の方がしっくりくるので、既存jQueryはつぶす設定にしています。

環境

WordPressのバージョンは、3.5.xです。

最後に

WordPressへjQueryを設定する方法ですが、実際にやってみると思ったよりも簡単でした。
既存jQueryのままだと、「$」が使えません。
わたしは、これが一番ストレスになりました。(^^;
WordPressへjQueryを設定することは、強くおススメします。
それでは!