WP Super CacheでWPTouchをキャッシュする

WP Super Cache、WPTouch同時利用の今昔

以前はWP Super CacheとWPTouchを共存させると、PC用のページとモバイル用のページがごっちゃになってキャッシュされるという問題があった。
これは同じURLに対してキャッシュファイルがひとつなので、先にPCでアクセスするPC用のページがキャッシュされ、先にモバイルでアクセスするとモバイル用のページがキャッシュされるという理由によった。

この問題を回避するためにWPTouchの対象となるユーザーエージェントからのアクセスはキャッシュを利用しない、という設定をWP Super Cache側でしていたのだが、モバイルのアクセスが増えてくるとWPTouchによるモバイル用ページもしっかりキャッシュしないと辛くなってくる。

現在は幸いなことにPC用とモバイル用を別々にキャッシュすることができるようになっている。
技術の進歩は素晴らしい。

というかこのモバイルサポート（と言うのだ）はかなり前からあったのだが、WP Super Cacheの1.1でWPTouchをサポートするプラグインが追加されたことによりWPTouchとの親和性が高まり、楽に実現できるようになった。

設定方法

WP Super Cache側の設定のみでOK。

* モバイルデバイスサポートを有効にする
* 「プラグイン」タブでWPTouchプラグインを有効にする
* キャッシュファイルの提供にmod_rewriteを利用する場合は.htaccess等にRewriteRuleも設定

難しいことは何もない。

動作確認方法

* キャッシュファイルが生成されているか
* index.htmlの内容がPC用ページになっている
* index_mobile.htmlまたはindex-mobile.htmlの内容がモバイル用ページになっている

PC用ページとモバイル用ページの区別がちゃんとされているかについては、たまたまうまくいって見える場合もあるので何度かキャッシュをクリアしたり生成し直したりして入念に確認した方が良い。

モバイルデバイスサポートの動作

モバイルデバイスサポートの動作としてはPC用ページはキャッシュの該当ディレクトリのindex.htmlに、モバイル用ページはindex_mobile.htmlまたはindex-mobile.htmlに保存される。

ガラケーでアクセスするとindex-wp.htmlというキャッシュが作られたりするので、Ktai Styleといったガラケー用プラグインとの組み合わせでも多分使えるはず。コードに手を入れる必要はあるかもしれない。

トラブルシューティング

そこに落とし穴があればはまる運命にあるのかもしれません。いろいろ踏みました。

モバイル用のキャッシュが生成されない

モバイルデバイスサポートとはなんだったのか、という状態。
index.htmlは生成されるがindex_mobile.htmlが生成されない。

原因はWP Super Cache側で以前ほどこしたWPTouch回避の設定が生きているため。
具体的にはWP Super Cache設定画面の「詳細」タブの「除外するユーザーエージェント」あたりとか。

PC用とモバイル用のキャッシュがごっちゃになる

解決されたはずの問題が解決されてないじゃないか、という状態。

対処としてはWP Super CacheとWPTouchのバージョンを最新にすれば直る。

原因の基本的な考え方としては

* WP Super Cacheがモバイルと判断するユーザーエージェント
* WPTouchがモバイルと判断するユーザーエージェント

これがずれているとごっちゃになる。

例えばWP Super Cacheがモバイルと判別しない場合はindex.htmlにキャッシュするが、そのアクセスがWPTouchにモバイルと判別された場合index.htmlにWPTouchの出力がキャッシュされることになる。同様にその逆が起こった場合はindex_mobile.htmlにPC用のページがキャッシュされる、といった塩梅。

WP Super CacheのWPTouchプラグインはこのズレを解決するためにあり、プラグインを有効にするとユーザーエージェントの判別にWPTouch本体の関数を使うようになるためズレがなくなる。
ただしWPTouchのバージョンが古いとその関数のうちひとつが足りないのでWP Super Cacheが独自の判別方法を使う動作になってしまい、ズレをなくすことができない。
足りない関数はWPTouchのChangelogを見るにおそらく1.9.25くらいで追加されたものだと思うのだが、とにかく最新にしといたらいいだろう。

ちなみに自分はWPTouchを最新版にするのをさぼってがためにコードの海をさまよう羽目になった。まったく、グローバル変数上等のWordPress界隈の文化はコードリーディングするにはつらい・・・

なおWPTouchのバージョンアップを渋ったのは、アップデートしたらカスタマイズしてたテーマが死ぬという理由によった。
大したカスタマイズ量ではなかったので諦めていったん破棄して再適用した。

モバイルテーマをいったんOFFにするとONにできなくなる

モバイルテーマをOFFにしてPC用表示にしたときにモバイルテーマをONにするリンクが表示されない、という事案が発生。
これはなんとなればPCでアクセスしたときのキャッシュが表示されているから。

一方でキャッシュがなければモバイルテーマをONにするためのリンクが表示されるが、今度は逆にPCでアクセスしたのにモバイルテーマONのリンクが表示されているという状態になる。

スマートに対処する方法が見つからず、以下の方法で乗り切った。

* wptouch.phpを修正して、モバイルテーマONは常に出力
* モバイルテーマONはスタイルで非表示に
* モバイルアクセスかどうかをJavaScriptで判定して、モバイルだったらjQueryで表示

デフォルトで非表示にしているのはJavaScript無効の場合に対する備え。