ワードプレス ツールバー(Admin Bar)の使い勝手をよくしよう!(表示・非表示のコントロール )
ワードプレスにログインした状態でサイト表示すると、ツールバー(Admin Bar)と呼ばれる黒い帯が画面上に表示されますよね。
管理画面に戻ったり、直接編集ページに戻ったりするのに便利な管理バーですが、サイトのヘッダーが黒い帯の下に潜り込んでしまうため、サイトの見映えを調整するのに時々不便だったりします。
そこで本記事では、管理バーの配置位置を変更したり、普段は隠しておいたりできるプラグインについて紹介いたします。
管理バーを非表示する方法
そもそも、管理バーなんぞ不要なので非表示にしておきたい、という場合はプラグインなしで簡単に設定できます。
ダッシュボードメニューの ユーザー>プロフィール と進んで、次のチェックを外して保存します。

これで非表示となりました。
でもツールバーがなくなると、何かと不便だったりしますね。そこで以下に2つのプラグインを紹介していきます。
ツールバーをサイトボトムに表示するプラグイン

Admin Bar Positionは、日本人の方が開発したこともあって、日本では割と有名なプラグインです。
インストール・有効化するだけで、サイト表示させるとツールバーがサイトの底に表示されます。
デフォルト状態

Admin Bar Position有効化後

このようにサイトの底部に黒い帯が表示されます。ダッシュボードに戻るとデフォルトと同じくツールバーは画面上部に表示されます。
それまで画面上に表示されていたのが画面下に表示されるというのは、慣れるまでは奇妙な感じがするかもしれませんね。
私はこのプラグインを使ってみて、2点気になりました。
- パソコンのタスクバー(こちらも黒い帯)の真上にツールバーが表示されるので、タスクバーの方を非表示にしておきたくなる。
- プラグインの更新が1年以上されていない(2021年3月現在)。
これらが気にならなければ、シンプルで使いやすいプラグインだと思います。
ツールバーを必要な時だけ表示させるプラグイン

こちらのプラグインは、更新が割と最近ですので使ってみました。
Auto Hide Admin Barの基本的な使い方
有効化すると、ツールバーはサイト表示で非表示になりますが、カーソルを画面上部にもっていくと表示されるようになります。
Auto Hide Admin Bar有効化後

カーソルを元々ツールバーのあった付近に移動させると表示される

Auto Hide Admin Barのオプション機能
Auto Hide Admin Barにはオプション機能があります。
ダッシュボードメニュー 設定>Auto Hide Admin Bar から設定します。
ツールバー表示スピード設定
まず、ツールバーを表示させるときのスピードや遅延時間などを好みに設定できます。

ただ、私はデフォルトの設定のままでも不自由を感じませんでした。
ツールバー非表示のときに矢印を表示させる
ツールバーが非表示のとき、ツールバーが隠れているよ、とわかるように矢印を表示させることができます。

”Show an arrow”を選びます。”Left”ならば下記のように左上に矢印が表示されます。

もちろん、画面上部にカーソルを持っていくとツールバーが表示されるのは変わりません。
ショートカットキーでツールバーを表示させる
マウスを画面上部に持っていくのが面倒な場合、ショートカットキーを設定することもできます。

上のように設定すると、Shift+Aで隠れていたツールバーが表示されるようになります。これで使い勝手は快適になりました。
このほかにも、管理者レベルに合わせてこのブログインを使用できないようにする設定もあります。複数でサイト管理しているときに便利かもしれません。

まとめ
ツールバー(Admin Bar)の使い勝手を改善するプラグインを2つ紹介しました。
Admin Bar Positionは日本で有名で、使い勝手もシンプルですが、更新時期が少し古いのが気になります。
Auto Hide Admin Barはいろいろと使い勝手を細かく設定できるのと、表示場所も慣れたところに表示されるので、私はこちらの方が好みです。
ご参考にして頂ければと思います。
関連記事

ブロックの作成⑤【Create Blockで自作したブロックのデータサイズを縮小】
ワードプレスの公式サポートツールCreate Blockは、PHP、JS、CSS ...

SEOの評価を落とさない!サイト構築中にしておきたい2つの設定
ときどき『今サイトを作っている最中なんで見てください』なんて相談を受けることがあ ...

ワードプレス ブロックエディター カバーブロックで画像に文字を重ねる方法
ワードプレスのGutenberg(ブロックエディター)のカバーブロックの使い方を ...

【ワードプレス】カバーブロックでオープニングローダーを表示する方法
ワードプレスのカバーブロックに簡単なCSSとJavaScriptを使って、オープ ...

ドメイン専門サービス(お名前ドットコム)でドメイン取得の6つのメリットと取得手順を解説
ワードプレスなどWebサイトを本気で運営するならば独自ドメイン取得は必須ですが、 ...













