Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos 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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
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 );
[/pastacode]
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 !
Article écrit par Julio P.
Youtube
Twitter
Facebook
13 Commentaires
Inspiration : http://www.wpbeginner.com/plugins/how-to-float-your-wordpress-admin-menu-to-save-time/
un screen pour illustrer !
À 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.
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; }
;)
@grayzor: le voila
@geo: oui tout à fait, je t’invite à installer la 3.4RC2 ;)
@greg: excellent, code mis à jour, merci !
merci pour l’astuce ;-)
des semaines que je cherchais à faire cela. Merci.
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 ;)
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
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
@ Marwein: Il y a de très fortes chances pour que vous ayez mal copié/collé le code ;)
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?
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