Tout savoir sur WordPress
Tutoriel WordPress

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 :

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

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) :

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

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() :

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

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.

Cet article a été mis à jour il y a 2093 jours - Il n'est peut être plus à jour !

Article écrit par Julio P.

Co-fondateur de WP Media, la startup Lyonnaise qui a créé WP Rocket et Imagify, Julio Potier est un Expert WordPress, un Formateur Expérimenté et un Consultant en Sécurité Web.

Il aime partager ses compétences et ses réflexions sur WordPress, donnant des conférences partout dans le monde.

3 Commentaires

  1. Oui, elle n’est pas « vraiment » dans l’admin bar. Je la place là bas avec du CSS, mais l’illusion est parfaite. ;)

  2. Bonjour,
    Déjà, merci poru les tuto (sur le site) très bonen qualité et très bonnes idées !
    Pour ce tuto spécifique, je n’arrive pas à mettre en place et avoir le résultat montré.

    première choses, est ce qu’il ne manquerait pas les balises « style » dans cette ligne:
    // 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

    Deuxième choses, lorsque je met ça en place, j'ai tous les menus superposésa gauche (léger décalage de 30px d'un menu a l'autre), mais ils ne sont pas dans la barre comme sur le screenshot.

    Je n'ai pas d'autres plugins interférant sur l'admin ou autre.

    Merci d'avance pourl'aide:-)

    JvJ

eb2b1f799ce39b6bf96911e18648fce9WWWWWWWWWWWWWWWWWWWWWW