WordPressで「ZenCache」プラグインを使ってPC用・スマートフォン用などキャッシュファイルを別々に作成・表示する方法

プラグイン紹介

WordPressでユーザーエージェントを判別して振り分け処理ができる「wp_is_mobile」関数や、自作の関数などを使って、PC・タブレット・スマートフォンからのアクセスによって、Webサイトに表示するコンテンツを振り分けている方も多いと思います。

加えて、サイトの表示速度高速化のため、キャッシュ作成プラグインを使っているという方も多いと思います。Webサイトの表示速度は速いに越したことはないですもんね。

キャッシュを有効にしているとよく起こる問題

ところが、上記のような「ユーザーエージェントを判別して振り分け処理＋キャッシュ作成プラグインの利用」でWebサイトを運営していると、遭遇しやすい問題があります。

それは、

  • PCで見ているのにスマートフォン用の表示になっちゃう！
  • スマートフォンで見ているのにPC用の表示になっちゃう！

という状況です。この状況は、Web制作をされている方やブロガーさんなどの間でも遭遇された方も多いのではないでしょうか。

本当はユーザーエージェントを判別して振り分け処理をしているのに、キャッシュされているファイルがPC用（またはスマートフォン用）しか存在しないので、表示が片方に寄せられている状態ですね。

「キャッシュはさせて高速化しておきたい。でも、意図した通りにコンテンツが表示されないのはつらい」というわけで、回避策の例として「PC（またはスマートフォン）からのアクセスの場合はキャッシュファイルを作成しない。キャッシュを無効にしておく」という設定をするサイトもあるそうです。

ですが、この方法ではキャッシュを無効にする設定をしているので、本来望んでいる処理ではないはずです。

理想は、PCからの閲覧はPC用、スマートフォンからの閲覧はスマートフォン用、というように適切に表示されて、なおかつキャッシュも効いている状態だと思います。

こんな状態が望ましいです

そこで、WordPressのキャッシュ作成プラグイン「ZenCache」の有償版（Pro版）を使えば、条件を加えることによってキャッシュファイルの作成ルールを変えることができます。

キャッシュファイルの作成ルールを変えるとこんなことができる

「キャッシュファイルの作成ルールを変える」ことで、シンプルに表現すると「ユーザーエージェントを判別して、それぞれ別々にキャッシュファイルを作成する」ことができます。

その方法がZenCacheの公式サイトで紹介されています。英文なので難しいと感じる方も多いと思いますので、解説を少し加えて以下に流れを書きました。

興味のある方はご参考ください。

条件分岐ファイルを作成する（一例）

まずは、どういったルールでキャッシュファイルを作成するのか、その基になるプログラムを作ります。テキストエディターを開いて「zc-is-mobile.php」というファイルを作成してください。

作成したファイルに、以下のコードを書いて保存します。保存するファイルの文字コードはUTF-8(BOMなし)がいいです。

<?php
function zc_is_mobile() {
 static $salt = null;
 if ( isset( $salt ) ) {
 return $salt;
 }
 if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
 $salt = '';
 } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
 $salt = 'mobile';
 } else {
 $salt = '';
 }
 return $salt;
}

上のコードがやっていることは「zc_is_mobile」関数を作って、ユーザーエージェントを判別して変数「salt」の値を設定しています。このコードはWordPressの「wp_is_mobile」関数の処理を参考にして作られていることがわかります。

例えば、iPhoneでサイトにアクセスした場合「mobile」という値が変数「salt」に格納され、返される処理になっています。

ちなみにこの処理は一例です。私はもう少し条件を加えて、言語別・OS別などでもキャッシュファイルの作成ルールを変更するような処理になるようカスタマイズをしています。

「カスタマイズとか、ちょっとわかんないな～」という方は、とりあえずそのまま使いましょう。

ファイルをアップロードする

SFTPやSCPクライアントを利用してWordPressがインストールされているサーバーに接続します。次に、「wp-config.php」ファイルと同じ階層に、作成した「zc-is-mobile.php」ファイルをアップロードします。

同じ階層にファイルをアップロードする

ファイルを読み込む

アップロードしたファイルを読み込むため「wp-config.php」ファイルを一旦ローカル環境にダウンロードし、テキストエディターを開いて、「wp-setting.php」よりも前に以下の記述を追加します。

require_once(ABSPATH . 'zc-is-mobile.php');

wp-settings.phpの読み込みよりも前に読み込んでおく

下の画像は「wp-config.php」ファイルの一部です。これを例にして追加しましょう。

追加をしたら「wp-config.php」ファイルをアップロードしましょう。これで読み込みの設定は完了です。

ZenCacheプラグインの設定をする

次に、ZenCacheプラグインの設定です。WordPressの管理画面から、「ZenCache」を選択します。

キャッシュ機能を有効にする

ZenCacheの設定画面が表示されますので、まずはキャッシュ機能を有効にしましょう。「Yes,enable ZenCache」を選択します。

「Dynamic Version Salt」の設定

次に「Dynamic Version Salt」の設定をします。※「Dynamic Version Salt」の設定は、ZenCacheの有償版（Pro版）じゃないと設定できないので注意してください。

（「Dynamic Version Salt」は、「これは上級者用の設定だよ」みたいな英文が書かれている）

下の画像のように、「zc_is_mobile()」と入力します。

以上で設定は終了です。「Save All Changes」を選択して設定を保存します。

設定がうまく成功すると別々にキャッシュファイルが作られる

それでは、実際にどういうキャッシュファイルが作成されるのか、以下のサンプルをご参考ください。

PC・スマートフォンそれぞれからアクセスされたときに作成されるキャッシュファイルまでのパスです。

PC用のキャッシュファイルまでのパス

<!-- ZenCache file path: /cache/zencache/cache/http/www-imamura-biz/blog/cms/wordpress/tips/23561.html -->

モバイル用のキャッシュファイルまでのパス

<!-- ZenCache file path: /cache/zencache/cache/http/www-imamura-biz/blog/cms/wordpress/tips/23561.v/mobile.html -->

上記のパスを比べると、保存されているキャッシュファイルまでのパスが違いますよね。同じページを開いても、ユーザーエージェントを判別してキャッシュファイルを別々に作成し、表示してくれます。これができればOK。

まとめ

キャッシュを利用してサイトの表示速度を高速化しているんだけど、

  • キャッシュファイルの作成ルールをカスタマイズしたい
  • ユーザーエージェントを判別して適切にコンテンツを表示したい

という方はご参考くださいますと嬉しいです。

もし本記事を読んで疑問や不明点などが出た場合は、ZenCacheの有償版はサポート付きで購入することができるので、サポートを受けると何かしらのヒントが得られるかもしれません。

また、今回ご紹介した方法は、

  • WordPressプラグインのインストール・有効化などの操作がある程度できる方
  • PHPファイルの作成ができる方
  • ユーザーエージェントについて基本的な理解がある方
  • SFTP・SCPクライアントを利用してサーバーに接続してファイルのアップロード・ダウンロードができる方
  • 何かあった時にすぐに元に戻せるよう、バックアップ・復元ができる方

など、Webの知識をある程度お持ちの方が行うのがおすすめです。

著者:bouya Imamura