wp_headが原因?WordPressのトップに空白ができた時の解決法!

WordPress

WordPressのトップに謎の空白ができてしまいました。同じ原因で悩んでいる人の参考になるように、空白を解消するための解決法をお伝えします。

「wp_head();」が原因?

空白ができている部分のソースを確認すると、

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

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

とマージンが設定されていました。

こんなCSSを設定した覚えはないですが、「wp_head();」を付け加えることで、自動で読み込まれていることが分かりました。

wp_head();とはWordPressの関数の一つです。wp_head();を基に開発されているプラグインもあり、プラグインが動作するのに必要がコードを出力しています。

バージョン3.1から導入された管理メニューバーの仕様の一つ

WordPressにログインした状態で、サイトを見ると上に管理メニューバーが表示されます。どうやら、そのメニューバーのための空白のようです。

空白を解消するための解決法は?

空白を解消するための解決法ですが、

  1. WordPressの管理画面からツールバーを非表示にする
  2. 「functions.php」にツールバーを非表示にするコードを追記する
  3. 「wp_head();」の上にコードを追記する

の3通りの方法があります。

wp_head();を削除してしまう方法もありますが、プラグインが動かなくなるなどの不具合が起こる可能性があるので、削除はしない方向で解決策を考えます。

【解決法.1】WordPressの管理画面からツールバーを非表示にする

まずは管理画面にログインしてください。

↓ログインできたら「ユーザー」⇒「あなたのプロフィール」をクリックしてください。

↓「プロフィール」画面が開きますので「ツールバー」の項目の「サイトを見るときにツールバーを表示する」のチェックを外してください。

↓チェックを外したら「プロフィールを更新」をクリックしてください。

これで、空白は消えているはずです。

ですが上記の方法だと、WordPressのユーザーを作成するたびにチェックを外す必要があります。

面倒ですし対応を忘れてしまう可能性もあります。

そこでオススメすすめするのが次の方法です。

【解決法.2】「functions.php」にツールバーを非表示にするコードを追記する

「functions.php」に以下のコードを追記してください(一番下で問題ありません)。

add_filter( 'show_admin_bar', '__return_false' );
「functions.php」が壊れた時に困らないように、必ずバックアップを取っておいてください。

これで、どのユーザーでログインしても、空白は消えているはずです。

【解決法.3】「wp_head();」の上にコードを追記する

「functions.php」を触らずとも、コードを一文追記するだけで空白を消すこともできます。

↓「wp_head();」の上に以下のコードを追記してください。「wp_head();」は「header.php」に記載されているはずです。

<?php
if(has_action('wp_head', '_admin_bar_bump_cb' )) remove_action('wp_head', '_admin_bar_bump_cb');
wp_head();
?>

最後に

WordPressのバージョンアップが原因で、表示に不具合が出るのはよくあることです。

不具合が起こった時は、同じ悩みを持っている人の情報を探し出し、慌てずに冷静に対処してください。

以上「wp_headが原因?WordPressのトップに空白ができた時の解決法!」でした!

それではまた。

コメント