ストークVer1.2.0のアップデートでヘッダーレイアウトが崩れたときにやったこと

こんにちは、アキです。

当ブログで使用しているストークが2018年10月1日にVer1.2.0へアップデートされ、当ブログも最新バージョンへ更新したところヘッダーレイアウトが崩れてしまった。

原因はすぐに分かり現在は解決しています。

同じような状況に陥って検索する人もいるかもしれないので、解決までにやったことを記事にまとめました。参考までにどうぞ。

1 ストークVer1.20でレイアウトが崩れた
2 OPENCAGE公式でアナウンスされていた
3 子テーマ内のheader.phpを更新
4 まとめ

ストークVer1.20でレイアウトが崩れた

10月1日のアップデートを確認できるとすぐに最新バージョンへと更新した。アップデート内容などを何も確認せずに更新してしまうのが僕の悪い癖だ。

更新後はとくに変化など感じずに「ちょっとした調整や、バグ修正だろう」くらいにしか思っていなかったが、同日に更新したブログ記事をスマホ画面で確認した際に気が付いた。

ヘッダーレイアウトが微妙に崩れているではありませんか。ヘッダーとグローバルメニューの間に余白ができてしまっている。

ストークを使用している他の方のブログを覗いてみるとスマホ表示で同じ症状を確認できた。

タイミングがタイミングなので当然アップデートが原因だとすぐに直感するも、なぜか「すぐに修正が入るだろう」と判断して放置してしまった。

2〜3日経過しても修正が入ることもなく、ふと別の方のブログを確認するとレイアウト崩れが修正されていた。「自分で直すやつか！」と、ここでようやく気が付いた。

OPENCAGE公式でアナウンスされていた

まずはブログテーマのアップデート内容を確認しました。

ストークテーマをアップデートしました。（Version1.2.0） | OPENCAGE

やはり今回のアップデート内容に『ヘッダー（header.php）内のグローバルナビ周りのコード修正、それに伴うCSSの修正（header.php, style.css）』という項目があります。

続けて注意点も記載されています。

header.php内の内容が変更となっておりますので、もし子テーマ側でheader.phpを編集している場合はサイトの表示崩れが発生する可能性がございます。

仮に表示崩れが発生した場合は、子テーマ内のカスタマイズファイルをご確認ください。

また、ブラウザキャッシュが影響している可能性もございますので、ブラウザキャッシュの削除や、普段お使いのものとは違うブラウザ等をご確認ください。

最初から答えが出ているじゃないですか。

本来なら更新前にアップデート内容や注意点などを確認するものだと思います。それをしなかったので原因に気が付くのに遅れてしまった。

ようするに「何かしらのカスタムをしている人は子テーマ内に入れているheader.phpも更新してくださいね」ということになる。（親テーマをアップデートしても子テーマが優先されるため。）

というわけで直します。