wp_headで出力されるmetaタグがheadではなくbodyに入ってしまい、ページ上部に余白ができてしまう時に確認すること

そんなことあるのかよ、って思うじゃないですか？でもね、あったんですよ。そんなことが。

原因を検索しても僕のケースとは別のケースしか出てこなくて(ただの僕の勘違いだったのですが)、すごく解決に時間がかかったので、備忘録として残しておきます。

実際に起きた現象

まず気づいたのは、「ページ上部に変な余白ができている」ことでした。

「ははーん、あれだろ？wordpressの管理バーがhtmlにマージンつけてるやつだろ？」って思ったのですが、その時まだログインしてなかったんですよね。

もしページ上部の余白にお困りの方でこの記事にたどり着いた方がいれば、管理バーに関するCSSのせいかもしれませんのでまずはこちらのケースではないかをご確認ください。

そこで、Chromのデベロッパーツールでソースを確認してみると、

「metaタグやlinkタグがやたらbodyの中に入っている」ということに気がつきました。

謎の余白の原因はこいつらのようです。さらによく見てみると、ちゃんとheadタグで出力されているものもある。

どうやら、wp_head()の呼び出し以降のタグだけがbodyの中に入り込んでしまっているようでした。

しかし、右クリックで「ページのソースを表示」を選択して確認してみると、こちらのソースの方ではそのようなことが起きていない。

おいおい勘弁してくれ。なんだこれ。

解決策を検索して出てきた情報

さて、「wp_head()がbodyで出力されてしまう」という未曾有の現象についてGoogle先生にお尋ねしたところ、次のような記事が出てきました。

【WP】headの内容がなぜかbodyに

BOMが原因...? なんだそれは。

と、まずはBOMから調べ、BOMありのUTF-8を検出する方法などを調べ、なんやかんや難しい情報を読み漁った結果、「分からん」。

冷静になってみた

まずはいつからこのような状態になっているのかを思い出すことに。

以前はこのようなことは起きていなかった。

...。考えた末、「あ、faviconだ。」

そう、実はこの現象を確認する少し前、faviconを新しくしたのです。

その時、wp_head()の上に記述してあるfavicon用のlinkタグを書き換えました。

「まさか...」

もう一度確認したところ、linkタグの後ろに見事に「 全角スペース」が...。

<link rel="icon" href="./favicon.ico">　//←ここに全角スペースが
<?php wp_head(); ?>

目を疑いたくなるような真実がそこにはありました。

結論

原因はheadタグ内に紛れ込んだ「全角スペース」でした。

なんて初歩的なミスを...。笑

どうやら、head内に全角スペースが入っていると、その全角スペースが出力されるためにページ上部に余白ができているように見えてしまい。それ以降のheadの内容がbodyに入ってしまうような現象がおこるそうです。

僕の場合、ちょうどこの全角スペースがwp_head()の直前に入っていたことで、あたかも「wp_headの出力がbodyに入ってしまう謎現象」のように見えてしまっていたわけでございます。

原因がwp_headにあると勘違いしていたのです。

あぁ恥ずかしい。

こんなことはほとんどないかとお思いますが、もし同じように謎の余白に悩まされている方がいらっしゃれば、まずは「全角スペース」を探しましょう。

全角スペースがなかった場合、それは本当にBOMというものが原因かもしれません。

では、良きWordPressライフを。