WordPressのツールバー(管理バー)を非表示にしたりカスタマイズする方法

WordPressにログインしている時に上部に表示されるツールバー。便利なものではあるものの、サイト確認の際には非表示にしたい、もっと別の項目を追加したい、不要な項目だけ削除したい、といったこともあります。

そんな時に役立つ、表示・非表示変更や表示場所の移動・項目のカスタマイズなどツールバーのカスタマイズ方法のメモです。

ツールバー(管理バー・アドミンバー)とは?

WordPressにログインしているとき、上部に黒背景でいくつかのメニューが表示されているバーをツールバー・管理バー・アドミンバーなどと言います。

管理画面を見ている時とサイト画面を見ているときは多少メニューが変わります。

管理画面のツールバー
サイト画面のツールバー

このままでも便利なものではありますが、表示させたくない場合に非表示にしたり、より一層使いやすくカスタマイズすることができます。

ツールバーを非表示にする方法は2通り

ツールバーの表示・非表示は管理メニューのユーザープロフィールから変更ができます。

ここで設定する場合、登録されているユーザーごとに設定する必要があります。

この方法で簡単に設定できるものの、ユーザー登録の度にチェックを外すのが面倒くさい、チェックの外し漏れがあると困るということもあるかもしれません。その場合は functions.php に以下のコードを設定します。

add_filter('show_admin_bar', '__return_false');

この一行を追加するだけでツールバーが非表示になります。再度表示させたい場合はコメントアウトすればOK。
もしユーザーごとに表示・非表示を設定したい場合は条件分岐をつけます。

// 管理者だけにツールバーを非表示にする
if (current_user_can('administrator')) {
  add_filter('show_admin_bar', '__return_false');
}

ツールバーとヘッダーが重なるのを修正したい

そこまで広い範囲ではないものの、ツールバーとヘッダーにあるメニューやロゴなどが重なってしまうことがあります。これは要素を上部に固定している(position: fixed; を指定している)際に起こります。
またFV(ファーストビュー)で上部にコンテンツがある場合も重なっていて確認できないこともあるでしょう。

確認する際はツールバーを非表示にしたりログアウトすればツールバーは表示されませんが、いちいち切り替えるのは面倒…。そんな時ログインした状態でもちゃんと見れるようにする2つの対応方法があります。

固定されている要素をツールバーの高さ分さげる

ツールバーの高さはPCが32px、スマホだと46pxに指定されているので、その高さ分マージンを付けます。

例えば固定ヘッダーが重なっているのを修正したい場合は、header要素にマージンを追加します。
この場合「ログインしている時」という条件分岐をつけたいので、<head> タグ内に <style> タグを記述して追加します。(<body>内でも作動しますが、<style>タグの使用推奨箇所は<head>内です)

<?php if(is_user_logged_in()): ?> <!-- ログインしている場合 -->
  <style type="text/css">
    header {
      margin-top: 32px;
    }
    @media screen and (max-width: 782px) {
      header {
        margin-top: 46px;
      }
    }
  </style>
<?php endif; ?>

上記の方法だとヘッダー要素を下げたら今度はその下の要素がかぶってしまって見づらい、というパターンもあり、この場合その要素にもマージンを指定する必要があります。

ツールバーを下に移動する

サイトの要素を変更せず、ツールバーを移動させる方法もあります。
この場合html要素のマージンと、アドミンバーを下に固定するようにCSSを追加します。

<?php if(is_user_logged_in()): ?> <!-- ログインしている場合 -->
  <style type="text/css">
    html {
      margin: 0 0 32px!important;
    }
    @media screen and (max-width: 782px) {
      html {
        margin: 0 0 46px!important;
      }
    }
  #wpadminbar {
    top: auto!important;
    bottom: 0;
  }
  </style>
<?php endif; ?>

ツールバー項目の名称

