Le fonctionnement des options écrans de votre menu WordPress

Nous avons vu comment créer un menu dans WordPress. Vous avez besoin de savoir à quoi correspondent les options écran dans l’onglet Menu, voici en quelques lignes les explications sur leur mise en œuvre et leur utilité pour vos internautes. Ces différentes fonctionnalités natives à WordPress permettent principalement de créer du contenu plus riche, de manière visible ou non pour vos visiteurs. Explications.

Comment obtenir plus d’options dans l’onglet menu WordPress

Allez tout d’abord dans l’onglet « Apparence » puis « Menu« . Là, il vous suffit de cliquer sur « Options de l’écran » (1) pour voir s’afficher deux types de paramètres supplémentaires : les « Blocs » (2) et « Afficher les propriétés avancées du menu » (3) :

options ecran menu deroulant

Les blocs (2) sont une fonctionnalité qui permet de développer la possibilité d’ajouter en menu (ou de retirer la possibilité pour les gestionnaires de menu) des éléments comme les pages, les articles les liens personnalisés, les catégories, les étiquettes, les formats. Le point 3, ou « Afficher les propriétés avancées du menu », donne de nouvelles options utiles dans plein de cas :

Cocher la case « Cible du lien » des options menu

cases a cocher cible de liensPar défaut les onglets de votre menu WordPress ne permettent pas d’ouvrir une nouvelle fenêtre lorsque l’on clique dessus.

L’option « Cible du lien » vous permet d’ajouter un petit bouton à cocher utile si vous souhaitez créer un onglet dirigeant vers un autre site (un site tiers) ou un PDF.

Ouvrir une nouvelle fenêtre pour un lien s’utilise principalement dans ces cas.

C’est inutile et même contre-productif en termes d’expérience utilisateur lorsque ce sont des destinations internes à votre site Internet.

Cocher la case Attribut du titre pour le menu WP

L’attribut de titre permet de donner un affichage au survol d’un pointeur sur les onglets de menu ; il a pour fonction de donner des informations consultatives avant de cliquer sur le lien. Il n’a aucun impact en termes de référencement mais apporte une certaine valeur ajoutée dans la mesure où il enrichit le contenu du site.

Il permet ainsi selon les navigateurs d’ordinateurs de bureau de renseigner par un message qui doit être bref mais indicatif ce qui se cache derrière le lien.  Cela fonctionne aussi bien sur l’onglet principal que sur un menu déroulant. Vous n’êtes pas obligé(e) de l’utiliser pour tous les liens.

En cochant la case, un champ intitulé « Attribut de titre apparaît » à la manière de la case à cocher pour le cas de l’option « cible de lien ».

Une case à cocher pour gérer vos CSS

gerer les css du menu de wordpress avec les options

Les Cascading Style Sheets (CSS) sont gérables de cette interface. Un champ intitulé « Classes CSS (facultatives) » apparaît.

Il vous permet de gérer les styles que vous aurez préalablement déclaré dans votre fichier styles.css de votre thème enfant ou dans les options de gestion de styles CSS que peut comporter également votre thème si vous en avez.

Pour l’exemple, voici ci-contre un onglet du menu qui bénéficie d’une classe déclarée dans le fichier style.css (feuille de style) du thème Twenty Sixteen simplement modifié à partir de l’éditeur de WordPress.

Vous disposez ensuite du rendu à l’écran sans et avec survol de la souris (:hover)

Cette fonctionnalité a le mérite de mettre en avant par une couleur différente un onglet pour inciter l’utilisateur à en prendre connaissance.

.boutontest
{
 background-color: #d21c2a;   
}
.boutontest:hover
{
 background-color: #f24e4e;   
}
Styles CSS pour bouton menu Test

Le rendu avec et sans le Hover de l’exemple précédent, à vous de trouver les couleurs adéquates :

menu hover wordpress

Ajouter des attributs spécifiques au liens de menu

Pour chaque élément de la structure du menu, vous pouvez définir un attribut particulier en cochant la case « Relation avec le propriétaire du site lié (XFN) », il s’agit d’attributs « rel » comme par exemple le rel=nofolow qui donne par exemple :

<a rel="nofollow" href="http://monnomdedomaine.fr/nouvelle-page/">Page Test</a>

De nombreux attributs rel existent, nous vous renvoyons sur cet article de Alsacreation pour les découvrir. L’exemple du nofolow est dans la très très grande majorité des cas inutile de suivre, d’autant que nous sommes sur un élément récurrent de votre site, le menu. A éviter donc.

Ajouter une description supplémentaire à votre menu

Si votre thème le permet, vous pouvez ajouter une description supplémentaire pour chaque éléments de la structure de votre menu. Par exemple, disposer d’un texte sous le om de l’onglet affiché pour l’internaute. Un exemple de création de description vous est donné dans ce tutoriel (en anglais).

A propos de l'auteur(e)