WordPressにwp_headを入れてトップに空白ができてしまったときの対処

ひろゆき


WordPressにwp_headを入れてトップに空白ができてしまったときの対処

ある案件で、ヘッダーにwp_head();を入れたら、ページのトップに28pxの隙間が空いてしまいました。今までにない現象で驚きましたが、どうやらバージョン3.1から導入された新機能の影響によるものらしいです。

現象

WordPressのテンプレートを作成する場合、プラグイン等を使うためにwp_headというタグを入れると思いますが、今回、このタグを入れたことによって、ログインした状態でページを見るとトップに28pxの隙間が空いてしまいました。(ちなみに、ここでいうトップとはホームページのトップのことで、管理画面のトップではありません。今回のバグを調査する中で管理画面のトップに空白が出るバグもあるということがわかったのですが、そのバグについては触れていません。)

で、今回の現象ですが、cssでhtmlタグにマージンが指定されていて、ついでに!importantまでついていました。

html {
margin-top: 28px !important;
}
* html body {
margin-top: 28px !important;
}

こんな感じです。
原因はバージョン3.1から新たに導入された「管理バーの表示」という機能のようです。

対処方法

・管理画面での対処
デフォルトでは「管理バーの表示」がオンになっていますので、オフにしてやれば解決できます。
設定は
「左メニューのユーザー」>>「ユーザーを選択」で設定画面を開き、
「管理バーの表示」の「サイトを表示する際」のチェックを外します。
これで、ログインした状態でページを見ても隙間は空きません。

・関数による対処
上記の方法だと、 ユーザーを作る度に設定を変える必要がありますが、functions.phpに次の1行を追加したら機能させないようにできます。

add_filter( 'show_admin_bar', '__return_false' );

以上!

ひろゆき
この記事を書いた人
ひろゆき

バックエンドエンジニア

おすすめ記事

Recommended by