ブログの管理バーをwp_admin_barでカスタム

通常の管理ツールバーとネットワーク管理画面の双方の管理バーをカスタマイズ

remove_nodeでシンプルに消していく

wordpressの管理画面には上のほうにツールバーが表示され、本格的にカスタマイズをはじめると不要なものを削除したくなってくる。

必要のないリンクの非表示/削除自体は簡単でremove_menuで指定することで削除することが可能。

以下はwordpress3.8で試した例

通常の管理画面

function remove_admin_bar_menu( $wp_admin_bar ) {

    $wp_admin_bar->remove_node('wp-logo');
    $wp_admin_bar->remove_node('my-sites');
    $wp_admin_bar->remove_node('view-site');
    $wp_admin_bar->remove_node('edit-site');
    $wp_admin_bar->remove_node('updates');
    $wp_admin_bar->remove_node('comments');
    $wp_admin_bar->remove_node('new-content');
    $wp_admin_bar->remove_node('new-post');
    $wp_admin_bar->remove_node('new-media');
    $wp_admin_bar->remove_node('new-link');
    $wp_admin_bar->remove_node('new-page');
    $wp_admin_bar->remove_node('new-user');
}
add_action('admin_bar_menu', 'remove_admin_bar_menu', 1000);

マルチサイトのネットワーク管理画面

function remove_admin_bar_networkmenu( $wp_admin_bar ) {

    $wp_admin_bar->remove_node('wp-logo');
    $wp_admin_bar->remove_node('site-name');
    $wp_admin_bar->remove_node('view-site');
    $wp_admin_bar->remove_node('my-sites-super-admin');
    $wp_admin_bar->remove_node('updates');
    $wp_admin_bar->remove_node('my-sites');
    $wp_admin_bar->remove_node('my-account');
}
add_action('admin_bar_menu', 'remove_admin_bar_networkmenu', 1000);

指定する引数の探し方

方法については、remove_nodeを利用するだけだが、渡す引数の探し方は以下のように行った。

上の画像は、firefoxというブラウザのfirebugで管理バーの周辺HTMLを表示したものになる。そして、水色のアンダーラインが引かれた部分をremove_nodeの引数として渡すことができる。id属性で指定されている

wp-admin-bar-wp-logo

などが該当し、引数の前には

[wp-admin-bar-]

の文字列が付いているので探す際には参考にしてほしい。管理バーの上で

マウスを右クリック → firebugで要素を調査

と操作することで該当する部分のHTMLを表示できる。

削除するだけでなく新規に要素を追加することも可能

管理バーの要素は削除だけでなく、新規に追加することもできる。その際に参考となるのが公式ドキュメントwordpress codexになる。

http://codex.wordpress.org/Function_Reference/add_node

上で示したマルチサイトのネットワーク管理画面の削除コードには、以下の設定も追加してある。ネットワーク管理画面のツールバーに、ログインユーザーの

管理ブログ
通常の管理画面

双方のページへのリンクを新規に追加しているコードになる。

global $current_user;
get_currentuserinfo();
$user_info = get_userdata($current_user->ID);
$blog_details = get_blog_details($user_info->primary_blog); // ユーザーIDから管理ブログの情報を取得

// 管理バーへの新規追加設定
$args = array(
	'id'    => 'site-name',
	'title' => $blog_details->blogname,
	'href'  => $blog_details->siteurl,
	'meta'  => array( 'class' => '' )
);
$wp_admin_bar->add_node( $args );

// 上で追加した要素の子要素を追加
$args = array(
	'id'    => 'admin_page',
	'parent'    => 'site-name',
	'title' => 'Manage '.$blog_details->blogname,
	'href'  => $blog_details->siteurl.'/wp-admin/',
	'meta'  => array( 'class' => 'ab-sub-secondary ab-submenu' )
);
$wp_admin_bar->add_node( $args );

上のコードの冒頭では、ユーザー情報とそのユーザーのブログ情報を取得している。ブログ名やそのリンク先を要素の属性として追加したいためである。一つ目の要素は親要素、二つ目をその子要素として追加する例になっている。

一つ目のadd_nodeでは、idを[site-name]としてある。このidを指定することでwordpress純正の家マークを表示することができる。そして、二つ目のadd_nodeでparent属性としてsite-nameを指定しているが、このparent属性を指定することでサブメニュー化することができる。また、二つ目では、meta情報としてHTMLのclass属性を指定しており、上の例ではwordpressのclass属性を設定しているのでその点も参考にしてほしい。

管理バーは、wordpressの公式ドキュメントを参考にすれば柔軟にカスタマイズできる。