こんにちは、アキです。
当ブログで使用しているストークが2018年10月1日にVer1.2.0へアップデートされ、当ブログも最新バージョンへ更新したところヘッダーレイアウトが崩れてしまった。
原因はすぐに分かり現在は解決しています。
同じような状況に陥って検索する人もいるかもしれないので、解決までにやったことを記事にまとめました。参考までにどうぞ。
ストークVer1.20でレイアウトが崩れた
10月1日のアップデートを確認できるとすぐに最新バージョンへと更新した。アップデート内容などを何も確認せずに更新してしまうのが僕の悪い癖だ。
更新後はとくに変化など感じずに「ちょっとした調整や、バグ修正だろう」くらいにしか思っていなかったが、同日に更新したブログ記事をスマホ画面で確認した際に気が付いた。
ヘッダーレイアウトが微妙に崩れているではありませんか。ヘッダーとグローバルメニューの間に余白ができてしまっている。
ストークを使用している他の方のブログを覗いてみるとスマホ表示で同じ症状を確認できた。
タイミングがタイミングなので当然アップデートが原因だとすぐに直感するも、なぜか「すぐに修正が入るだろう」と判断して放置してしまった。
2〜3日経過しても修正が入ることもなく、ふと別の方のブログを確認するとレイアウト崩れが修正されていた。「自分で直すやつか！」と、ここでようやく気が付いた。
OPENCAGE公式でアナウンスされていた
まずはブログテーマのアップデート内容を確認しました。
ストークテーマをアップデートしました。（Version1.2.0） | OPENCAGE
やはり今回のアップデート内容に『ヘッダー（header.php）内のグローバルナビ周りのコード修正、それに伴うCSSの修正（header.php, style.css）』という項目があります。
続けて注意点も記載されています。
header.php内の内容が変更となっておりますので、もし子テーマ側でheader.phpを編集している場合はサイトの表示崩れが発生する可能性がございます。
仮に表示崩れが発生した場合は、子テーマ内のカスタマイズファイルをご確認ください。
また、ブラウザキャッシュが影響している可能性もございますので、ブラウザキャッシュの削除や、普段お使いのものとは違うブラウザ等をご確認ください。
最初から答えが出ているじゃないですか。
本来なら更新前にアップデート内容や注意点などを確認するものだと思います。それをしなかったので原因に気が付くのに遅れてしまった。
ようするに「何かしらのカスタムをしている人は子テーマ内に入れているheader.phpも更新してくださいね」ということになる。（親テーマをアップデートしても子テーマが優先されるため。）
というわけで直します。
子テーマ内のheader.phpを更新
FTP的なソフトを使って親テーマフォルダから最新のheader.phpをダウンロードします。
『wp-content > themes > jstork』が親テーマフォルダです。
ダウンロードした最新のheader.phpを子テーマフォルダにアップロードするだけですが、もともと子テーマにheader.phpを入れていたということは何かしらのカスタムのためにコードを記述していたことになる。
最新のheader.phpにも同じコードを記述しないといけない。
ということで『wp-content > themes > jstork_custom』の子テーマフォルダから旧header.phpをダウンロードします。
旧header.phpに追加記述されているコードを新header.phpへとコピペします。作業するときは分かりやすいように旧header.phpの名前を変えておいた。
僕の場合は、
- Font AwesomeのCDN用コード
- Font Awesome AnimationのCDN用コード
- Search ConsoleのHTMLタグ
こういうやつ。
スクショを撮った後にFont Awesomeのバージョンが古いことに気がついた。v5.4.1が最新でした。
コピペが済んだ新header.phpを子テーマへと上書きアップロードをして完了です。
さっそく表示の確認。
確認すると無事にヘッダーレイアウトの崩れが直っていました。（もし反映されなかったらキャッシュの削除を試すといいかも。）
これで3日ほどモヤモヤしていたことが解決。
ド素人でもどうにでもなりました。
まとめ
微妙なレイアウト崩れなんて誰も気にしないかもしれませんが、自分のブログの表示が少しでも崩れていたら気になりますよね。直さないと気が済まないと思います。
もし同じ症状に陥ってこの記事にたどり着いた方は、子テーマ内のheader.phpを更新してやってくださいね。あとアップデート内容はしっかりチェックした方がいいという話でした。
