Créer un séparateur d’éléments de menus sous WordPress

Concevoir une navigation efficace à l’aide des menus sous WordPress ne présente pas de difficulté particulière. Toutefois, la tâche se complique dès lors que l’on souhaite rajouter un séparateur entre chaque élément de menus. Pourtant, il existe des méthodes relativement simples à mettre en place que je vous détaille dans ce tutoriel.

Souvent méconnue, les pseudos-classes CSS permettent de faire des miracles. Elles permettent d’agir sur un élément en particulier comme la première lettre d’un paragraphe – utile pour faire des lettrines, la première ligne, le premier enfant… et dans le sens inverse pour atteindre le dernier élément.

Ainsi, nous avons la possibilité d’afficher un séparateur et de le masquer pour le dernier élément du menu : un problème récurrent auquel tout concepteur de site est confronté un jour !

Vérification du support des menus de navigation

Assurons-nous dans un premier temps que vous disposez d’un ou plusieurs emplacements de menus dans le fichier functions.php de votre thème. Si tel n’est pas le cas, utilisez les lignes de code suivantes :

function wpc_theme_support() {
    add_theme_support( 'menus' );
    register_nav_menus(
        array( 
            'main'                 => 'Navigation principale',
            'footer'               => 'Pied de page',
        )
    );    
}
add_action('after_setup_theme','wpc_theme_support');

Nous disposons de 2 emplacements de menus : un pour la navigation principale généralement située dans l’en-tête du site, un second pour le pied de page.

Pour rappel, ces différents emplacements doivent être assignés à des menus de navigation préalablement créés sous Apparence puis Menus dans le back-office de WordPress.

Ajout du séparateur d’items de menus

C’est la fonction wp_nav_menu qui affichera le menu de navigation dans votre thème. Personnellement, je l’ajoute directement dans mon fichier functions.php puis je l’affiche à l’aide de ma propre fonction ce qui offre plus de souplesse par la suite. Cela dit, de nombreux développeurs de thèmes insèrent directement wp_nav_menu dans les fichiers PHP – notamment header.php ce qui me paraît dommage.

function wpc_main_nav() {
    wp_nav_menu(
        array(
            'menu_class'         => 'nav',
            'container'         => false,
            'theme_location'    => 'main',
            'depth'             => '1',
            'after'                => '<li class="menu-divider">|</li>'
        )
    );
}

2 lignes sont importantes dans ce bout de code :

  1. La première concerne le choix de l’emplacement de menu theme_location à afficher conformément à ceux que le thème vous propose ou que vous avez ajouté ;
  2. La seconde avec le paramètre after qui permet d’ajouter du code après chaque item de menu, en l’occurrence notre fameux séparateur. Ici, j’ajoute un pipe mais vous pouvez tout aussi bien mettre un tiret ou ce que vous souhaitez. Je passe le tout dans une classe CSS intitulée menu-divider. C’est sur elle que nous utiliserons les pseudos-classes ;

Ajout du code CSS

Dans votre fichier style.css, insérez les lignes de code CSS suivantes :

li.menu-divider {>
color: #3C3C3C !important;
}
li.menu-divider:last-child {
display: none !important;
}

La première règle agit sur le séparateur ajouté après chaque élément de menu -nous indiquons un changement de couleur ici, alors que la seconde agit uniquement sur le denier séparateur… pour le masquer. Pour être plus précis, il vous faudra ajouter l’ID du menu pour chaque règles CSS.

Il existe d’autres méthodes pour résoudre cette problématique et notamment via jQuery… pour autant je trouve celle-ci plus fiable et maintenable dans le temps. Pas vous ? Quelles sont vos méthodes pour créer des séparateurs de menus sous WordPress ?

