WordPressのtoolbar (旧admin bar)に項目を増やす

Tweet

Pocket

add_node を使う。

WP_Admin_Bar::add_node() – Method | Developer.WordPress.org

Adds a node to the menu.

developer.wordpress.org

// add link to admin bar
function sumachu_admin_bar_node($wp_admin_bar){

    $wp_admin_bar->add_node( array(
        'id'    => 'hoge-node',
        'title' => '<span class="ab-icon"></span>hogehoge',
        'href'  => '#',
    ));

    $wp_admin_bar->add_node( array(
        'id'    => 'hoge-item',
        'parent' => 'hoge-node',
        'title' => 'hogehoge設定',
        'href'  => admin_url() . 'admin.php?page=hoge',
    ));

    $wp_admin_bar->add_node( array(
        'id'    => 'hoge-item2',
        'parent' => 'hoge-node',
        'title' => '商品一覧',
        'href'  => admin_url() . 'edit.php?post_type=product',
    ));

    

}

しかしこのままだと、wp-admin内では、小さい画面の場合は非表示になってしまう。

そこで、hoge-nodeにアイコンをつけて、それを常時表示するようにcssで記述する。

add_action('admin_head', 'hoge_admin_css');

function hoge_admin_css() {
?>
<style>

li#wp-admin-bar-hoge-node {
    display:block !important;
}

#wpadminbar #wp-admin-bar-hoge-node .ab-icon:before {
    content: '\f111';
    top: 3px;
}

</style>
<?php
}

こちらに例が豊富 (add_menu はadd_node に変更することを推奨）:

• https://heera.it/customize-admin-menu-bar-in-wordpress