Créer un sous-menu, ou un menu à plusieurs niveaux, dans WordPress est en fait assez simple ! WordPress a un guide de création de menus à plusieurs niveaux parfaitement expliqué dans leur documentation, à peu près à mi-chemin du guide général de création de menus.
Alors pourquoi avons-nous un article sur quelque chose que WordPress a déjà couvert ? Eh bien… si vous créez un sous-menu dans WordPress, vous avez peut-être rencontré un problème :WordPress, par défaut, ne veut que des liens cliquables dans son menu. Parfois, cependant, vous souhaitez un élément de menu de niveau supérieur qui existe simplement pour fournir aux visiteurs de votre site Web un accès aux sous-pages situées en dessous. C'est une tâche relativement facile à faire, mais comment le faire n'est certainement pas clair !
Nous allons vous montrer comment y parvenir, puis nous examinerons quelques ajustements plus avancés pour améliorer la convivialité du menu après l'avoir fait.
Comment ajouter une étiquette de sous-menu non liée dans WordPress
- Dans l'administrateur WordPress, accédez à Apparence > Menus
- Dans la barre latérale gauche de cette page, cliquez sur "Lien personnalisé"
- Définissez simplement l'URL :
# - Définissez la valeur du « texte du lien » comme étant le nom que vous souhaitez afficher dans le menu
- Ajoutez maintenant les pages réelles (sous-pages) que vous souhaitez voir apparaître sous cet en-tête et faites-les glisser et déposez-les en place, en les nichant sous l'élément de menu que vous venez d'ajouter. Ils apparaîtront en retrait lorsqu'il s'agit d'éléments de sous-menu.
C'est ça! C'est la version de base. Le menu sera là avec ses options de sous-menu et lorsque vous cliquerez dessus, il ne vous amènera pas à une autre page.
Comment le faire ressembler et se comporter moins comme un lien
Et maintenant pour l'ajout un peu plus avancé (mais pas vraiment).
Le problème qui subsiste, du point de vue de la convivialité, est que lorsqu'un visiteur du site Web survole le lien, il "sent" encore très bien que vous devriez pouvoir cliquer dessus. Il a le curseur pour un lien, il agit comme un lien, il pointe juste quelque part qui ne va nulle part. C'est probablement bien, mais si cela vous rend dingue (bonjour, c'est moi !), il y a un moyen de le contourner.
Vous devrez ajouter du CSS à votre site. Accédez à Apparence > Personnalisateur et ouvrez la section CSS personnalisée et collez-la dedans, puis enregistrez vos modifications :
a[href="#"] {
pointer-events: none;
cursor: default;
}
Ce CSS dit :tous les liens qui ont "#" comme URL cible ne doivent plus être cliquables (pointer-events: none; ) et définit le curseur pour qu'il ne soit pas la main (cursor: default; ).
Vous avez maintenant un en-tête dans votre menu qui ne va nulle part, peut avoir des sous-éléments en dessous et ne me fait pas mal à la tête du point de vue de la convivialité.
Votre hébergeur vous aide-t-il avec WordPress ?
Non? Il est peut-être temps de changer. Découvrez notre hébergement WordPress canadien haute performance !
Lire la suite