アイディアボード

Just another WordPress site

WordPressサイトでStingerとキャッシュ系プラグイン併用時、スマホ用の表示にならない場合の応急処置

   

今日の記事はとっても簡単な内容。
タイトル通りの問題に出会った時のお話です。
事の発端はTwitterでの アリマックス (@chesmin2009 )さんとのやり取り。

本当ならプラグインの設定でスマートフォン時の振分け設定ができれば良いのですが、
ページキャッシュ系プラグインの知識が無かったり、
W3 Total Cacheみたいに設定画面が英語だと頭がハングアップしちゃう方向けの記事です。
対象はstinger3ver20131217です。よっぽど昔でなければ他のバージョンも変わらんでしょう。

ちなみにこの方法はわかり易さと作業の簡単さのみを重視しています。
Stingerの設計思想とはマッチしてない感じの対応策なので、応急処置として扱いましょう。
そしてゆくゆくはちゃんとW3 Total CacheやWP Super Cacheといったページキャッシュ系プラグインについて勉強しましょう。

編集するファイルについて

  • style.css
  • smart.css

これだけ。
FTP接続をしてエディタから編集するのが望ましいですが、なければWordPress標準機能の「テーマの編集」を使います。
管理画面 => 外観 => テーマ編集 と進むか、分からなければ管理者ログインした状態で
“当該サイトのURL”/wp-admin/theme-editor.php にアクセスしましょう。
アリマックスさんのサイト の場合は
gadgetintroduction.com/wp-admin/theme-editor.php
だと思います。WordPressのインストール時に変なことしてなければ、大抵ここ。

style.cssの編集

なんかもう面倒臭いので編集済みファイルをUPしました。こいつをstyle.cssとsmart.cssに上書き保存しちゃってください。
◯ン◯ン◯ン!新しいCSSよ!
Stingerのバージョンが違って表示が崩れた場合にはコメ欄で教えてね。
うまくスマホで表示できていたらめでたしめでたし。

もし編集後も「スマートフォンでPC表示される」時はスマートフォン側のキャッシュをクリアしてね。
それでも治らない方はきっと訳もわからずHead Cleanerプラグインとか使っているんでしょう。
ちゃんと勉強しましょうね。

本日の解説

さて、なんでページキャッシュ系プラグインを使うと表示が乱れるかという話。

理屈はとっても単純。
Stingerは1つのCSSファイルでスマートフォンとPCの表示を切り替えるレスポンシブデザインではないからです。
訪問者がPCなのかスマートフォンなのかをPHPで判断し、PC向けのstyle.cssとスマートフォン向けのsmart.cssを出し分けています。なんちゃってレスポンシブですね。
Stingerのheader.phpの55〜60行目の辺り見れば判るでしょう。<!–css切り替え–>とか書かれている辺りです。

そしてW3 Total CacheやWP Super Cache等のページキャッシュ系プラグインは、アクセスの度にPHPの計算を毎回行うという事を回避して、最初の1回目に生成したHTMLファイルを保存(キャッシュ)します。保存されたHTMLファイルが削除されるまでの間は、PHPの計算をせずに、保存されたHTMLファイルを他の訪問者にも見せるという動作をします。

つまり、最初の1回目のアクセスでPC向け表示になったページは、その後何度アクセスしようとも、保存されたHTMLしか見ることが出来ません。(キャッシュがクリアされるまでは)

と、いうわけで今回はPC向けのstyle.cssにsmart.cssの分もまとめて書くことで本当のレスポンシブデザインにして対処する方法でした。

しかしこれはCSSのファイルサイズが2倍になるという事でもあります。
わざわざCSSを出し分けてファイルサイズを抑える処理を行っていたStingerの設計思想とは逆なので、こんなやり方はさっさと卒業して、W3 Total CacheやWP Super Cacheのお勉強をしましょう。ggr。

 - 解説記事 ,