WordPress│WordPressの管理バー（ツールバー）を下に表示するカスタマイズ

2022.08.072026.10.21

サイトの見た目を調整している際に、上部にある管理バー（ツールバー）が邪魔になることはないでしょうか？

ユーザーの設定から管理バー（ツールバー）は非表示にできるものの、機能としては使えるので残しておきたいですよね？

本記事では管理バー（ツールバー）を下に表示するカスタマイズを紹介します。

管理バーを下に移す考え方は他のテーマでも利用できますが、固定ヘッダーなどテーマ固有の部分は調整が必要です。

コードの後半にある.l-header[data-spfix="1"]だけはSWELLの固定ヘッダー向けです。他のテーマでは、そのテーマの固定ヘッダーのセレクタに読み替えるか、削除してください。

本文末尾や固定ボタンがバーに隠れないよう、導入先で下側の余白と重なりも調整してください。

以下は2022年8月の旧コードによる表示記録です。今回の修正版の実表示を示す画像ではありません。

WordPressの管理バーを画面下に表示するカスタマイズを適用した画面の表示例。

WordPressの管理バー（ツールバー）を下に表示するカスタマイズ

公開側の画面で、管理バーが表示されているときだけ位置を変えるCSS例です。管理画面のバーは対象外です。固定表示や余白はテーマごとに調整します。

CSSの記述

変更前のCSSを保存し、まず検証環境で試してください。プロフィール設定などで管理バーを非表示にしている場合には適用しません。

追加CSS、または有効な子テーマのstyle.cssへ記載します。親テーマを直接編集せず、旧コードを追加した場所で置き換えてください。

body.admin-bar:not(.wp-admin) {
    margin-top: -32px;
}
body.admin-bar:not(.wp-admin) #wpadminbar {
    position: fixed;
    top: auto;
    bottom: 0;
}
body.admin-bar:not(.wp-admin) #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
    top: auto;
    bottom: 100%;
}
@media (max-width: 782px) {
    body.admin-bar:not(.wp-admin) { margin-top: -46px; }
}
/* SWELLのスマホ固定ヘッダー向け。他テーマでは削除します。 */
@media (max-width: 959px) {
    body.admin-bar:not(.wp-admin) .l-header[data-spfix="1"] { top: 0; }
}

数値の根拠は、WordPress本体が管理バー表示時に出力するCSSです。本体はhtmlにmargin-top:32pxを、幅782px以下では46pxを!important付きで足しています。この例のbodyの負の余白は32pxと46px、切替幅は782pxに合わせています。ただし、テーマがbodyに独自の余白を設定している場合は単純に相殺できないため、導入先で確認します。

幅600px以下では本体CSSが管理バーをabsoluteにするため、この例ではfixedを明示しています。画面下への固定は、本文末尾の見切れやスマホのセーフエリアまで解決するものではありません。

対象はbodyにadmin-barクラスがある公開側の画面です。ログイン済みでも管理バーが非表示なら、本文を上へずらしません。

最上位のサブメニューはbottom:100%で親項目の上へ配置します。旧コードのtop:-220pxのようにメニューの高さを決め打ちしません。入れ子のサブメニューや画面より高いメニューは個別の調整が必要です。

確認した環境と範囲

2026年10月21日に、WordPress本体のwp-includes/admin-bar.phpとadmin-bar.cssを照合しました。32px/46pxの余白に加え、幅600px以下のabsolute指定を確認し、fixedの明示、admin-barクラスへの限定、最上位サブメニューの相対配置へ修正しました。余白の仕様はWordPress公式の出力処理でも確認できます。本体CSSを読み込んだ分離HTMLでは、1280px幅でバーの下端が画面下端に一致し、最上位サブメニューの下端がバーの上端に一致しました。ログイン中のWordPressを動かした試験ではありません。

ログイン状態での管理バーの実表示、サブメニューの開く位置、固定ヘッダーとの重なり、スマホ実機での操作は、この修正では再確認していません。導入後にログイン状態で、幅390px・800px・1280pxの3点と、項目数の多いサブメニューの表示位置を確認してください。

掲載画像は2022年8月に撮影したもので、現在の管理バーの見た目とは差があります。