三重県名張市伊賀市のホームページ制作/グラフィックデザイン

BLOG

WordPressの管理バー(アドミンバー)がヘッダーと重なるのを解決する方法!

管理バーがヘッダーと重なるのを解決する

WordPressにログインしたときに上部に表示される管理バー(admin bar/ツールバー)。様々なリンクが配置されていて、管理画面へと移動したり、ログアウトしたりと大変便利なバーなんです。ただ、1つ問題がありまして、ヘッダーを固定で制作しているとき、管理バーがヘッダーと重なっちゃうんです。自分用のホームページならいいのですが、例えばお客様に納品するサイトの場合、ちょっと見栄えが良くないですよね。そんな時の解決方法をお教えしちゃいます。

管理バーを下に移動しちゃおう

この方法は以前紹介させていただきましたが、とっても簡単にできます。そもそも管理バーが上にある必要がないという人もいるかと思いますし、下の方がWebサイトが見やすいという方もいるでしょう。そんな方は下記を参考にしてください。

WordPressの管理バーを下に移動するプラグイン「Admin Bar Position」

ただ、プラグインを入れなきゃいけないのが嫌な人は、次の方法を見てください。

CSSで重なるのを解決!

こちらも簡単です。htmlに下記を記入するだけです。ただし「.top-head」は、それぞれのヘッダーのクラス名に合わせて変更してください。

<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
.top-head {
  margin-top: 32px;
}

@media screen and (max-width: 780px) {
  .top-head {
    margin-top: 46px;
  }
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}
</style>
<?php endif; ?>

WordPressにログインしている場合だけ、このcssが適応されるようになっています。なのでログインしていないユーザーには全く関係ないです。

ログインしている場合だけ、ヘッダー上部に管理バー分の空白を開けてしまおうということです。WordPressの仕様で、ブラウザ幅が780px以下のときは、管理バーの高さが少し高くなるので、メディアクエリで調整しています。

また、ブラウザ幅が600px以下になると、管理バーが固定じゃなくなるので、なんかおかしなことになります。なので、管理バーはスマホサイズでも常に固定というようにしています。

これだけで管理バーがきちんと固定ヘッダーの上に配置されるんです。簡単ですよね。

そもそも管理バーを自体を消しちゃおう

管理バー自体いらないんじゃねぇ…という方も中にはいるかと思います。そんな方は下記のコードをhtmlに記述すれば管理バーは非表示になります。

<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
html {
  margin-top: 0 !important;
}
#wpadminbar {
  display: none;
}
</style>
<?php endif; ?>

個人的には、ちょっと不便かなと思いますが、それは人それぞれですね。

まとめ

簡単に管理バーの重なりを解決する方法として3つご紹介しました。私も最初は、管理バーを一番下に持っていく方法を、クライアント様に提案していたのですが、CSSで解決する方法を知ってからは、その方法が一番重宝しています。ただ、それぞれの環境によっても違うかと思いますので、色々と試してみてもいいかもしれませんね。


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号