ゆるくはじめるWordPress.

UTF-8のBOMが原因で起こるエラーとその対処法

character-code-top

私が最初にWordPressのテーマを作った時、文字コードを正しく指定しなかった事が原因で色々とエラーを出してしまいました…。私以外にも同じような経験をする方がいるかもしれないので、その時の内容と対処法をメモしておきたいと思います。いざという時焦らないためにも、前知識として知っておいてもいいかもしれません。

BOMとは

『UTF-8』には『BOMあり』と『BOMなし』2種の保存方法があります。『BOM』とは『Byte Order Mark』の事で、文字コードの内容を示す印のようなもの。BOMありで保存するとファイルの中にこの情報が含まれるのですが、これがエラーの原因になる事も。なので、Webサイトを作る時はBOM無しで保存するのが一般的となっています。

HTMLで指定するcharsetとは別のものです。


管理画面上にエラーメッセージが出るパターン

Warning: Cannot modify header information – headers already sent by (output started at …


『UTF-8 BOMあり』で保存したfunctions.phpをWordPressにアップロードすると上記のようなエラーが出ました。このエラーが出る原因の1つに『BOM』があります。
PHPファイル(テンプレートファイル)を編集、アップロードした後にこのエラーが出た場合には文字コードが変更されてしまった可能性が。例えばWindowsのメモ帳で保存するとBOMが付いてしまいます。


対処法

文字コード選択保存

エラーの原因が『BOM』だった場合、『UTF-8 BOMなし(UTF-8N)』の形式でファイルを保存し直せばOK。WordPress外でファイルを編集、作成する場合はBOMなしで保存できるテキストエディタを利用する必要があります。ちなみに私はTeraPadを利用中。


ブラウザでの表示が崩れるパターン

HTMLやCSSに問題が無いのにブラウザで表示が崩れたり、変な空白が入ってしまっている場合も『BOM』が関係している事があります。
私の場合、ローカルで確認して問題無かったものが、レンタルサーバーにアップしたタイミングで表示が崩れました…。
デベロッパーツールでソースを見てみると隙間が空いている場所にという文字列が入り込んでいました。これが『BOM』です。


対処法

これも『UTF-8 BOMなし』で保存し直せば入り込んだ文字列を消す事ができます。


正しい文字コードで保存し直しても不具合が解消されない時

制作の過程でBOMがファイルの先頭ではなく、もっと内部にも複数入り込んでしまっている事があり、その場合はファイルを保存し直すだけではBOMを取り除く事ができません。


対処法

バイナリエディタ

少し面倒ですが、バイナリエディタを使ってBOMを探して削除する事ができます。対象のファイルをバイナリエディタで開くとEF BB BFと書かれている部分があるはずです。これがBOM。この文字列を全て探し出して削除すればOKです。他の必要な部分まで消してしまわないように注意しながら作業してくださいね。


まとめ

このような事が起こらないように、最初から正しい文字コードで保存して、編集の際にも気を付けておくべきだなと思いました!

スポンサーリンク

公開日: