WordPressの管理バー(Admin Bar)に項目を追加したり削除したりする方法のまとめ

たまにAdminバーをカスタマイズする機会があるのですが、たまにしかやらないのですぐ忘れてしまうので、個人的な覚書として。

スクリーンショット_2013_03_02_4_53

Adminバーから項目を取り除く

Adminバーの項目を取り除くには、remove_node() というメソッドを使用します。

add_action('admin_bar_menu', customize_admin_bar_menu', 9999); // 優先順位は大きめで!

function customize_admin_bar_menu($wp_admin_bar){
    // Adminバー左側
    $wp_admin_bar->remove_node('wp-logo');     // 一番左のWordPressのロゴを消す。
    $wp_admin_bar->remove_node('site-name');   // 左から2番めのサイト名を消す。
    $wp_admin_bar->remove_node('new-content'); // 「+ 新規」ってメニューを消す。

    // Adminバー右側
    $wp_admin_bar->remove_node('my-account'); // アカウントのメニューを消す。
    $wp_admin_bar->remove_node('search');     // 検索のメニューを消す。
}

remove_node() の引数として渡すパラメーターは、その項目のHTMLのID属性を調べればわかります。

ちなみにこれらの処理は、内部的には一回追加された後でそれを取り除くという非効率なことをやってるので、それが気になる方は、 admin_bar_menu フックから remove_action() した方がいいかもしれませんが、調べるのがめんどくさかったので調べてないです。

Adminバーにメニューを追加する

たとえば以下の画像のようなメニューを追加するには、add_menu() というメソッドで。

Function Reference/add menu « WordPress Codex

スクリーンショット_2013_03_02_4_49

add_action('admin_bar_menu', customize_admin_bar_menu', 9999);

function customize_admin_bar_menu($wp_admin_bar){
    $title = sprintf(
        '<span class="ab-icon"></span><span class="ab-label">%s</span>',
        'BookPress Dashboard'
    );
    $wp_admin_bar->add_menu(array(
        'id'    => 'bookpress-app',
        'meta'  => array(),
        'title' => $title,
        'href'  => home_url('/app/')
    )); 
}

今回のケースではタイトルの左側にアイコンを表示したかったので、$titleには<span />タグが使用されています。

ここで使用している .ab-icon とか .ab-label などのクラス属性は、忘れないようにしましょう。

 

あと、メニュー項目にアイコンを表示するには CSS も必要です。

今回は、デフォルトのメニュー項目である「+ 新規」を参考にして、以下のようにしました。

add_menu() で定義したID属性に対して、wp-admin-bar- っていうプレフィックスが追加されるので注意しましょう。

#wp-admin-bar-bookpress-app > .ab-item .ab-icon
{
    width: 20px;
    height: 20px;
    margin-top: 4px;
    background-position: 0px;
    background-repeat: no-repeat;
    background-image: url(img/admin-bar-icon.png);
}

Adminバーにサブメニューを追加

先ほど追加した項目にさらにサブメニューも追加できます。

やりかたは、ほとんど同じですが、親メニューのIDを、parent の値として設定する必要があります。

$wp_admin_bar->add_menu(array(
    'parent' => 'bookpress-app', // 親メニューのIDを指定する
    'id'     => 'bookpress-app-sub',
    'meta'   => array(),
    'title'  => 'サブメニュー',
    'href'   => home_url('/app/subpage')
));

ちなみにサブメニューを追加すると、親メニューの上にマウスカーソルが来た際に、背景の白黒が反転します。

そのためアイコンが白いと消えてしまうので、アイコン画像にCSSスプライトを使用して、CSSの background-position を変更するとかの工夫が必要です。

 

Adminバーは、WP_Admin_Bar っていうクラスで実装されています。

更に詳しい内容は、Codexでどうぞ。

Class Reference/WP Admin Bar « WordPress Codex