【建設業】WordPress更新後のスマホ表示崩れを2日で復旧

ご相談の経緯

30ページ規模のコーポレートサイトにおいて、WordPress本体および複数プラグインのアップデートを行った直後から、スマートフォン表示時に主要ページのレイアウトが大きく崩れる事象が発生しておりました。パソコン表示には影響がなく、社内での原因切り分けに難航されていたところを、お問い合わせ数の減少が無視できない水準となったタイミングでご相談をいただいた次第です。

調査と原因

現状のサイト一式を検証環境に複製し、本番には触れない状態で再現テストを実施いたしました。崩れが発生していたのは、テーマ独自のレスポンシブ用CSSと、新たに更新された装飾系プラグインが出力するCSSとの間で、適用順とメディアクエリの優先度が想定外の組み合わせになっていたことが原因と特定できました。

あわせて、ページ高速化系プラグインがCSSを結合・圧縮する設定になっており、結合後の順序が崩れの原因をさらに見えにくくしていることも確認できました。

対応内容

テーマ側のスタイル読み込み順序を調整したうえで、装飾系プラグインの一部スタイルを子テーマで上書きする形に整理しました。また、高速化プラグインの結合対象から、影響範囲の大きい数本のCSSを除外する設定変更を加えています。

検証環境での修正確認後、本番反映は更新作業の発表を行ったうえで実施し、反映直後にスマートフォン・タブレット・主要なパソコンブラウザでの最終確認を行いました。

結果

ご相談からおおむね2営業日でスマートフォン表示は従前の状態に復旧いたしました。あわせて、今後のアップデートに際してもCSS適用順を担保できるよう、子テーマ側で読み込み制御を行う構成へ整えております。お問い合わせ数も復旧後ほどなくして以前の水準に戻ったとのご報告をいただいております。

費用の目安

ライト実装プラン：50,000〜90,000円（税込）
サイトの規模・状態により変動します。
初回調査：20,000円（診断のみのご利用も可）