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' );

以上!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

エンジニアのひろゆきや。大阪生まれの大阪育ち。LIGを代表するエンジニアになるため、頑張るで。ほんま、よろしくやで。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL