BLOG

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

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;
  }
}

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