WordPressの管理バーをカスタマイズ【Comfortable Admin Page】

管理バーはログイン中にページの上部に表示される高さの低いバーです。

管理バーは、プロフィール画面では「ツールバー」と言われており、表記は現在はこちらが主流のようです。ただ、これまでずっと管理バー・アドミンバーなどと呼ばれてきたこともあって、どちらも正解のようです。ツールバーだと、他のプラグインやテーマの機能と重複する可能性があることを考慮し、本プラグインでは管理バーで統一しています。

管理バーの位置

管理バーの位置

管理バーはログインしていると、サイト画面でも表示されます。

デザイン的に結構印象を変えるため、訪問者が実際に見る画面として確認するには邪魔になることが多いです。

このため、WordPressの標準機能にもプロフィール設定画面で「サイト画面では非表示にする」機能がありますが、非表示にすると、表示中のページを編集画面に切り替えたりする便利な機能も使えなくなってしまいます。

そこで、折衷案として、サイト画面では画面下部に管理バーを表示する(下部に移動する)オプションを用意しました。

  1. <管理バー>タブを開きます
  2. 「管理バー表示位置」欄の「サイト画面では管理バーを画面下に表示する」にチェックを入れます
  3. <変更を保存>ボタンを押すと、サイト画面を見ているときは管理バーが下側に表示されます

チェックを外して保存すれば元に戻せます。

管理画面では引き続き上部に表示されます。

不要な項目を削除

管理バーの標準機能としては以下のようなものがあります。

共通
  • WordPressの関連ページを表示する(ドキュメント・サポートなど)
  • 新規作成
  • コメントの件数表示と画面へのリンク
  • ログアウト・プロフィール表示へのリンク
  • 本体・テーマ・プラグインの更新通知(ある時のみ)
管理画面表示時のみ出てくるメニュー
  • サイトの表示
  • 投稿やページの表示
サイト表示時のみ出てくるメニュー
  • 管理画面の表示
  • カスタマイズへのショートカット
  • 表示しているページの編集リンク
  • 検索アイコン

上記のほかに利用しているWordPressテーマ・プラグインが追加したメニューが表示されます。

便利ではあるのですが、使ったことがない機能があったり、プラグインが増えてくるとだんだん表示されるものが増加してきます。

そこで、管理バーの使っていない項目を削除する機能を用意しました。

  1. <管理バー>タブを開きます
  2. 「不要な項目を削除」欄で非表示にしたいものにチェックを入れます
  3. <変更を保存>ボタンを押すと、管理バーから不要な項目を非表示にできます。

チェックを外して保存すれば元に戻せます。

サイト名の文言変更

サイト名の文言変更

管理バーに表示されているサイト名にマウスカーソルを当てるとサブメニューが出てきて管理画面では「サイトを表示」、サイト画面では各種管理画面の設定画面へのメニューが表示されます。

サイト名部分を以下のように変更する設定を用意しました。

  • 別ウィンドウで開く
  • サイト画面では「管理画面を表示」に文言を変更
  • 管理画面も「を表示」を追加しクリック時に何が起こるのかわかるように変更
  1. <管理バー>タブを開きます
  2. 「サイト名の文言変更」欄で変更したい機能にチェックを入れます
  3. <変更を保存>ボタンを押すと、サイト名をクリックしたら別タブで開くように変更されます。

チェックを外して保存すれば元に戻せます。

些細なことですが、小さな改善が作業効率を高めます。

前後の記事編集

前後の記事編集

WordPressの編集画面には次の記事や前の記事に移動するリンクが表示されません。

順番に各ページを編集する必要が生じた際、編集画面と一覧画面を行ったり来たりしなくてはいけなくなります。

一覧画面と編集画面を行き来していると、どこまで作業していたかわからなくなってしまいがち。

そこで、「次の記事へ」「前の記事へ」のリンクを設置し、一覧画面に戻ることなく記事を移動できるようにする設定です。

  1. <管理バー>タブを開きます。
  2. 「前後の記事編集」欄で「編集画面に前後の記事へのリンクを追加する」にチェックを入れます。
  3. <変更を保存>ボタンを押すと、編集画面を表示した際に前後の記事へのリンクが表示されます(編集画面以外では表示されません)。

チェックを外して保存すれば元に戻せます。

前後の基準は、投稿の公開日時順です(ID順ではないです)。

管理バーの色

管理バーの色

<ユーザー> → <プロフィール>からユーザーごとに「配色」を変更することが可能です。

個人ブロガーで1サイトしか運営していない人だとあまり変更する機会はないかもしれませんが、複数のサイトを運営していたり、本番環境とステージング環境が分かれているような場合ではどちらのサイトで作業しているのか明確にするために配色を変えることがあります。

ただ、WordPressの配色設定は全部で9種類しかありません。多くのサイトを運営しないといけない場合だと、配色数が足りないということになってしまいかねません。

他にも、左メニューと管理バーは同じ色設定しかできないので、デザイン的にやや野暮ったいイメージになってしまいがちです。

そこで、管理バーの色だけ好きな色に変更することができる機能を用意しました。

  1. <管理バー>タブを開きます。
  2. 「管理バーの色」欄で背景色と文字色をそれぞれカラーピッカーを使用して設定します。
  3. <変更を保存>ボタンを押すと、管理バーが設定した背景色と文字色に変更されます。

カラーピッカーでデフォルトのカラーを選択して保存すれば元に戻せます。

おすすめ設定

管理バーの色はサイドバーの色と同色系のより濃い色や近似色・補色、または黒などのニュートラルなカラーにしておくとデザイン的にもスッキリします。

ログアウトボタンの設置とあいさつをなくす

ログイン名の表示とログアウトのボタン化

管理バーの右側には「こんにちは、〇〇〇さん」という風に表示されます。

いや、挨拶されても・・しかも夜でもこんにちはだし・・ということで気分が悪い時に見るとイラっとするかもしれないこの挨拶を「〇〇でログイン中」という文言に置き換える機能です。

また、このエリアは記事の公開や更新のボタンが非常に近く、ホバーメニューが表示されてしまったり、ホバーメニュー内のログアウトをうっかりクリックしてしまって編集内容が消えてしまうことも・・

そんな事故を防ぐために、ログアウト右隅にボタンとして表示するよう変更する機能をつけました。

またこのボタンはいきなりログアウトせず、本当にログアウトしますか?と確認機能を付けているので<キャンセル>を押せば管理画面にとどまれます。

不要な項目を削除欄で「ユーザー情報(アイコンと名前・プロフィールを変更)」も非表示にしてしまえば、ポップアップ自体しなくなります。

管理バーの設定によって、ログアウト機能へのアクセスができなくならないように、ログアウトをボタン化していないときは不要な項目の削除でもログアウトを非表示にできないようにしています。

オリジナルメニューの追加

オリジナルメニューの追加

管理バーにオリジナルのメニューを追加することができます。

フロント画面・管理画面で別々の項目を設定できるので、使い分けたい場合は別々の内容を入力してください。

項目の追加ボタンでいくつでも追加可能です。

サイトアイコン(favicon)を表示

サイトアイコン(favicon)を表示

管理バーのサイト名の横には、管理画面を表示しているときには家のアイコン、サイト画面を表示しているときには設定アイコンが表示されています。

これを、サイトで設定しているFaviconに変更する機能です。

管理画面の識別にご利用ください。