Tout savoir sur WordPress
Tutoriel WordPress

Faire flotter le menu de l’administration

Cette astuce permet de garder le menu d’administration visible à tout moment. Cela évite différents scrolls pour retrouver un élément du menu.

Afin de faire flotter votre menu, il suffit d’un peu de CSS pour le rendre visible à tout moment. Le but est d’avoir accès à tous les éléments du menu d’administration sans devoir scroller vers le haut pour revenir vers un élément.

Attention toutefois si votre menu contient beaucoup d’éléments parents, vous ne pourrez pas scroller pour les voir !

Copier le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :

function floating_menu_css() {
   
    // Si on est sur un appareil mobile, on ne fait pas flotter + retro compatibilité
    if( !function_exists( 'wp_is_mobile' ) || !wp_is_mobile() ) :
    ?>
    <style>
        #adminmenuwrap { position: fixed; top: 0px; left: 0px; z-index: 1; }
        .admin-bar #adminmenuwrap { top: 28px; }
        body.rtl #adminmenuwrap { right: 0px; left: auto; }
        #collapse-menu:before, #collapse-menu:after { content: ""; display: table; }
        #collapse-menu:after { clear: both; }
        #collapse-menu { zoom:1; }
   </style>
   <?php
   endif;
}
add_action('admin_print_styles', 'floating_menu_css', 999 );

Edit : A la demande en commentaires, un screenshot (gif de 585ko …) :

Et merci à Greg (@screenfeedfr) pour l’info sur la class .admin-bar !

Remarquez le !function_exists( 'wp_is_mobile' ) qui retourne vrai sous WP 3.3 car ceci est une fonction WP 3.4+.

Plutot simple non ? Nous avons ajouté 5 lignes de CSS dans l’administration (hors mobiles) pour faire flotter notre menu, je ne sais pas pour vous, mais moi, je l’ai mis sur toutes mes installations WordPress !

Cet article a été mis à jour il y a 2104 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.

13 Commentaires

  1. À mon avis ça ne s’illustre pas trop ce genre de chose. Le menu reste juste fixé, seule le contenu de la page admin bouge.
    C’est risqué pour les petits écrans !

    wp_is_mobile est une fonction WP 3.4 qui fait du userAgent detection ?
    Intéressant ! Merci.

  2. En présence de l’admin bar, une classe css est ajoutée au body, donc :
    #adminmenuwrap { position: fixed; top: 0; left: 0px; }
    .admin-bar #adminmenuwrap { top: 28px; }
    ;)

  3. @grayzor: le voila
    @geo: oui tout à fait, je t’invite à installer la 3.4RC2 ;)
    @greg: excellent, code mis à jour, merci !

  4. Je savais que j’avais déjà vu l’astuce passer dans mes flux RSS il y a quelques temps. Je viens de mettre la main dessus à nouveau et c’est appliqué sur un de mes sites, merci bien ;)

  5. Salut !

    Franchement pas mal ce code. Je viens de l’essayé et je trouve ça super pratique !

    Merci pour toutes ces bonnes astuces

    à bientôt !

    Greg

  6. Bonjour,

    J’ai rajouté ce code à la racine de mon thème et tout a planté … Impossible d’accéder au site maintenant.

    Parse error: syntax error, unexpected T_ENDIF in /home1/khelili/public_html/wp-content/themes/attitude/functions.php on line 172

  7. Bonjour,

    Pour un novice comme moi,je trouve votre code efficace bien sûr mais surtout très simple à mettre en oeuvre!
    Depuis pas mal de temps je cherche, en vain, un tuto aussi clair qui me permettrait de rendre le menu horizontal de mon site « flottant ». Pouvez-vous m’aider ou me guider dans ma démarche?

  8. Bonsoir. J’ai toujours voulu avoir cet effet en fontend sur mon site. Peut-on faire flotter tous les widgets, un peu comme sur Facebook? Merci

a6a7469e5894d7c01fcc2737b28b1bedooooooooooooooooooooooo