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 なし" が採用されるでしょう。
問題が解決しない場合
問題が解決しないとき、次のようなケースが考えられます。
- 単に、テーマファイルの header.php などで空行・空白が挿入されている。
- プラグインが影響している。