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

BLOG

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

WordPressの管理バーを下に

WordPressの管理バーを下に移動したいと思ったことありませんか?特に上部にヘッダーを固定しているWebサイトの場合は、WordPressの管理バーと被ってしまい、めちゃくちゃ見にくいということがよくあります。そんなときは、管理バーをWebサイトの一番下に移動しちゃいましょう。

cssで管理バーを下に移動

cssだけでも移動できます。

#wpadminbar {
  top:inherit !important;
  bottom:0 !important;
}

お、できたー!と思ったのもつかの間…。サイト最上部に空白が…。ダメじゃん。

他に何か手はないのかと調べてみますと、こんな便利なプラグインがありました!

プラグイン「Admin Bar Position」が便利

プラグインの新規追加から「Admin Bar Position」をインストールして有効にするだけです。

確認すると…おお、できてる!見事に管理バーが下に移動してくれました。トップの余白もありません。

ブラウザ幅を縮めてみると…、えー!幅が600pxのモバイルサイズで、管理バーが下に固定されなくなりました…。元々、管理バーが上部にあるとき、モバイルだと固定ではない仕様なんですね。ただ、管理バーが下にある状態だと、すごく違和感あります。なので下記のコードをcssに追加して、ぴったりと下部分に固定させちゃいましょう。

/* 管理バー下に */
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}

これでめでたく解決です!管理バーとはいえ、クライアントにとっては表示崩れは表示崩れ。きちんとしたスタイルで納品したいですよね。どうぞ管理バーが邪魔でデザインが見えないときは、お試しください。


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

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

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

電話番号