eguchi.net

WordPressのフロント管理バーを画面下に表示する方法【Code Snippets対応】

WordPressにログインした状態でサイトを表示すると、通常は画面上部に管理バーが表示されます。

この管理バーは、投稿編集、カスタマイズ、管理画面への移動などに便利ですが、サイトのヘッダーや固定メニューと重なってしまうことがあります。

特に、ヘッダーを上部固定にしているサイトでは、管理バーが邪魔に感じるケースもあります。

そこで今回は、WordPressのフロント画面に表示される管理バーを、画面上部ではなく下部に移動する方法を紹介します。

Code Snippetsプラグインを使えば、テーマファイルを直接編集せずに安全に設定できます。

WordPressの管理バーとは？

WordPressの管理バーとは、ログイン中のユーザーに表示される黒いツールバーのことです。

通常はサイトの上部に表示され、次のような操作ができます。

・WordPress管理画面への移動
・投稿や固定ページの編集
・新規投稿の作成
・テーマカスタマイズ画面への移動
・コメント確認
・プロフィール編集

管理者にとっては便利な機能ですが、サイトの見た目を確認したいときには、上部に固定表示されることでレイアウト確認の邪魔になることがあります。

管理バーを下に表示するメリット

管理バーを画面下に移動すると、フロント画面の確認がしやすくなります。

特に次のようなサイトでは効果的です。

・ヘッダーを固定表示しているサイト
・ファーストビューの見た目を正確に確認したいサイト
・上部メニューの余白ズレを確認したいサイト
・管理バーによるレイアウト崩れを避けたいサイト
・ログイン中でも通常表示に近い状態で確認したいサイト

管理バー自体は残したまま、表示位置だけを下に移動できるため、利便性を保ちながら見た目の確認もしやすくなります。

Code Snippetsに追加するコード

以下のコードを、Code Snippetsプラグインに追加します。

add_action('wp_head', function () {
    if (is_admin() || !is_admin_bar_showing()) {
        return;
    }
    ?>
    <style>
        html {
            margin-top: 0 !important;
        }        body.admin-bar {
            margin-top: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 32px !important;
        }        #wpadminbar {
            top: auto !important;
            bottom: 0 !important;
            position: fixed !important;
            z-index: 99999 !important;
        }        #wpadminbar .menupop .ab-sub-wrapper,
        #wpadminbar .shortlink-input {
            top: auto !important;
            bottom: 32px !important;
        }        @media screen and (max-width: 782px) {
            body.admin-bar {
                padding-bottom: 46px !important;
            }            #wpadminbar {
                position: fixed !important;
            }            #wpadminbar .menupop .ab-sub-wrapper {
                bottom: 46px !important;
            }
        }
    </style>
    <?php
}, 999);

Code Snippetsでの設定方法

Code Snippetsプラグインを使用している場合は、以下の手順で設定できます。

  1. WordPress管理画面にログインする
  2. 左メニューから「スニペット」を開く
  3. 「新規追加」をクリックする
  4. 上記のコードを貼り付ける
  5. スニペット名を入力する
  6. 実行場所を「サイト全体で実行」にする
  7. 保存して有効化する

スニペット名は、以下のようにしておくと後から管理しやすくなります。

フロント管理バーを下に表示

コードの仕組み

このコードでは、WordPressのフロント画面にCSSを追加しています。

ポイントは次の部分です。

if (is_admin() || !is_admin_bar_showing()) {
    return;
}

この条件により、管理画面では処理を実行しません。

また、管理バーが表示されていない場合もCSSを出力しないようにしています。

つまり、影響するのはログイン中に表示されるフロント画面だけです。

管理バーを下部固定にする部分

管理バー本体を下に移動しているのが、次のCSSです。

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

通常、WordPressの管理バーは top: 0 で画面上部に固定されています。

このコードでは top を解除し、代わりに bottom: 0 を指定しています。

これにより、管理バーが画面下部に固定表示されます。

上部の余白を消す処理

WordPressでは、管理バーが表示されると、ページ上部に余白が自動的に追加されることがあります。

その余白を解除しているのが、次の部分です。

html {
    margin-top: 0 !important;
}body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 32px !important;
}

margin-top や padding-top をリセットすることで、管理バーが上にあったときの余白を消しています。

その代わりに、画面下部に管理バーが重ならないよう、padding-bottom を追加しています。

サブメニューを上方向に開く処理

管理バーを下に移動すると、メニューのサブメニューが画面外に出てしまうことがあります。

その対策として、次のCSSを入れています。

#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
    top: auto !important;
    bottom: 32px !important;
}

これにより、管理バーのサブメニューが下方向ではなく上方向に開くようになります。

画面下部に管理バーを置く場合、この指定は重要です。

スマホ表示にも対応

スマホやタブレットでは、WordPressの管理バーの高さが通常より高くなることがあります。

そのため、次のメディアクエリで調整しています。

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-bottom: 46px !important;
    }    #wpadminbar {
        position: fixed !important;
    }    #wpadminbar .menupop .ab-sub-wrapper {
        bottom: 46px !important;
    }
}

画面幅が782px以下の場合、管理バーの高さに合わせて余白を調整しています。

これにより、スマホ表示でも管理バーがページ下部に固定され、コンテンツと重なりにくくなります。

functions.phpに直接書く場合

Code Snippetsを使わず、テーマの functions.php に追加することもできます。

ただし、テーマファイルを直接編集する場合は注意が必要です。

コードの記述ミスがあると、WordPressが正常に表示されなくなる可能性があります。

そのため、基本的にはCode Snippetsプラグインでの管理がおすすめです。

特に、WordPressに慣れていない場合や、テーマ更新の影響を避けたい場合は、Code Snippetsを使った方が安全です。

注意点

管理バーを下に移動すると、ページ下部に固定表示している要素と重なる場合があります。

例えば、次のような要素です。

・固定CTAボタン
・チャットボタン
・ページトップへ戻るボタン
・スマホ用の固定フッターメニュー
・Cookie同意バナー

これらがある場合は、該当する要素の bottom の値を調整する必要があります。

例えば、固定ボタンが画面下にある場合は、次のように少し上にずらします。

.fixed-button {
    bottom: 50px;
}

サイトのデザインによって調整値は変わるため、実際の表示を確認しながら調整してください。

管理画面には影響しない

今回のコードは、フロント画面だけに適用されます。

管理画面には影響しません。

そのため、投稿編集画面、固定ページ編集画面、プラグイン設定画面、テーマ編集画面などでは、通常通りの表示になります。

フロント画面の見た目だけを調整したい場合に使いやすい方法です。

まとめ

WordPressの管理バーは便利な機能ですが、フロント画面の確認時には上部に表示されることで邪魔になることがあります。

今回のコードを使えば、管理バーを画面下部に固定表示できます。

ポイントは次の通りです。

・フロント画面の管理バーだけを下に移動できる
・管理画面には影響しない
・Code Snippetsで安全に追加できる
・サブメニューも上方向に開くように調整できる
・スマホ表示にも対応できる

ヘッダー固定サイトや、ファーストビューを正確に確認したいサイトでは、かなり便利なカスタマイズです。

WordPressの管理バーを非表示にするのではなく、使いやすい位置に移動したい場合は、今回の方法を試してみてください。

投稿をさらに読み込む