WordPress プラグイン

【WordPress】ページ上部の黒いバー(ツールバー)を下に移動するプラグイン Admin Bar Position

WordPressでページの上にある黒いバーの位置を変更出来ない?

WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。

デフォルトでは表示されるようになっていて、前回はこれを非表示にする方法をご紹介しました。

WordPress】ページ上部の黒いバー(ツールバー)を非表示にする方法

今回はこのツールバーを下に表示する方法をご紹介していきます。

WordPressでページ上部の黒いバー(ツールバー)を下に移動するプラグイン Admin Bar Position

ツールバーの位置を変更するには Admin Bar Position というプラグインを使用すると簡単に出来ます。

まずはプラグインをインストールして有効化しましょう。

管理画面のプラグイン→新規追加から Admin Bar Position と検索し、今すぐインストールをクリックします。

インストールが完了したらボタンが有効化に変わるので、有効化をクリックします。

特に設定は不要で、有効化しただけでツールバーは下に移動しています。

 

そして「shift + ↑」「shift + ↓」で上下に移動出来ます。

上にしてもページ更新やページ移動で下に戻ります。

 

プラグインを使うと上に移動してもプラグインなしとは少し変わる

これはどういう事かというと、まずはこちらを見て下さい。

左がプラグインありのページトップ、右がプラグインなしのページトップになります。

これはプラグインなしの場合、ツールバーの高さ分marginが設定されているからです。

このmarginのせいでヘッダーを固定しているとデザインが崩れることがあり、それを防ぐ為にチェック時はデベロッパーツール(検証ツール)で上記赤枠のmargin-topのチェックを外したりしますが、クライアント側はそんなことしないので「デザイン崩れています」と言われる事があります。

これを防ぐためには、

  • シークレットモードで見る(ツールバーは管理者のみ表示される為)
  • デベロッパーツールでmargin-topのチェックを外す
  • Admin Bar Positionを使う

となります。

ただ Admin Bar Position を使うと下に表示されるので、下にあるcopyrightなどが見えなくなってしまうかも知れません。

そうなった時は「shift + ↑」で上に移動させればいいのですが、それもクライアント側に説明するのも手間なので、ツールバーのせいでデザインが崩れる場合はシークレットモードでチェックして貰うのがいいかなぁと思います。

 

まとめ:ツールバーが邪魔なときに使ってみよう

ツールバーはヘッダーが固定の時に邪魔になる事があります。

ヘッダーにあると邪魔、だけど表示はさせておきたいという場合に役に立つプラグインかと思います。

-WordPress, プラグイン