更新日: 2014年2月16日
WordPress

WordPress で WPtouch のモバイルテーマで jQuery を動作させる際の注意点

一昨日、はてなブックマーク総数カウンター | EasyRamble を作ったのですが、WPtouch のモバイルテーマ表示時に動作しないというバグが発生しました。現在は直っています。Ajax(jQuery) + Ruby で作ったのですが、その際に気付いたモバイル表示用のプラグインである WPtouch のテーマ表示での jQuery の動作に関する注意点。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

— 環境 —
WordPress 3.8.1
WPtouch Mobile Plugin 3.1.5

通常のWEB表示、WPtouchモバイル表示の両方で jQuery を動かす

行った対策を結論から説明すると、まず WordPress のヘッダテンプレート（header.php）で以下のように書く。

header.php

<?php
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_head();
?>

<?php

wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

wp_head();

以前書いていた wp_deregister_script(‘jquery’); を削除し、読み込まれる jQuery に jQuery.noConflict(); が追加されるようにしました。

次に、WordPress の投稿記事内に書く jQuery のコードを以下のようにする。

<script>
  (function($) {
  $(document).ready(function() {
    ...
  });
  })(jQuery);
</script>

(function($) {

$(document).ready(function() {

...

});

})(jQuery);

</script>

(function($) {
})(jQuery);

で、通常の$関数を囲み即時関数にします。以降解説。

wp_deregister_script(‘jquery’); ありの場合に読み込まれる jQuery

以前は、header.php に以下のように書いていた。

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_head();
?>

<?php

wp_deregister_script('jquery');

wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

wp_head();

こうすると、通常のWEBテーマ表示時には、hmtl のヘッダー部で以下の scritpt タグを出力して jquery が読み込まれる。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=3.8.1'></script>

1	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=3.8.1'></script>

jquery.min.js?ver=3.8.1 には、jQuery.noConflict(); は追加されていないので、普通に$関数を使って jQuery を動作させられます。

しかし、一方 WPtouch のモバイルテーマ表示では、以下の script タグを出力していました。

<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

1 2	<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> <script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

jquery.js?ver=1.10.2 には、jQuery.noConflict(); が追加されており、$関数を普通に書くと jQuery が動作しない。これが WPtouch のモバイルテーマ表示時に、jQuery コードが動作しないバグの原因でした。前述した即時関数の書き方にすると、動作させることができます。

しかし、そうすると通常のWEB表示時に動作しなくなる。

次、バグを解決した方法。

wp_deregister_script(‘jquery’); なしの場合に読み込まれる jQuery

wp_deregister_script(‘jquery’); を削除しました。

<?php
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_head();
?>

<?php

wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

wp_head();

この場合、通常のWEBテーマ表示で出力される script タグは以下。

<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

1 2	<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> <script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

jquery.js?ver=1.10.2 には jQuery.noConflict(); が追加されます。それと jquery-migrate.min.js?ver=1.2.1 が読み込まれる。jquery-migrate.min.js は現在削除された jQuery の API を含む jQuery ライブラリ。過去に作成された WordPress プラグインとの互換性を保つために読み込まれるらしい。

一方 WPtouch のモバイルテーマ表示では、wp_deregister_script(‘jquery’); がある場合と同じ以下を出力。

<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

1 2	<script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> <script type='text/javascript' src='https://easyramble.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

jquery.js?ver=1.10.2 には、jQuery.noConflict(); が追記されている。

行った変更まとめ

まとめると、WPtouch は wp_deregister_script(‘jquery’); を記述している場合にも、その設定を無視して jQuery.noConflict(); を追記した版の jQuery を読み込む。つまり、いずれのケースでも WPtouch は jQuery.noConflict(); が強制される。

したがって、通常のWEBテーマ表示、WPtouch のモバイルテーマ表示時の両方で jQuery を動作させるためには、jQuery.noConflict(); が有効になっている状態で動作させる必要があり、最初に書いた結論の方法を取りました。

jQuery を WPtouch で動かすために、行った変更まとめ。

WordPress テンプレートの header.php

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_head();
?>

<?php

wp_deregister_script('jquery');

wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

wp_head();

↓

<?php
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_head();
?>

<?php

wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

wp_head();

WordPress 投稿記事内の jQuery のコード

<script>
  $(document).ready(function() {
    ...
  });
</script>

$(document).ready(function() {

...

});

</script>

↓

<script>
  (function($) {
  $(document).ready(function() {
    ...
  });
  })(jQuery);
</script>

(function($) {

$(document).ready(function() {

...

});

})(jQuery);

</script>

wp_deregister_script, wp_enqueue_script の実際の動作

実際の動作の確認から推測すると、以下の動作になっていると思います。

wp_deregister_script( $handle ); は、wp_heads(); でデフォルトで読み込む JavaScript から、指定した $handle を削除する。その後、wp_enqueue_script(‘jquery’,’…’); を実行すると、jQuery.noConflict(); を追加せずに、そのまま第二引数で指定した jQuery を読み込む。

一方で、wp_deregister_script( $handle ); を使わず、単に wp_enqueue_script(‘jquery’,’…’); のみを使うと WordPress のデフォルトの動作と同じ。つまり、jQuery.noConflict(); が追記されて jQuery が読み込まれ、jquery-migrate.min.js も読み込まれる。

ただし、WPtouch のモバイルテーマ表示では、wp_deregister_script(‘jquery’); を記述してもしなくても、jQuery.noConflict(); が追記された jQuery が読み込まれる。

wp_deregister_script(‘jquery’); の記述に関して検索してみたところ、ほとんどの情報が jQuery.noConflict(); を無効にするため wp_deregister_script と wp_enqueue_script をセットで使う、と説明してあります。今回の用途では、wp_register_script( $handle, $src ) を使うほうが正解かもです。試してませんけど。

あと調査の際に見つけたサイトですが、PHPXref 0.7: WordPress (latest release) が WordPress のソースを追いやすいです。