ツールバーのメニューにはそれぞれに名前が付けられています。ツールバーをカスタマイズするときにはこの名称を使ってどこを変更するか、ということを指定する必要があるので、ここで一覧を載せておきます。

wp-logoWordPressロゴ
aboutWordPressロゴ → WordPressについて
wporgWordPressロゴ → WordPress.org
documentationWordPressロゴ → ドキュメンテーション
support-forumsWordPressロゴ → サポート
feedbackWordPressロゴ → フィードバック
site-nameサイト名
view-siteサイト名 → サイトを表示(管理画面側のみ)
dashboardサイト名 → ダッシュボード(ウェブサイト側のみ)
themesサイト名 → テーマ(ウェブサイト側のみ)
customizeカスタマイズ(ウェブサイト側のみ)
サイト画面
管理画面
updates更新(プラグインやワードプレスに新バージョンがある場合のみ表示される)
commentsコメント
更新とコメント
new-content新規
new-post新規 → 投稿
new-media新規 → メディア
new-page新規 → 固定ページ
new-user新規 → ユーザー
edit投稿を編集(サイトの記事ページのみ)
新規と投稿編集
my-accountユーザー名(こんにちは、ユーザー名 さん)
user-infoユーザー → ユーザー名
edit-profileユーザー → プロフィール編集
logoutユーザー → ログアウト
search検索(ウェブサイト側)
新規と投稿編集

特定のメニューを非表示にする

ツールバーには初期でさまざまなメニューリンクが付けられていますが、これらは非表示にすることができます。

例えばWordPressのロゴを非表示にしたい場合は、以下のコードを記述します。

function remove_adminbar_menu() {
  global $wp_admin_bar;
  $wp_admin_bar->remove_menu('wp-logo');
}
add_action('admin_bar_menu', 'remove_adminbar_menu', 500);

ツールバーの内容を変更するには $wp_admin_bar オブジェクトを使用します。このオブジェクトにあるものに対して、削除・メニューを追加といった指定をしてカスタマイズしていきます。

ここでは remove_menu()'wp-logo' を指定していますが、非表示にしたい名称を入れてください。この記述方法で項目全てを記載すると黒い背景だけが残ります。

プラグインのメニュー非表示

プラグインによってはインストールして有効化するとツールバーに表示されるものがあります。プラグインの場合は、設定されているメニュー名を指定して非表示にできます。

function remove_adminbar_plugin() {
  global $wp_admin_bar;
  $wp_admin_bar->remove_menu('plugin_name');
}
add_action('admin_bar_menu', 'remove_adminbar_plugin', 500);

メニュー名は、要素に指定されているIDから確認できます。
ここに表示される要素には "wp-admin-bar-***" というIDが付与されています。「***」 のところにプラグイン固有の名前がついているのでこちらを利用します。

例えば Yoast SEO なら id="wp-admin-bar-wpseo-menu" となっているので、remove_menu('wpseo-menu') となります。

表示テキストの変更

ツールバーに表示されるメニューテキストの変更も可能です。

ユーザー名

「こんにちは、ユーザー名 さん」の部分がユーザー名です。

例えば「こんにちは、」の部分を削除するなら以下のように記述すれば「ユーザー名 さん」だけが表示されます。

