WordPress でページのソース上部に空行ができる

WordPressのロゴ。

WordPress から出力されたページの上部、html タグより上の部分に、空行が挿入されていることがありませんか。

ここに空行
ここに空行
<!DOCTYPE html>

挿入されてしまった空行の例

原因がいくつか考えられます。ここではこの問題を解決します。

functions.php などの不適切な場所に空行が含まれる

functions.php ファイル内の不適切な場所に半角スペースや空行がある場合は、 出力される html に空行やスペースが含まれてしまいます。

不適切な場所とは、php のコードを定義する、<?php ?> タグの外側です。 具体的には、次のような場所に空行や半角スペースがあってはいけません。


ここに空行があってはいけません。

<?php
ここには空行があっても良いです。
?> ここにスペースがあってはいけません。

ここに空行やスペースがあってはいけません。

<?php
ここには空行があっても良いです。
?> ここにスペースがあってはいけません。

ここに空行やスペースがあってはいけません。

functions.php の不適切な空行

functions.php ファイル内で require あるいは include されて読み込まれた php ファイル内でも同様です。

文字エンコード UTF-8 の形式を BOM なしにする

文字エンコード(フォーマット) UTF-8 には 2 種類の形式があります。 1 つは、"UTF-8 BOM なし"。もう 1 つは "UTF-8 BOM 付き" です。

UTF-8 の形式が BOM 付きの場合に、空行ができるケースがあるようです。 現在適用している functions.php や header.php ファイルのエンコードを "UTF-8 BOM なし" に変換することで問題が解決する可能性があります。

もしもテーマの構成ファイルが "UTF-8 BOM なし" 以外のエンコードに設定されていない場合は、 すべての構成ファイルを "UTF-8 BOM なし" に設定しましょう。

私の執筆時の実行環境では確認することができなかったのですが、 これは WordPress に限らず、PHP によって出力されるページで確認できるようです。 PHP、WordPress, ブラウザのバージョン、あるいは、サーバシステムの設定や、ブラウザでの表示方法に依存すると思われます。

BOM とは Byte Order Mark の略称です。 簡単に説明すると、BOM は、データがどんなデータであるかを示す値です。 したがって、ここでは UTF-8 であることを示しています。

Web ページで UTF-8 を採用するほとんどの場合に、"UTF-8 BOM なし" が採用されるでしょう。

問題が解決しない場合

問題が解決しないとき、次のようなケースが考えられます。

  1. 単に、テーマファイルの header.php などで空行・空白が挿入されている。
  2. プラグインが影響している。