【全俺が泣いた!】WordPressテーマのCSSでスマホ用メディアクエリが効かないときの対処

はじめに言っておきたい。
私はCSSが大の苦手だ
それに、WordPressで他人が作ったテーマに手を入れて改造するのも、本当は好きじゃない。だから、WordPressテーマを選ぶ際には時間をかけて吟味したのだ。
それでも自分のサイトであるから、何らかのオリジナリティは欲しくなる。それに最初は良いと思って使っていても、細部まで完璧なテーマは存在しないものだ。なので、CSSとプログラムに手を入れて多少の改造はしている。
・・・先日、たまたま気まぐれにスマホで自分のサイトを見てみると、サイト名が表示されていないことに気が付いた。去年スマホがお亡くなりになった際に機種変更したが、そもそもスマホのブラウザでネットサーフィン(死語)をするのが好きではないので、特にチェックをしていなかったが(ブラウザのユーザーエージェントでスマホかどうかをチェックする関数を自作していたので)ユーザーエージェント情報が変わったのだろう、ぐらいに思っていた。
とはいえ検証するのは面倒だから、週末になるのを待って昨夜着手したものの、やはりロジック的にちょっと甘い部分があったので修正した。が、思えばこれが悪夢の始まりだった。
ちょっと整理すると、私の場合は・・・

  1. WordPressのテーマを直接修正している
  2. 使っているテーマの子テーマの存在を知って導入し、子テーマにも修正を加えている
  3. 自作のスマホ判定関数でCSS要素を操作している
  4. パソコンのブラウザを4種類使い分けていて、それぞれプラグインでユーザーエージェントを切り替えている(主にTwitterを旧UIで使うため)
  5. スマホのブラウザは2種類(FirefoxとChrome)を入れている

問題は上記3.の関数部分とそのCSSだろうと踏んでいたが、いくらデバッグしても問題があるとは思えない。とすると、問題は1.2.に波及する。それを確認するのに4.5.の検証の複雑さと面倒臭さ(ブラウザのユーザーエージェントを偽装設定している)がある。
オリジナルテーマ部分と改造部分をキッチリ子テーマに引き継いで管理していなかった不手際後悔したものの、こうなっては仕方がない。結局、改造部分を全て子テーマに移管し、パソコンとスマホのそれぞれのブラウザで検証するという、面倒な仕事をするしかない。結局徹夜したが、どうもスマホでCSSのメディアクエリ部分が効いていないのは明らかだ。不具合があるは、アイコンと共にサイト名を表示する箇所だけなのだが・・・。
今どき標準でレスポンシブデザインになっていないPukiWikiをスマホ対応にしたり等、PukiWiki本体を含め散々改造している私だが、そもそもWordPressPukiWikiほどシンプルかつ単純ではない。しかも他人が作ったテーマに手を加えているので、前提として自分が知らない「何か」がよく分からない。
何度もブラウザのキャッシュを削除してはコードやCSSをデベロッパーツールで調べてみるのだが、どうもオカシイ。いや、絶対にこのCSSの設定が入り込むハズがないし、PHPとHTMLコードは理論的に完璧なハズだ。それに何故かUSBでスマホを接続してChromeでデバッグしようとしても、パソコンのChrome側でデバイス(スマホ)を認識しない。何故だ?何故なんだ??
ググり倒し、CSSとPHPとHTMLコードを精査し、ChromeとFirefoxのデベロッパーツールで追いかけてみるものの、全然分からない。コーヒーの飲み過ぎとタバコの吸い過ぎで胃が気持ち悪い。徹夜で鈍っている頭はどんどん深みにハマり、解決から遠のいて行くようだ。
検証する過程で、パソコンのOperaとFirefoxは正しい表示をするし、スマホのFirefoxも正しく表示するので、余計に混乱したのもある(実は勘違いだったのもあった)。改めてサーバ側とパソコン側での差異を確認するも、問題はない。もうとっくに日が暮れているというのに。

( ゚д゚)ハッ! ・・・もしや?

WordPressの高速化のため、プラグインでキャッシュを組み込んで遅延負荷分散をしているのを、スッカリ忘れていた。まさかWordPressのキャッシュとは思わなかったが、キャッシュを削除して検証すると、今までの悪夢がウソのように全て正常な結果となった。
プログラマであれば、プログラム(コード)の作成や修正は簡単だし容易い。しかし、その検証(デバッグ)は作成や修正の何倍も労力がかかる。実に単純かつ当然の話だし、私はそれが本職でもある。
最近はPukiWikiばっかりいじっていたのでスッカリ忘れていたが、WordPressのキャッシュだとは思い至らなかった|||orz
WordPressでデバッグする際は、キャッシュに気を付けろ!(泣)

そんな一日だった。(´ー`)y-~~oO

 

 

この記事が気に入ったら
いいね ! をお願いします


SEの日常カテゴリの最新記事