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で解決する方法を知ってからは、その方法が一番重宝しています。ただ、それぞれの環境によっても違うかと思いますので、色々と試してみてもいいかもしれませんね。
