こんにちは！
Webエンジニアのちょっくんです！
今回は、WordPressについて書いていきます。
事の始まり
少し前のお話ですが、クライアントからの要望により、WordPress.com（https://ja.wordpress.com/）を使用することとなりました。
初めて扱うため、普段実装している環境との互換性などの不安もありましたが、何事もなくスムーズに作業が進み、「杞憂だったなぁ」と思っていました。
そして、スムーズに終わるはずでした…。
テストアップをして、PCで確認しようとページを開いた時です。
「でっか」
荒い画像が表示され、全ての文字が上のような、どでかい状態になる表示崩れが起きていました…。
スマホ版が表示されていたのです。
キャッシュかな？と思い、キャッシュをクリアしてリロードするも…
「戻んない！？」
試行錯誤しながら調べていると、
今度はPCは平常通りに表示されてスマホでPC版が表示されるようになりました…。
リリース数日前…。
「……ははは…あはは！」
笑うしかありません。
笑顔でコーディングしました。
バグの原因
どうやら「Fastest Cache」が原因のバグのよう・・・
…気を取り直して、引き続き現象について調べていると、どうやらキャッシュ系プラグインを導入した時に起こるバグのようです。
ここでは詳しく書きませんが、WordPressはユーザーがアクセスする際にページを動的に生成しています。
そこで、アクセスの度に生成するのではなく、キャッシュを使って「表示を軽くしよう！」という目的でWP Fastest Cache（https://ja.wordpress.org/plugins/wp-fastest-cache/）などのキャッシュ系プラグインが使用されたりします。
PCとスマホの判定ができるようfunction.phpへコードを追記が必要
そして、キャッシュ系プラグインを導入した際には、PCとスマホの判定ができるようfunction.phpへ各プラグインに沿ったコードを追記する必要があります。
でないと、しっかりとした判定がなされず
①ユーザーがスマホでページ閲覧
②キャッシュが残る
③別のユーザーがPCでページを開く
④キャッシュによりスマホ版が表示される
という現象が起こるようです。
解決策
さて、今回の案件でキャッシュ系プラグインを導入していないことを考えると、WordPress.comでは表示を早くするために、元々キャッシュを残す仕様になっているのかもしれません。
いっそのことキャッシュ系プラグインを導入して対応しようとも考えましたが、状況が複雑化するのも怖かったためプラグイン導入は最後の手段として別の対応を考えました。
色々と試した結果、結局キャッシュを使用しないようにPHPファイルの先頭に以下のコードを追記することで解決しました。
PHPファイルの先頭に以下のコードを追記します
header('Expires: Tue, 1 Jan 2018 00:00:00 GMT');
header('Last-Modified:' . gmdate( 'D, d M Y H:i:s' ) . 'GMT');
header('Cache-Control:no-cache,no-store,must-revalidate,max-age=0');
header('Cache-Control:pre-check=0,post-check=0',false);
header('Pragma:no-cache');
これらのコードが何をしているのか1行ずつ簡単にみていきましょう！
// キャッシュの有効期限を定義。この部分を過去の年月にすることでキャッシュが保存されなくなる。
header('Expires: Tue, 1 Jan 2018 00:00:00 GMT');
// 最終更新日をサイトの現在時刻に定義。
header('Last-Modified:' . gmdate( 'D, d M Y H:i:s' ) . 'GMT');
// 「キャッシュしない」ためのルールを定義。
header('Cache-Control:no-cache,no-store,must-revalidate,max-age=0');
// IE用にCache-Controlの拡張ヘッダを定義。
header('Cache-Control:pre-check=0,post-check=0',false);
// HTTP/1.0クライアントとの下位互換性のために使用されるもの。
// Cache-Control: no-cacheと同じ働きをするコード。
// 飽くまでも「HTTP/1.1 Cache-Control ヘッダー」が存在しない場合の"下位互換性"を目的としているため、「header('Cache-Control:no-cache")」と併用。
header('Pragma:no-cache');
キャッシュについては以上となります。
キャッシュはとても便利なものですが、しっかりとコントロールすることが必要ですね。
ぜひ参考にしていただければと思います！