Rendez votre barre de navigation plus attractive, simplement avec 2 plugins, sans code
Des icônes sociales
Objectif : Rajouter vos icônes web 2.0 (Facebook, Twitter) dans votre barre de menu en 4 clics.
Ce plugin va rajouter la sélection d’icônes directement dans les liens du menu de WordPress et l’afficher sans texte. C’est extrêmement simple à utiliser et permet d’éviter d’avoir à toucher au code CSS.
Après avoir installé le plugin « Menu Social Icons » , il suffit d’aller dans son tableau de bord à la page Apparence / Menu :
- A gauche, dans le bloc « Liens », sélectionnez votre icône
- Ajoutez là au menu
- Renseignez le lien et enregistrez
- C’est tout
C’est idéal pour rajouter les liens vers ses comptes twitter ou facebook. Comme dans mon exemple, vous pouvez aussi rajouter une petite enveloppe si vous souhaitez que les visiteurs vous contactent directement en utilisant votre adresse email. Pour cela veillez bien à indiquer dans le champ « Adresse web » l’instruction « mailto » sans http// :
mailto:nom@domaine.com
A noter que le développeur met à disposition des codes pour en modifier le fonctionnement :
http://wordpress.org/plugins/menu-social-icons/
Source : http://sridharkatakam.com/adding-social-icons-navigation-using-menu-social-icons-plugin/
Des icônes parmi l’immense collection Font Awesome
Objectif : Afficher une petite icônes à gauche d’un élément du menu
Font Awesome est une police de caractère libre, gratuite et légère, qui propose plusieurs centaines d’icônes pour tout illustrer, et régulièrement mise à jour avec des ajouts. Comme c’est une police, on pourra régler sa taille et surtout lui rajouter des effets CSS3.
Attention, après avoir installé le plugin « Font Awesome 4 Menus« , rien n’est disponible directement. Il faut aller dans les FAQ du plugin pour récupérer les instructions et les codes, mais c’est très simple, c’est une instruction CSS à copier et à coller dans le champ CSS d’un item du menu.
Si ce n’est pas le cas, il faut d’abord rendre le champ Classes CSS visible. Pour cela, il faut l’activer via les options de l’écran :
Ensuite, il faut suivre ces 4 étapes :
- Il faut sélectionner l’icône. Pour cela, il faut se rendre sur la page de présentation et cliquer celle qui vous intéresse:
http://fortawesome.github.io/Font-Awesome/icons/ - Sur la page dédiée, il faut récupérer le code. Ici « fa-home »
- Et coller ce code dans le champ classe CSS du menu
- C’est tout !
A noter que ce plugin permet également d’insérer les icônes directement dans son contenu, comme par exemple
[fa class="fa-check-square-o"]
Attention, avec cette technique, toutes les icônes ne sont pas utilisables. Pour bénéficier de toutes, il faut plutôt faire une insertion manuelle, comme expliquée dans ce tutoriel :
http://mosaika.fr/ajouter-police-icones-webfont-wordpress-fontawesome/
BONUS : Technique CSS
Grâce à la méthode du remplacement d’image, il est possible de remplacer un intitulé du menu par une image. C’est assez simple. Voilà un tuto récent :
http://www.appnovation.com/blog/modern-approach-css-image-replacement
En résumé, pour rajouter des drapeaux dans votre menu, il vous suffit de créer au moins 3 styles
Cacher le texte
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Prévoir l’emplacement de l’image
.show-image {
margin-top: 10px; /* A adapter selon votre site */
width: 32px; /* Largeur du drapeau */
height: 21px; /* Hauteur du drapeau */
}
Afficher l’image
.fr {
background: url(/wp-content/uploads/2017/11/flag_FR.png); /* URL du drapeau FR */
}
.gb {
background: url(/wp-content/uploads/2017/11/flag_UK.png); /* URL du drapeau anglais */
}
Rajouter un élément du menu
Enfin il suffit de renseigner un lien personnalisé (et d’en faire un par langue en remplaçant fr par gb)
Bonus mai 2017 : Une bonne synthèse et des techniques à jour dans cet article
https://premium.wpmudev.org/blog/add-icons-wordpress-menus/
Bonus 2023 : Et cette extension pour insérer aussi ses propres images
https://wordpress.org/plugins/menu-image/