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

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

スポンサーリンク

— 環境 —
WordPress 3.8.1
WPtouch Mobile Plugin 3.1.5

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

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

header.php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この場合、通常のWEBテーマ表示で出力される 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’); がある場合と同じ以下を出力。

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

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

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 のソースを追いやすいです。

スポンサーリンク
WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!