WordPress 固定ページの上部に空白が出来てしまう問題の解決方法、headにmetaデータが収まらない

WordPress 固定ページの上部に空白が出来てしまう問題の解決方法、headにmetaデータが収まらない

メンテナンスを兼ねて独自テーマの調整をしていたときに、固定ページの上部に空白ができることに気づいたので対処方法を書いておきます。

スタイルシートが原因で余白が生まれるなどそのような問題ではなく、なかなか気づきにくいレアケースです。

解決するにはテンプレートファイルの配置を調整する必要がありました。

 

ページの上部に空白が出来てしまう原因

画像はこのサイトのカテゴリー用の固定ページなのですが、いつの間にかページ上部に空白ができるようになっていました。

開発者ツールでHTMLを見てみるとmetaデータがheadに収まらず、bodyにはみ出しているのが分かります。

空白が生まれた原因自体はこれなのですが、何故metaデータがheadから出てしまうのか?が詰まりのポイントでした。

 

プラグインや独自の処理を最小構成にしてみても何故かheadに入らず、先にheadが閉じてしまう。それどころか自分のコードでは書いているはずのドキュメントタイプ宣言(<!DOCTYPE html>)もすっ飛ばされていました。

これは固定ページの処理の前に、他の処理が割り込まれているのが原因だろうと予想できましたが、実際の処理がどこにあるかまでは特定できませんでした。

 

まま、解決する方法は分かっているので書いておきます。

 

 

ページの上部に空白が出来てしまう問題の解決方法

テンプレートとなるファイルは「index.php」の名前で使用しましょう。

今回の場合だと元はpermalink.phpとなっていたのですが、これを別のフォルダに移動して「index.php」とすることでheadにmetaデータが収まるようになりました。

他のテンプレートファイルがそのような配置になっていたので、これに気づけました。

検索してもグーグルの検索が死んでいるせいでロクな結果が出てこず頭を抱えましたが、運がよかったです。

 

バックアップを取ってローカルでも試したところ、「index.php」に変更しなくても空白ができなかったので、根本的な原因はphpの実行環境にあるかもしれません。

 

追記 2024-12-02

また同じ問題に遭遇したのでさらに調べたところ、原因はファイルのエンコードとブラウザの処理にあるようです。

phpでincludeまたはrequireを使って呼び出したファイルのエンコードがUTF-8だと、勝手に</head><body>が入り<body>の直後に&#xFEFFが入っていました。

ブラウザごとに動作が異なることから報告があるまで気づきにくい。

今回は呼び出すファイルのエンコードをJISやUTF-8(シグネチャなし)にすることで解決しました。

 

 (´ ・ω・`) コメント 0件
_(__つ/ ̄ ̄ ̄/
  \/   /
     ̄ ̄ ̄
 (´・ω・`)
_( つ ミ  バタンッ
  \ ̄ ̄ ̄\ミ
     ̄ ̄ ̄ ̄

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。