WordPressで上部に余白が…UTF-8の保存方法とBOMが原因。

この記事は 約3 分で読めます。

WordPressをいじっていて、上部に余白ができてしまう時の対処方法です。

wordpressの上部の余白

phpファイルの編集が原因

上部の空白にはいろいろな原因があるかと思うのですが、一つには「.phpをUTF-8で保存した時に、BOMありで保存されてしまっている」ということがあります。

この問題は、phpファイルをメモ帳などで編集して、保存した場合に起こります。思い当たりませんか?

UTF-8で保存したファイルをFTPでアップロードなどしたときに、WordPressの上部に変な余白ができてしまうようです。

対策は、BOMなしで保存

なぜ「メモ帳」でphpファイルを編集すると、上部に余白ができるのか僕もよくわからないのですが、メモ帳を使って文字コードをUTF-8にするだけでは不十分です。

メモ帳で編集してしまったphpファイルを、すべてUTF-8のBOMなしという形式で保存しなおしましょう。ちなみにBOMとは「バイトオーダーマーク」という英語から来ていて、日本語では「爆弾」と言われています。厄介者だ!

UTF-8の爆弾無し(BOMなし)で保存

そもそも、phpファイルを編集せずに、WordPressの管理画面から「テーマの編集」でいじれれば、それが一番安全な方法かもしれません。

BOM無し保存に対応しているのは、メモ帳以外のテキストエディタです。

有料のも無料のもありますが、例えば無料のものでは「TeraPad」とか「Crescent Eve」ですね。僕はCrescent Eveを使っています。

Crescent Eveを使うと、上の画像のようにUTF-8で保存するときにBOMなしで保存できます。

その他の「上部の余白」の可能性

ここからは、僕が該当した以外の原因で余白が表示されてしまう可能性を取り上げます。

WordPressでページ最上部に空白marginが!importantで出る時の対処法 : http://kiyotatsu.com/web15/

wp_head();という関数が問題になっているパターン。この関数は、WordPressの管理画面の上部にあるメニューバーと関係しているようです。UTF-8の問題でない場合は、この点を疑ってみてください。

functions.phpに以下の一行をプラスすることで解決するようです。

add_filter( ‘show_admin_bar’, ‘__return_false’ );

もう一つの可能性がこちら。

ヘッダーの上に出来る謎の隙間の「理由」と「対処法」 – アイデアハッカー : http://ideahacker.net/2015/08/21/10357/

最近はあまりないかもしれませんが、もともとのテーマが余白を設けている場合に、余白を消す方法です。

WordPressのエラーは文字コードが原因

今回はWordPressの上部余白が「BOMあり」という原因になって出てきてしまうことを考えました。

phpファイルの編集時に出るエラーの原因は、保存時の文字コードなどが問題になってしまうことがよくあるようです。

若干専門的な話になりましたが、WordPressでエラーが出た時には、使っているテキストエディタを見直してみるといいかもしれません。

コメント