Les internautes viennent sur un site web pour y chercher une information ou effectuer une tâche (s’inscrire, chercher un logement, faire un paiement…). Ils ne viennent pas pour parcourir tout le site (sauf quelques exceptions) et veulent rapidement trouver une information.
Pour faciliter la recherche et aider l’internaute, il existe de nombreuses solutions: bien hiérarchiser le contenu (avec des titres, des paragraphes, des listes…), ajouter une navigation ou un moteur de recherche entre autres. De cette manière, l’internaute peut trouver ce qu’il cherche en un coup d’œil sur la page. S’il doit commencer à tout lire pour trouver ce qu’il cherche, il va vite se lasser et quitter le site.
Dans ce tutoriel, nous allons voir comment ajouter des pictogrammes et des icônes dans votre site WordPress.
Ajouter des pictogrammes / icônes dans WordPress
Les pictogrammes permettent également de faciliter et d’accélérer la recherche sur un site web. En effet, en voyant tel ou tel pictogramme sur une page web, en parcourant rapidement la page des yeux, l’internaute va savoir très rapidement où sont les choses qui peuvent l’intéresser.
Ces pictogrammes font appel à des habitudes. Par convention, vous saurez que derrière un pictogramme, il y a tel type de chose. Si vous êtes dans une station de métro et que vous voyez ça:
Vous saurez automatiquement que dans la direction du pictogramme, vous vous dirigez vers une sortie.
Si on revient sur un site web et que vous voyez ce pictogramme :
Vous savez qu’en cliquant sur le lien, vous allez trouver quelque chose pour contacter l’auteur du blog ou l’entreprise derrière le site. Selon vos habitudes, vous vous attendez à trouver un formulaire de contact ou une adresse e-mail.
Ou si vous voyez ça par exemple:
Vous savez que vous allez pouvoir lancer une recherche sur le site à cet endroit.
Font Awesome
Comment ajouter des pictogrammes dans un site WordPress ? Pour cela, nous allons découvrir la bibliothèque Font Awesome. Il s’agit d’une bibliothèque qui contient 7020 pictogrammes dans la version pro et 1535 pictogrammes dans la version gratuite. Allez faire un tour sur le site.
L’avantage de cette bibliothèque est qu’elle permet d’ajouter des petites images directement, en introduisant des balises HTML avec des classes spécifiques. Si par exemple, on veut:
Il suffit d’ajouter la balise HTML suivante: ‘<i class=”fab fa-wordpress”></i>’ et les pictogrammes de Font Awesome s’intègrent parfaitement dans le flux de votre contenu.
Comme ici, nous sommes intéressés par WordPress, nous allons voir comment intégrer cette bibliothèque sur un site WordPress via une extension et comment ajouter des pictogrammes dans le contenu de votre site.
Extension Font Awesome pour WordPress
L’extension Font Awesome permet d’installer rapidement et sans lignes de codes la bibliothèque Font Awesome. Pour l’installer c’est ici:
Une fois l‘extension installée, vous pouvez l’activer.
Il y a rien d’autres à faire, nous pouvons commencer à implémenter des pictogrammes.
Intégrer Font Awesome dans la barre de navigation
Voici notre menu:
Nous voulons ajouter des pictogrammes pour guider plus facilement l’internaute sur le différents items de notre menu (et faire + joli par la même occasion).
Nous nous rendons sur le site de Font Awesome, et nous pouvons accéder aux différents pictogrammes via un moteur de recherche ou directement dans l’onglet ‘Icons’
Pour l’élément ‘Accueil’ de notre barre de navigation, nous allons choisir un petite maison en référence à ‘homepage’.
Donc nous pouvons insérer ‘home’ dans le moteur de recherche de Font Awesome.
Cette petite maison m’intéresse et de toute façon, c’est la seule disponible avec la version gratuite de Font Awesome. Je clique dessus et j’arrive sur cette page. Actuellement pour ce que je veux faire, je vais utiliser la balise HTML ci-dessous qui contient la classe correspondante à notre pictogramme ‘home’.
Il suffit de copier cette balise en cliquant dessus.
Ensuite, nous nous rendons dans la partie ‘Menus’ de notre administration WordPress. Pour la gestion des menus, si vous n’êtes pas au point, je vous laisse découvrir ce tutoriel:
Dans votre menu, vous collez la balise HTML dans le titre de la navigation de votre élément. N’oubliez pas de laisser un espace entre la balise et le titre. Vous enregistrez.
Cela donne ceci:
Si nous continuons le travail, nous pouvons arriver à ce résultat
Créer un menu réseaux sociaux
Pour mon menu ‘social’, je sélectionne ‘menu secondaire’. Les emplacements des menus dépendent du thème que vous avez sélectionné. Ici je suis sur Storefront. Dans mon menu ‘social’, je vais intégrer des liens personnalisés qui pointent vers des réseaux sociaux. Ici j’ai mis Facebook pour l’exemple et bien sûr dans le titre de la navigation, on met la balise HTML avec la classe correspondante.
Voici en backend avec des liens vers Facebook, Twitter et Instagram
et en front end:
et désormais le ‘header’ de mon thème Storefront:
Intégrer Font Awesome dans un widget
Pour cet autre exemple, nous voulons créer un petit widget qui affiche des liens à propos de l’auteur du blog.
Dans la section ‘Widgets’ de l’administration, on ajoute un widget de type texte dans la barre latérale par exemple (nous sommes toujours avec le thème Storefront).
et nous pouvons ouvrir les paramètres du lien et indiquer un premier élément comme ceci:
et vous enregistrez le lien. Ensuite, vous allez dans l’onglet ‘Texte’ de l’éditeur de votre widget et vous ajoutez la balise HTML correspondante au pictogramme que vous voulez:
et si nous répétons l’opération plusieurs fois, nous obtenons par exemple ceci dans notre éditeur:
et en front end:
Intégrer Font Awesome dans le contenu d’une publication
Nous pouvons aussi directement intégrer un pictogramme dans le contenu d’une publication (page, post ou post type). Dans le bloc paragraphe, nous cliquons sur les options (trois petits points) comme ceci et nous choisissons ‘Modifier en HTML’
et nous insérons la balise HTML du pictogramme désiré à l’intérieur du paragraphe (balises ‘<p>’).
et en front end cela donne:
Voilà nous avons fait le tour de quelques possibilités d’intégration de la bibliothèque Font Awesome dans WordPress.
A vous maintenant de personnaliser vos sites WordPress avec des pictogrammes…
