Options écran du menu WordPress : Tutoriel & fonctionnement

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).

[Total : 1    Moyenne : 5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat

Publicité Google

Google AdSense est un programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance. Un éditeur de site web peut adhérer gratuitement au programme et bénéficier d’affichages publicitaires sur son site en y plaçant des tags publicitaires correspondant aux formats de son choix par simple copier / coller d’un code fourni par le programme.
Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs. Les cookies servent ainsi également à sélectionner les publicités en fonction de leur pertinence pour l'utilisateur, à améliorer les rapports sur les performances des campagnes et à éviter la diffusion d'annonces que l'utilisateur a déjà vues.

Google AdSense
NID,SID,DSID, FLC, AID, TAID