24 commentaires

  1. Alda

    C’est pas très très sémantique tout ça. Ça double la longueur de la liste avec du contenu décoratif, les gens qui utilisent des lecteurs d’écran ne te disent pas merci.

    Perso je met une border-left et right de 1px sur li.menu-item > *, sauf à gauche pour first-child et à droite pour last-child.

    1. Aurélien Denis auteur de l’article

      OK pour la sémantique. Mais au final méthode similaire avec des pseudo-classes.

      Par contre, ce que je n’aime pas dans l’utilisation d’une bordure c’est bien la hauteur qui n’est pas du tout la même qu’un pipe…

      Tu peux m’en dire plus sur les lecteurs d’écran ?

  2. Jonathan Buttigieg

    Pourquoi utiliser une méthode qui pourrit un peu l’HTML et le menu avec un élément de la liste comme « | ». Quand on lit une liste à puce dans un livre, on ne se retrouve pas avec :
    – élément 1
    – |
    – élément 2
    – |
    – élément 3

    En sémantique HTML, c’est la même chose

    Et puis ça s’ajoute très facilement en CSS :


    li:after {
    content="|";
    }

    Ensuite, tu fais joujou avec les padding pour espacer et voilà.

    1. Aurélien Denis auteur de l’article

      Avec ta méthode, tu peux masquer le séparateur pour le dernier élément aussi ? Idem pour modifier la couleur par exemple ?

      En tout cas, c’est toujours une utilisation de pseudo:classes.

      1. Daniel Roch

        En l’occurrence, tu peux : il suffit de faire un last-child ayant un content vide, et le tour est joué.

        Ta méthode est pas mal, mais effectivement elle « pourrit » un peu le code et augmente aussi légèrement le temps de calcul et de chargement de la page.

  3. Cédric

    Pour ma part, j’utilise plutôt le paramètre ‘before’ avec quelque chose du genre |, et avec un display:none sur li:first-child span.divider pour occulter le 1er séparateur.

  4. Manu

    Bonjour,
    Merci pour cet article, mais si je peux me permettre de vous donner un avis d’utilisateur novice de WP, il serait judicieux de mettre le résultat final concret de ce que vous conseillez sur votre article, car en ce qui me concerne c’est beaucoup plus parlant que du texte.
    Ainsi en lisant à peine l’article nous saurions tous de quoi il s’agit et ce serait donc plus facile de comprendre de quoi vous parlez… car moi je ne vois pas du tout ce que cela peut donner.

  5. Olivier C

    Un exemple de bonne pratique avec un menu comportant la class .nav-menu, full css :

    .nav-menu li {
    display: inline-block;
    padding: 0 15px;
    border-left: 1px solid #888;
    }

    .nav-menu li:first-child {
    padding-left: 0;
    border-left: none;
    }

  6. asempia

    Bonjour,

    La réponse existe peut être déjà mais je n’arrive pas à la trouver, je cherche un moyen pour que dans mon menu créer avec WordPress l’ensemble de la balise li soit un lien pour aller vers une autre page ou autre plutôt que d’obliger l’utilisateur à cliquer sur sur ma balise .

    Ma question est peut être tordu à comprendre x).
    Je vous donne le lien vers mon site :
    http://patypatissiere.fr/

    En gros je dispose d’un menu sur la gauche et l’utilisateur et obliger de cliqué sur les intitulé et je cherche a savoir si il peut cliqué sur le « bouton » du menu un peut comme sur votre site ou on ne doit pas cliquer précisément sur accueil.

    j’espère avoir été suffisamment compréhensif xD

    Merci d’avance

  7. Rtransat

    En effet c’est pas sémantique du tout :/.

    Personnellement si je veux un séparateur je le fais en CSS avec le sélecteur d’adjacence si je ne veux pas le mettre sur le premier élément du menu. Ça évite d’utiliser les pseudo éléments comme first-child ou first-of-type qui n’est pas supporté par tous les navigateurs.

    #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #menu li {
    padding-left: 2px; /* Largeur du padding = largeur de l’image (pour éviter lors d’un hover du background sur le que celui ci prenne toute la place et fasse disparaître le séparateur ) */
    background: url(img/divider.png) no-repeat 0 50%;
    }

    /* OU */
    #menu li {
    padding-left: 3px;
    border-left: 3px solid #FFF;
    }

    /* OU (si on veut le séparateur partout sauf sur le premier élément)
    Sélecteur adjacent
    */
    #menu li + li {
    padding-left: 2px;
    background: url(img/divider.png) no-repeat 0 50%;
    }

    1. Rtransat

      (pour éviter lors d’un hover du background sur la balise « a » que[…])

      PS : Désolé du double post, j’ai mis la balise a entouré par des chevrons comme un c*n sans me douter que la balise était activé pour les commentaires.

  8. lamure

    Petite question avant d’utiliser cette méthode, mes sites web étant en responsive web design, les séparateur s’adaptent t’ils aux écrans automatiquement ou faut t’il faire des modifications ?

  9. Pierre

    Salut

    Ça fait longtemps que j’ait pas visiter le super site d’Aurélien, mais comme @Rtransat, j’utilise le CSS : (example)
    .foot-nav-menu.menu > li + li > a { border-left: 1px solid #888888; }

    Pierre

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX