Déplacer le menu de l’administration dans l’admin bar

Dans l’espace d’administration, cette astuce permet de déplacer l’intégralité du menu dans l’admin bar.

Le menu de l’administration prend parfois beaucoup de place. Récemment, nous avons vu comment le faire flotter pour qu’il soit toujours sous nos yeux.

Cette fois, je vous propose de profiter de tout l’espace disponible dans la largeur de votre écran et de placer le menu complet dans l’admin bar.

Comme vous pouvez l’apercevoir sur la capture d’écran, les menus déroulants sont très bien intégrés. On trouve le menu de mon plugin Easy Invitation Codes.

Copier le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

if( is_admin() ) {
function baw_mini_admin_bar() {

    // Je mets en queue mon fichier CSS perso, je l'ai placé dans le dossier de mon thème, sous-dossier /css/
    wp_enqueue_style( 'miniadminbar', get_template_directory_uri() . '/css/miniadminbar.css', null, '1.0' );
   
    // Je fais un calcul approximatif de la largeur du nom du site.
    $length = strlen( get_bloginfo( 'name' ) ) * 7 + 70;
    
    // Puis je crée une balise STYLE pour forcer une marge à gauche pour que le menu soit décalé
    ?>
    #adminmenu{ margin-left: px !important; }
    <?php
}
add_action('admin_print_styles', 'baw_mini_admin_bar' );

function baw_admin_body_class() {

    // Je retourne le mot "folded" qui sera ajouté aux class CSS du body dans l'admin
    return 'folded';
}
add_filter('admin_body_class', 'baw_admin_body_class' );
}

[/pastacode]

Il est possible de faire d’écourter la dernière fonction, mais c’est une façon d’écrire qui peut dérouter certaines personnes (fonction anonyme) :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

add_filter('admin_body_class', create_function( '', 'return "folded";' ) );

[/pastacode]

Le but est d’ajouter la classe “folded” dans le body afin de faire croire que le menu a été réduit et pour faire correctement fonctionner le fichier CSS fourni.

La feuille de style CSS fait 73 lignes. Le plus souvent je cache des choses et j’en déplace d’autres. J’en profite pour ajouter des bordures et je colorie un peu. Je vous laisse regarder en détail le code pour plus d’informations.

Il faut ajouter le code ci-dessous dans le fichier CSS que vous avez déclaré à l’aide de wp_enqueue_style() :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

#adminmenuwrap {
    border-color: #464646;
    float: none;
}
.folded #wpcontent, .folded #footer {
    margin-left: 15px;
}
#adminmenutest li .wp-submenu, .folded #adminmenutest .wp-has-current-submenu .wp-submenu {
    left: 146px;
    overflow: hidden;
    top: -1px;
    z-index: 999;
}
.folded #adminmenuwrap, #adminmenu , #adminmenuwrap,#adminmenu,#adminmenu .wp-submenu,#adminmenu .wp-submenu-wrap,.folded #adminmenu .wp-has-current-submenu .wp-submenu{
    width: 100%;    
}
#adminmenu li.menu-top {
    background-color: #ECECEC;
    background-color: #464646;
    display: inline;
    float: left;
    margin-top: -30px;
    right: 0;
}
#adminmenu li.menu-top:hover {
    background-color: #ECECEC;
}
.folded #adminmenu .wp-has-current-submenu .wp-submenu, .folded #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow, #wp-admin-bar-new-content, #wp-admin-bar-comments , #adminmenuback, #adminmenushadow, .wp-menu-separator, #collapse-menu, #adminmenu li.wp-has-current-submenu .wp-menu-arrow, #adminmenu li.wp-has-submenu:hover .wp-menu-arrow, #adminmenu li.current .wp-menu-arrow, #adminmenu li.focused .wp-menu-arrow {
    display: none;
}
#wpcontent, #footer {
    margin-left: 15px;
}
#wpcontent {
    height: auto;
    padding-top: 0px;
}
.wp-submenu {
    display: block;
    float: none;
}
.folded #adminmenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu {
    left: 0px;
    top: 25px;
    width: 150px;
}
UL#adminmenu {
    margin-top: -1px;
    margin-right: -150px;
    position: fixed;
    z-index: 2147483647;
}
.folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top {
    border-bottom-color: #464646;
    border-top-color: gray;
}
.folded #adminmenu li.menu-top {
    border-right: 1px solid #555;
    width: 30px;
}
.folded #adminmenu li.menu-top a {
    border-right: 1px solid #333;
}
.folded #adminmenu .wp-submenu .wp-submenu-wrap ul li a {
    border-right: none;
}
#adminmenu a.menu-top, .folded #adminmenu li.menu-top {
    border-bottom-color: #464646;
    border-top-color: #F9F9F9;
}
#adminmenu {
    width: auto !important;
}

[/pastacode]

Il est possible que ce script soit incompatible avec certains plugins qui touchent eux aussi à l’admin bar. Merci de m’en faire part dans vos commentaires, le cas échéant.