テスト環境でTOPページのフッターが表示されない原因は、HTML構造の崩れでした
保守管理をメディアプライムスタイルにご変更希望のお客様のサイトをバージョンアップしたいというご要望を叶えるためテスト環境を構築する中で、「ファイルもある」「footer.php も正しく書かれている」
それなのに TOPページだけフッターが表示されない という現象が発生しました。
一見するとテーマやWordPressの不具合、あるいは移行ミスを疑ってしまいそうなケースですが、実際の原因は もっとシンプルで、そして見落としやすいポイントでした。
今回は、その調査から解決までの流れを備忘録も兼ねてまとめておきます。
発生していた症状
- テスト環境でTOPページを表示すると、フッターが出ない
- 下層ページではフッターが正常に表示される
- footer.php には問題なし
- index.php / page.php にも get_footer() は記述済み
- CSSで非表示にしている様子もなし
つまり、「呼んでいるはずなのに、フッターが存在しない」という状態でした。
DevToolsで確認して分かったこと
Chromeの開発者ツールでDOM構造を確認したところ、決定的な違和感が見つかりました。
TOPページのHTML構造が、次のような形で終了していました。
<body> <div class="sampleContainer samplefix"> </div> </body> </html>
本来ここにあるはずのfooter要素が、DOM上にまったく存在していない状態です。
この時点で、
- CSSの問題ではない
- WordPressの条件分岐でもない
ということが確定しました。
原因：index.php 内のHTML構造崩れ
調査を進めた結果、原因は index.php のHTML構造が途中で崩れていたことでした。
具体的には、
- divタグを開いたまま閉じていなかった
- HTMLコメントで大きなブロックをコメントアウトしていた
- divの対応関係が曖昧なまま、ページ末尾まで進んでいた
この状態だと、PHP的には get_footer() が実行されていても、ブラウザ側では HTMLの解釈が途中で破綻し、結果としてフッターが描画されません。
なぜ本番では問題なかったのか？
本番環境では問題なく表示されていたため、余計に原因特定が難しくなっていました。
これはよくある話ですが、
- 本番では古いブラウザやキャッシュの影響でHTMLが“うまく補完されていた”
- テスト環境では最新ブラウザでHTML構造が厳密に解釈された
その差によって、潜在的に存在していた構造ミスが顕在化した形です。
実際に行った対応
今回は、次の対応を行いました。
- index.php 内のHTML構造を整理
- 開いたままになっていた divタグ を正しく閉じる
- HTMLコメントアウトを、PHPコメントに置き換える
- DOMが最後まで正しく構築される状態を作る
その結果、TOPページでも無事にフッターが表示されるようになりました。
今回の対応から得られた学び
今回の件で改めて感じたのは、
- 「ファイルがある＝表示される」ではない
- WordPressの不具合に見えて、実は純粋なHTML構造ミスというケースは意外と多い
- 特にTOPページは専用テンプレート・複雑な構造になりやすく、崩れに気づきにくい
という点です。
移行作業やテスト環境構築のタイミングは、こうした“潜在的な不具合”が表に出やすいタイミングでもあります。
似た症状でお困りの方へ
- TOPページだけフッターが出ない
- CSSを確認しても原因が見つからない
- get_footer() は書いてあるのに表示されない
そんな場合は、一度DOM構造そのものを疑ってみるのがおすすめです。
HTMLの閉じ忘れやコメントアウトの影響で、表示が途中で止まっているケースも少なくありません。
さいごに
今回のようなケースも含め、「何が起きているのか分からない」状態から一つずつ切り分けて解決していくのが、日々の保守・運用ではとても大切だと感じました。
また何かあれば、さぽたん日記として記録していこうと思います。
🐾 さぽたん日記からのご案内
ホームページを育てるお手伝い
ホームページは作って終わりではなく、
小さな修正や改善を重ねながら育てていくものです。
日々の対応内容を「さぽたん日記」でご紹介しています。