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;
}