function change_adminbar_txt() {
  global $wp_admin_bar;
  $my_account = $wp_admin_bar->get_node('my-account');
  $newtitle = str_replace( 'こんにちは、', '', $my_account->title );
  $wp_admin_bar->add_node(array(
    'id' => 'my-account',
    'title' => $newtitle
  ));
add_filter('admin_bar_menu', 'change_adminbar_txt', 200);

これは str_replace() というPHPメソッドを使って空のテキストに置き換えています。

【参照】PHP: str_replace – Manual

記事の一覧表示の際に改行をなくしたりするのにも便利な関数です。

【関連記事】

サイト名

登録されているサイト名ではなく他のテキストを表示させたい場合、id に site-name 、 title に変更したいテキストを記述します。

function change_adminbar_txt() {
  global $wp_admin_bar;
  $wp_admin_bar->add_node(
    array(
      'id' => 'site-name',
      'title' => 'ローカルサイト'
    ),
  );
add_filter('admin_bar_menu', 'change_adminbar_txt', 200);

管理画面とサイト表示の場合でテキストを変更したい場合は条件分岐をかけます。

function change_adminbar_txt() {
  global $wp_admin_bar;
  if(is_admin()){ //管理画面のとき
    $wp_admin_bar->add_node(
      array(
        'id' => 'site-name',
        'title' => 'サイトへ'
      ),
    );
  }else{ //サイト画面のとき
    $wp_admin_bar->add_node(
      array(
        'id' => 'site-name',
        'title' => '管理画面へ'
      ),
    );
  }
add_filter('admin_bar_menu', 'change_adminbar_txt', 200);

この他の項目でも id の部分に「ツールバー項目の名称」で紹介した名称を、title に変更したいテキストを記述すれば変更できます。

ツールバーメニューの追加

ツールバーに項目を追加したり、初期で表示される内容を変更することもできます。

メニューを追加する場合は以下のようなコードを記述します。idはデフォルトに存在するものと被らないように設定します。

function add_adminbar_menu() {
  global $wp_admin_bar;
  $wp_admin_bar->add_node(array(
    'id'    => 'bar_new_menu',        // 任意のid
    'title' => '新しい項目',            // 表示するテキスト
    'href'  => 'https://example.com/' //URL
  ));
  //サブメニュー
  $wp_admin_bar->add_menu(array(
    'parent' => 'bar_new_menu',   // 親となるメニューid
    'id'     => 'new_menu_child', // サブメニューid
    'title'  => 'サブメニュー01',
    'href'   => 'https://example.com/'
  ));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 500);

サブメニューはPCならホバーした時、スマホならタップした時に表示される下層メニューです。'parent' を指定することで、サブメニューとして登録できます。

参照: admin_bar_menu | Hook | WordPress Developer Resources

アイコンを追加する

他のメニューのようにアイコンも追加すると、より見やすくなります。WordPressで使用されているアイコン「Dashicons」を利用した方法をご紹介します。

  $wp_admin_bar->add_node( array(
    'id'    => 'bar_new_menu02',
    'title' => '<span class="ab-icon dashicons-cover-image" aria-hidden="true"></span><span class="ab-label">テキスト</span>',
    'href'  => 'https://example.com/'
  ));

dashicons-cover-image の部分を設定したいアイコンのものに変更します。これは「Dashicons」のページで確認できます。

設定したら表示されますが、アイコンの位置が少し気になる場合があります。

この場合、アイコンの名称にbeforeセレクタをつけて位置調整することができます。

.dashicons-cover-image:before {
  top: 3px;
}

dashicons-cover-image の部分は設定したアイコンのものに変更してください。

スタイルを変更したり、imgタグを追加するなどしてDashicons以外のアイコンでも設定できます。そんなにこだわらなくて良い場合は、Dashiconsが簡単に設定できるかと思います。

ツールバーのスタイルを変更する

背景やフォントなどのスタイルを変更することもできます。

body #wpadminbar {
  background: #95d3ba;
}

#wpadminbar だけの指定だとデフォルトのCSSに打ち消されてしまうので、body を追加しています。

デフォルトのスタイルはデベロッパツールから確認できます。変更したい箇所のスタイル指定がどのようになっているか確認して上書きしていきましょう。

ツールバーをうまくカスタマイズして作業効率アップ

ツールバーをカスタマイズするのは、見た目上分かりやすいようにしたり使いやすいようにするためです。毎回管理画面に移動してまた別の場所へ移動する、というその一手間をなくすだけでも作業効率はアップすると思います。ツールバーをうまく活用して編集手間を少なくしていきましょう。

カテゴリー : WordPress

TOPへ