【Simplicity2】W3 Total CacheのPage Cacheを正しく使う

Simplicity作者のわいひら様のWebサイトで、キャッシュ系のプラグインである「W3 Total Cache」の使用方法が解説されています。

パソコンとモバイルお分けてキャッシュを作成してくれるW3 Total Cacheプラグインの設定方法です。Wordpress環境でサーバーの応答時間がかなり早くなるのでページ表示が高速化が図れます。

この方法の場合、特定の条件で表示が崩れる場合があります。

スポンサーリンク

症状

スマホ用キャッシュにPC用ページがキャッシュされる

例えばUser Agentが次の場合に発生します。

比較的古いAndroid用のOperaブラウザです。

このブラウザでキャッシュされると、その後iPhoneなどのスマホでアクセスした場合、PC版が表示されてしまいます。

w3-total-cache1

PC用キャッシュにスマホ用ページがキャッシュされる

例えばUser Agentが次の場合に発生します。

2009年発売のブラックベリーに搭載されたブラウザです。

このブラウザでキャッシュされると、その後、普通のPCでアクセスした場合にスマホ表示になってしまいます。

w3-total-cache2

原因

SimplicityでのスマホかPCかの判定は「simplicity2/lib/mobile.php」の「is_mobile」関数で行っています。

この関数では、関数内で定義された文字列がUser Agentにマッチするかどうかで判定を行っています。

一方でW3 Total Cacheも別途User Agentを使用して判定を行っています。

この判定はW3 Total Cacheの設定のUser Agent Groups設定から行います。

この2つの判定基準が異なるため、上で説明したような症状が出る場合があります。

解決策

解決策は2つの判定基準を同じにすることです。

そのためには主に2つの方法が考えられます。

ここで説明する内容は直接本番環境で行わないほうが無難です。

一度ローカル環境で確かめた上で反映を行うなどの手順を踏んでください。

W3 Total Cacheの設定を変更する

Simplicity2のスマホ判定の条件と同じになるように、W3 Total CacheのUser Agent Group設定のUser agentsを変更します。

しかしこの方法は、将来的にSimplicityの方に修正が入る可能性があり、その都度設定を変更する必要があるため、よい方法ではありません。

is_mobileを別途定義する

W3 Total Cahce v0.9.5で以下の方法は使用できなくなりました。
必ず以下のコードを削除するか「is_mobileを別途定義する2」の修正を行ってからバージョンアップを行って下さい。

「simplicity2/lib/mobile.php」の「is_mobile」関数は、先に「is_mobile」関数が定義されている場合は改めて定義されることはありません。

また親テーマよりも先にプラグインや子テーマのfunctions.phpが呼びだされます。

したがって先に自分用のプラグインや子テーマのfunctions.phpにW3 Total Cacheの判定を使用するis_mobile関数を定義すればよさそうです。

具体的な実装は以下になります。

“high”はW3 Total Cacheで設定されるグループ名です。

w3-total-cache3

もし別のグループを割り当てるのであれば、そのグループ名を指定します。

この方法であれば、親テーマが修正されてもスマホの判定はW3 Total Cacheで設定したものになります。

また、W3 Total Cacheの設定はブラウザ上で行えるので、プログラムの修正をせずにいつでも変更することが可能です。

is_mobileを別途定義する2

W3 Total Cache v0.9.5からW3_Mobileは使用できなくなりました。

以下のコードであればv0.9.4でもv0.9.5でも動作します。

まとめ

特定の条件で表示が崩れる可能性と、その解決策を説明しました。

比較的レアなケースではありますが、将来的に表示崩れが発生しうるため、SimplicityとW3 Total Cacheのページキャッシュを使用している方は修正しておいたほうがよいと考えられます。