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

 2017/09/13 1.WEBで稼ぐ方法
この記事は約 3 分で読めます。
WordPressカスタム

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でエラーが出た時には、使っているテキストエディタを見直してみるといいかもしれません。

\ SNSでシェアしよう! /

本能ハックの注目記事を受け取ろう

WordPressカスタム

この記事が気に入ったら
いいね!しよう

本能ハックの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!