
WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。
デフォルトでは表示されるようになっていて、前回はこれを非表示にする方法をご紹介しました。
【WordPress】ページ上部の黒いバー(ツールバー)を非表示にする方法
今回はこのツールバーを下に表示する方法をご紹介していきます。
効率よくWordPress制作したい人はこちら
WordPressでページ上部の黒いバー(ツールバー)を下に移動するプラグイン Admin Bar Position
ツールバーの位置を変更するには Admin Bar Position というプラグインを使用すると簡単に出来ます。
まずはプラグインをインストールして有効化しましょう。

プラグインのインストールが初めての方は以下の記事を参照下さい。
特に設定は不要で、有効化しただけでツールバーは下に移動しています。

そして「shift + ↑」「shift + ↓」で上下に移動出来ます。
上にしてもページ更新やページ移動で下に戻ります。
プラグインを使うと上に移動してもプラグインなしとは少し変わる
これはどういう事かというと、まずはこちらを見て下さい。

左がプラグインありのページトップ、右がプラグインなしのページトップになります。
これはプラグインなしの場合、ツールバーの高さ分marginが設定されているからです。

このmarginのせいでヘッダーを固定しているとデザインが崩れることがあり、それを防ぐ為にチェック時はデベロッパーツール(検証ツール)で上記赤枠のmargin-topのチェックを外したりしますが、クライアント側はそんなことしないので「デザイン崩れています」と言われる事があります。
これを防ぐためには、
- シークレットモードで見る(ツールバーは管理者のみ表示される為)
- デベロッパーツールでmargin-topのチェックを外す
- Admin Bar Positionを使う
となります。
ただ Admin Bar Position を使うと下に表示されるので、下にあるcopyrightなどが見えなくなってしまうかも知れません。
そうなった時は「shift + ↑」で上に移動させればいいのですが、それもクライアント側に説明するのも手間なので、ツールバーのせいでデザインが崩れる場合はシークレットモードでチェックして貰うのがいいかなぁと思います。
以上になります。
ツールバーはヘッダーが固定の時に邪魔になる事があります。
ヘッダーにあると邪魔、だけど表示はさせておきたいという場合に役に立つプラグインかと思います。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
WordPress案件の単価と作業効率を上げる!
(平均スコア)