WordPress - ログイン中に表示される管理ツールバーをカスタマイズする方法

1. 管理ツールバーを非表示にする

管理ツールバーを非表示にするには **「管理画面 > ユーザー > プロフィール」**から **「サイトを見るときにツールバーを表示する」**のチェックを外すことで非表示にできます。この方法は各ユーザーごとに設定する方法です。もし、サイトを複数のユーザーで管理をしていて一括で管理ツールバーを非表示にしたい場合は下記をfunctions.phpに追加することですべてのユーザーの管理ツールバーが非表示になります。

//functions.php
add_filter('show_admin_bar', '__return_false');

2. 管理ツールバーのメニューを非表示にする

管理ツールバー全体ではなく、デフォルトで表示されるメニューを非表示にしたい場合はfunctions.phpに下記のように記述します。(xxx に消したいメニューを入れます)

//functions.php

//管理ツールバーの項目の非表示
function admin_bar_remove_menu( $wp_admin_bar ) {
  $wp_admin_bar->remove_menu( 'xxx' );
}
add_action( 'admin_bar_menu', 'admin_bar_remove_menu', 999 );

各メニューを非表示にする

下記がデフォルトで表示されるメニューになります。メインメニュー(親)を非表示にすればサブメニュー(子)も一緒に消えます。

//functions.php

//管理ツールバーの項目の非表示
function admin_bar_remove_menu( $wp_admin_bar ) {

  //WordPressアイコン(親)
  $wp_admin_bar->remove_menu( 'wp-logo' );
  //WordPressについて(子)
  $wp_admin_bar->remove_menu( 'about' );
  //WordPress.org(子)
  $wp_admin_bar->remove_menu( 'wporg' );
  //ドキュメンテーション(子)
  $wp_admin_bar->remove_menu( 'documentation' );
  //サポートフォーラム(子)
  $wp_admin_bar->remove_menu( 'support-forums' );
  //フィードバック(子)
  $wp_admin_bar->remove_menu( 'feedback' );

  //サイト名(親)
  $wp_admin_bar->remove_menu( 'site-name' );
  //ダッシュボード(子)
  $wp_admin_bar->remove_menu( 'dashboard' );
  //テーマ(子)
  $wp_admin_bar->remove_menu( 'themes' );
  //ウィジェット(子)
  $wp_admin_bar->remove_menu( 'widgets' );
  //メニュー(子)
  $wp_admin_bar->remove_menu( 'menus' );
  //ヘッダー(子)
  $wp_admin_bar->remove_menu( 'header' );

  //カスタマイズ(親)
  $wp_admin_bar->remove_menu( 'customize' );

  //コメント(親)
  $wp_admin_bar->remove_menu( 'comments' );

  //新規(親)
  $wp_admin_bar->remove_menu( 'new-content' );
  //投稿(子)
  $wp_admin_bar->remove_menu( 'new-post' );
  //メディア(子)
  $wp_admin_bar->remove_menu( 'new-media' );
  //固定ページ(子)
  $wp_admin_bar->remove_menu( 'new-page' );
  //ユーザー(子)
  $wp_admin_bar->remove_menu( 'new-user' );

  //xxxの編集(親)
  $wp_admin_bar->remove_menu( 'edit' );

  //こんにちは、xxxさん(親)
  $wp_admin_bar->remove_menu( 'my-account' );
  //ユーザー名・アイコン(子)
  $wp_admin_bar->remove_menu( 'user-info' );
  //プロフィールを編集(子)
  $wp_admin_bar->remove_menu( 'edit-profile' );
  //ログアウト(子)
  $wp_admin_bar->remove_menu( 'logout' );

  //検索(親)
  $wp_admin_bar->remove_menu( 'search' );
}
add_action( 'admin_bar_menu', 'admin_bar_remove_menu', 999 );

3. 管理ツールバーに独自メニューを追加する

管理ツールバーに新しく独自のメニューを追加したい場合は下記のように記述します。

//functions.php

//管理ツールバーに独自メニューを追加
function custom_admin_bar_menu() {
  global $wp_admin_bar;
  $wp_admin_bar->add_menu(array(
    'id'    => 'custom-menu',
    'title' => 'カスタムメニュー(親)',
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'custom-menu',
    'id'     => 'custom-menu-child',
    'title'  => 'サブメニュー(子)',
    'href'   => 'url'
  ));
}
add_action( 'wp_before_admin_bar_render', 'custom_admin_bar_menu', 999 );

id - メニューの id
title - 管理ツールバーに表示されるテキスト
href - メニューのリンク先(例:投稿一覧 -> https://xxx.com/wp-admin/edit.php)
parent - 子メニュー作成時に使用。親メニューの id を入力

デフォルトのメニューにサブメニューを追加したい場合

デフォルトのメニュー(親)にサブメニュー(子)を追加したい場合は、上記のやり方で、parentにデフォルトのメニューの id を入れます。デフォルトのメニューの id は、上記の「各メニューを非表示にする」に使われているものが id になります。

WordPress アイコンのメニュー(id) - wp-logo
サイト名のメニュー(id) - site-name
新規メニュー(id) - new-content

4. 管理ツールバーのスタイル(CSS)を変更する

管理ツールバーのスタイル(CSS)を変更したい場合、style.css に直接書き込んでも問題ありませんが、下記のようにするとユーザーがログイン中のみ css が出力されるようになります。

//functions.php

//管理ツールバーのスタイルを変更する
function admin_bar_style_custom() {
  if ( is_user_logged_in() ) {
    echo
    '<style type="text/css">
     ...
    </style>';
  }
}
add_action( 'wp_head', 'admin_bar_style_custom' );

header.phpなど任意の場所に直接書く場合

<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
...
</style>
<?php endif; ?>

スタイル(CSS)変更箇所

下記は、管理ツールバーの色などを変更できる箇所を抜粋したものです。

/*管理ツールバー全体*/
#wpadminbar {
  background: red !important;
  opacity: 0.8;
}

/*管理ツールバーのテキスト*/
#wpadminbar .ab-item,
#wpadminbar .ab-label {
  color: #fff !important;
  background: red !important;
}

/*管理ツールバーのアイコン*/
#wpadminbar #adminbarsearch:before,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
  color: #fff !important;
}

/*サブメニュー*/
#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
  background: red !important;
}