WordPressの『管理バー（ツールバー）』をページ下部に表示させる方法 マウスホバーで展開するメニューも調整

WordPressで構築しているWebサイトで、ログインユーザーにのみWebブラウザの画面上部に表示される『管理バー（Admin bar）』の位置を下部に変更する方法を、プラグインなし（style.cssへの記述）で実装する方法を紹介しています。

お仕事などでWordPress構築をする機会が多い人なら、移動させたい時が稀に発生するかと思います。筆者も同様で、ここに備忘録的に記事にしておきます。

WordPressの『管理バー』をページ下部に表示させるスタイルシート

上部にメニューやボタンが固定されるようなデザインの場合に管理バーが邪魔になるケースが時々ありますよね。そういった場合は使用しているテーマのstyle.cssの最後にでも下記スタイルを記述すればWebブラウザの下部に表示されるようになります。

もちろん、管理バー各ボタンのマウスホバーでの展開メニューも上側に表示されるように調整してあります。

/* WordPress管理バーを最下部に配置 */
html {
	margin-top: 0 !important;
	margin-bottom: 32px !important;
}
/* ページ上部に残る余白が気になる場合は、下記コメントアウトを解除 */
/*
body {
	position: relative;
	top: -32px;
}
*/

body.admin-bar {
	margin-bottom: 0;
}

#wpadminbar {
	top: auto !important;
	bottom: 0;
	position: fixed !important;
	z-index: 9999;
}

/* マウスホバーで展開するメニューを上方に展開 */
#wpadminbar .ab-sub-wrapper {
	bottom: 32px;
	top: auto !important;
}

#wpadminbar .menupop.hover > .ab-sub-wrapper {
	bottom: 100%;
	top: auto !important;
}

#wpadminbar .menupop.hover ul.ab-sub-secondary {
	top: auto;
	bottom: 0;
}

コードにも記載している通り、ページ上部に残る余白が気になる場合は

/*
body {
	position: relative;
	top: -32px;
}
*/

の箇所のコメントアウトを除去すれば該当箇所も無くなると思います。少し強引ですが、htmlに直接出力されるcssの影響でhtmlへの”margin-top: 0 !important;”が効かない場合が多いはずなので。

上記を適用して、テーマフォルダにアップロードし、ページをリロードすれば下記の例のように画面下部に管理バーが移動しています。

まとめ

メンテナンスや構築が完了したら該当cssは除去してしまえば、通常通り上部に表示されるようになります。細かい設定が要らない分シンプルで取り回しがしやすい方法だと思います。

念のため補足しておきますが、管理バー自体を非表示にしたいという場合はWordaPress管理画面の該当プロフィール設定画面から『サイトを見るときにツールバーを表示する』のチェックを外す方がスマートでしょう。

おまけ プラグインでなんとかしたい人は

なお、cssの追加ってよくわからない！という人は、ちょうど同じ事ができるプラグイン『Admin Bar Position』が公開されていますので、これを利用するとよいでしょう。

• Admin Bar Position WordPress プラグインページ