Comment ajouter des icônes d'image aux menus de navigation WordPress

Au fil des ans, nous avons aidé des milliers de lecteurs à personnaliser leurs sites WordPress pour améliorer à la fois l'expérience utilisateur et l'attrait visuel. Forts de notre expérience pratique en conception web, nous avons appris que l'ajout d'icônes d'image aux menus de navigation WordPress peut améliorer considérablement la convivialité de votre site.

En effet, les icônes d'image peuvent fournir des indices visuels intuitifs à vos visiteurs, leur permettant de naviguer plus facilement sur votre site. De cette façon, l'interface de votre site Web est plus interactive et attrayante, ce qui contribue à réduire le taux de rebond.

Dans cet article, nous vous montrerons comment ajouter facilement des icônes d'image aux menus de navigation dans WordPress. 

Pourquoi ajouter des icônes d'image aux menus de navigation dans WordPress ?

Habituellement, les menus de navigation WordPress sont des liens textuels simples. Ces liens fonctionnent bien pour la plupart des sites Web, mais ils ne sont pas toujours intéressants ou attrayants. 

En ajoutant des icônes d'image au menu de navigation, vous pouvez encourager les visiteurs à prêter attention au menu et à explorer davantage votre site.

Si votre menu comporte de nombreuses options différentes, les icônes d'image peuvent aider les visiteurs à parcourir le contenu et à trouver ce qu'ils recherchent. Cela peut être un moyen facile d'augmenter les vues de page et réduire le taux de rebond dans WordPress. 

Vous pourriez même utiliser une icône d'image pour mettre en évidence l'élément de menu le plus important, tel que le lien de paiement dans votre place de marché en ligne. 

En mettant en évidence un appel à l'action dans le menu, vous pouvez souvent obtenir plus d'inscriptions, de ventes, de membres et d'autres conversions.

Cela dit, voyons comment vous pouvez ajouter des icônes d'image à votre menu de navigation WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Ajouter des icônes d'image aux menus de navigation à l'aide d'un plugin (rapide et facile)
• Méthode 2 : Ajouter des icônes aux menus WordPress à l'aide de code (plus personnalisable)
• Bonus : Ajouter des icônes de médias sociaux aux menus WordPress

Méthode 1 : Ajouter des icônes d'image aux menus de navigation à l'aide d'un plugin (rapide et facile)

Le moyen le plus simple d'ajouter des icônes à vos menus WordPress est d'utiliser Menu Image. Ce plugin est livré avec des icônes dashIcon que vous pouvez ajouter en quelques clics.

Si vous avez configuré Font Awesome sur votre site Web, vous pouvez facilement ajouter ces icônes à votre menu de navigation en utilisant Menu Image. Pour plus d'informations sur l'installation de Font Awesome, consultez notre guide sur comment ajouter facilement des polices d'icônes à votre thème WordPress.

Une autre option consiste à utiliser des images ou des icônes de la médiathèque WordPress.

La première chose à faire est d'installer et d'activer le plugin Menu Image. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, cliquez sur Menu Image dans le tableau de bord WordPress. Sur cet écran, vous pouvez choisir si vous souhaitez recevoir des notifications de sécurité et de fonctionnalités ou cliquer sur le bouton « Ignorer ».

Cela vous mènera à un écran où vous pourrez configurer les paramètres du plugin. Pour commencer, vous verrez toutes les différentes tailles que vous pouvez utiliser pour les icônes d'image.

Si vous prévoyez d'utiliser des icônes de Font Awesome ou de dashicons, alors Menu Image les redimensionnera automatiquement. Cependant, si vous utilisez des images de la médiathèque, vous devrez sélectionner la taille manuellement.

Le plugin prend en charge les tailles d'images WordPress par défaut, telles que miniatures, images et grandes. Il ajoute également trois tailles uniques qui sont définies par défaut sur 24x24, 36x36 et 48x48 pixels.

Ces paramètres devraient bien fonctionner pour la plupart des sites Web, mais vous pouvez agrandir ou réduire les icônes en saisissant des nombres différents pour la 1ère, 2ème ou 3ème taille d'image de menu.

Lorsque vous ajoutez des icônes à votre menu, vous verrez par défaut un champ « image au survol ». Cela vous permet d'afficher une icône différente lorsque le visiteur survole cet élément de menu.

Sachez simplement que ce paramètre n'est disponible que lorsque vous utilisez vos propres images. Vous n'avez pas à vous soucier de la fonctionnalité « image au survol » si vous prévoyez d'utiliser des icônes dashIcons ou Font Awesome.

Afficher une icône différente peut aider les visiteurs à voir où ils se trouvent dans le menu de navigation. Ceci est particulièrement utile si votre menu contient de nombreux éléments différents. Par exemple, vous pourriez utiliser différentes couleurs ou tailles d'icônes pour mettre en évidence l'élément actuellement sélectionné.

Si vous souhaitez créer différents effets de survol, assurez-vous de cocher « Activer le champ image au survol ».

Une fois cela fait, cliquez sur « Enregistrer les modifications » pour sauvegarder vos réglages.

Pour ajouter des icônes au menu de navigation, rendez-vous sur la page Apparence » Menus. Par défaut, WordPress affichera le menu principal de votre site.

Si vous souhaitez modifier un autre menu, ouvrez simplement le menu déroulant « Sélectionner un menu à modifier » et choisissez un menu dans la liste. Ensuite, cliquez sur « Sélectionner ».

Maintenant, survolez le premier élément de menu auquel vous souhaitez ajouter une icône. Lorsque « Image du menu » apparaît, cliquez dessus.

Vous pouvez maintenant décider si vous souhaitez utiliser votre propre image ou choisir une icône prête à l'emploi, telle qu'une icône Font Awesome.

Pour utiliser une icône prête à l'emploi, cliquez sur le bouton radio à côté de « Icônes ».

Vous pouvez ensuite cliquer pour sélectionner n'importe quelle icône dashicon ou Font Awesome.

Si vous souhaitez utiliser votre propre image, sélectionnez le bouton radio à côté de « Image » et cliquez sur le lien « Définir l'image ».

Vous pouvez maintenant choisir une image dans la bibliothèque de médias WordPress ou télécharger un nouveau fichier depuis votre ordinateur.

Si vous avez coché « Activer le champ image au survol » dans les paramètres du plugin, vous devrez également cliquer sur « Définir l'image au survol ».

Choisissez maintenant une image à afficher lorsque l'utilisateur survole cet élément de menu.

Parfois, vous voudrez peut-être ignorer ce paramètre et afficher la même icône quoi qu'il arrive. Pour ce faire, cliquez sur « Définir l'image au survol », puis choisissez exactement la même icône.

Si vous ne sélectionnez pas d'image, l'icône disparaîtra complètement lorsque le visiteur la survolera.

Après cela, ouvrez le menu déroulant Taille de l'image et choisissez une taille dans la liste.

Utiliser la même taille pour toutes les icônes a tendance à rendre le menu plus organisé. Cependant, il est parfois judicieux d'utiliser une icône plus grande pour l'élément le plus important.

Par exemple, si vous avez créé une boutique en ligne à l'aide d'un plugin comme WooCommerce, vous pourriez utiliser une icône plus grande pour « Paiement » afin qu'elle se démarque.

Lorsque vous êtes satisfait de l'icône, il est temps de regarder le libellé de l'élément de menu. Par défaut, le plugin affiche le libellé du titre après l'icône.

Pour modifier cela, sélectionnez l'un des boutons radio dans la section « Position du titre ».

Une autre option consiste à supprimer complètement le libellé de navigation et à créer un menu composé uniquement d'icônes. Si votre menu contient de nombreux éléments, cela peut le rendre moins encombré.

Cependant, vous ne devriez masquer les libellés que s'il est évident ce que signifie chaque icône. Si ce n'est pas clair, les visiteurs auront du mal à naviguer sur votre blog ou site Web WordPress.

Pour masquer le libellé, sélectionnez le bouton radio à côté de « Aucun ».

Lorsque vous êtes satisfait de la configuration de l'élément de menu, cliquez sur « Enregistrer les modifications ».

Pour ajouter une icône à d'autres éléments de menu, suivez simplement le même processus décrit ci-dessus.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu ». Maintenant, si vous visitez votre site Web WordPress, vous verrez le menu de navigation mis à jour en direct.

Méthode 2 : Ajouter des icônes aux menus WordPress à l'aide de code (plus personnalisable)

Vous pouvez également ajouter des icônes d'image à vos menus de navigation à l'aide de CSS.

De cette façon, vous pouvez contrôler exactement où les icônes apparaissent dans vos menus. Vous pouvez également utiliser n'importe quelle image comme icône, c'est donc un excellent moyen d'ajouter votre propre image de marque.

Avant de commencer, téléchargez tous les fichiers image que vous souhaitez utiliser comme icônes. Il peut s'agir de photos de stock, d'images libres de droits trouvées en ligne ou de graphiques personnalisés créés à l'aide d'une application telle que Canva.

Après avoir ajouté chaque image à la médiathèque WordPress, assurez-vous de copier son URL et de la coller dans un éditeur de texte comme le Bloc-notes. Vous aurez besoin de tous ces liens à l'étape suivante.

Pour trouver l'URL d'une image, sélectionnez-la simplement dans la médiathèque WordPress, puis regardez le champ « URL du fichier ».

Pour des instructions plus détaillées, veuillez consulter notre guide sur comment obtenir l'URL des images que vous téléchargez dans WordPress.

Après cela, vous devez visiter la page Apparence » Menus depuis le tableau de bord WordPress.

Ensuite, ouvrez le menu déroulant « Sélectionner un menu à modifier » et choisissez le menu auquel vous souhaitez ajouter les icônes d'image.

Après cela, cliquez sur « Sélectionner ».

Ensuite, vous devez activer les classes CSS personnalisées en cliquant sur « Options de l'écran ».

Dans le panneau qui apparaît, cochez la case à côté de « Classes CSS ».

Une fois cela fait, vous pouvez ajouter des classes CSS personnalisées à n'importe quel élément du menu de navigation. C'est ainsi que vous associerez chaque élément de menu à une image dans la médiathèque WordPress.

Vous pouvez nommer ces classes comme vous le souhaitez, mais il est conseillé d'utiliser quelque chose qui vous aide à identifier l'élément de menu.

Pour commencer, cliquez simplement sur le premier élément auquel vous souhaitez ajouter une icône d'image. Dans le champ « Classes CSS (facultatif) », tapez le nom de la classe que vous souhaitez utiliser.

Vous utiliserez ces classes CSS personnalisées à l'étape suivante, alors notez-les dans votre Bloc-notes ou une application similaire.

Suivez simplement le même processus pour ajouter une classe distincte à tous vos éléments de menu. Après cela, cliquez sur « Enregistrer le menu » pour enregistrer vos paramètres.

Vous êtes maintenant prêt à ajouter des icônes d'image à vos menus de navigation WordPress à l'aide de CSS.

Souvent, les tutoriels WordPress vous diront d'ajouter des extraits de code à vos fichiers de thème WordPress. Cependant, cela peut provoquer des erreurs WordPress courantes et n'est pas très convivial pour les débutants.

C'est pourquoi nous recommandons WPCode.

C'est le meilleur plugin d'extraits de code WordPress utilisé par plus d'un million de sites Web et il vous permet d'ajouter du code personnalisé sans modifier le fichier functions.php de votre thème.

La première chose à faire est d'installer et d'activer le plugin WPCode gratuit. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Extraits de code » Ajouter un extrait.

Cela vous mènera à la page « Ajouter un extrait », où vous pourrez voir la bibliothèque d’extraits prêts à l’emploi de WPCode. Ceux-ci incluent des extraits qui vous permettent d’améliorer la sécurité de votre WordPress en désactivant XML-RPC, de télécharger des types de fichiers que WordPress ne prend pas en charge par défaut, et plus encore.

Survolez simplement votre souris sur « Ajouter votre code personnalisé », puis cliquez sur « Utiliser l'extrait » lorsqu'il apparaît.

Pour commencer, tapez un titre pour l'extrait de code personnalisé. Cela peut être n'importe quoi qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Une fois cela fait, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait CSS ».

Dans l’éditeur de code, vous devrez ajouter du code pour chaque icône que vous souhaitez afficher.

Pour vous aider, nous avons créé un extrait d’exemple ci-dessous. Vous pouvez modifier « .carticon » par la classe CSS personnalisée que vous avez créée à l’étape précédente. Vous devrez également remplacer l’URL par un lien vers l’image dans votre bibliothèque de médias WordPress :

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Vous devrez ajuster l’extrait ci-dessus pour chaque élément de menu individuel que vous avez créé précédemment.

Lorsque vous êtes satisfait de votre code, faites défiler jusqu'à la section « Insertion ». WPCode peut ajouter du code à différents emplacements, tels qu'après chaque article, uniquement sur le frontend, ou uniquement dans l'administration.

Pour utiliser le code CSS personnalisé sur l'ensemble de votre blog ou site Web WordPress, cliquez sur « Insertion automatique » s'il n'est pas déjà sélectionné.

Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête du site ».

Après cela, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton « Inactif » pour qu'il devienne « Actif ».

Enfin, cliquez sur « Enregistrer le snippet » pour rendre le CSS personnalisé actif.

Maintenant, si vous visitez votre site Web, vous verrez toutes les icônes d'image dans votre menu de navigation.

Selon votre thème WordPress, vous devrez peut-être ajuster le CSS pour qu'il affiche les icônes d'image exactement au bon endroit. Si tel est le cas, accédez à Snippets de code » Snippets de code dans le tableau de bord WordPress.

Ensuite, survolez simplement le snippet et cliquez sur le lien « Modifier » lorsqu'il apparaît.

Cela ouvre l'éditeur de code, prêt pour que vous puissiez y apporter quelques modifications.

Bonus : Ajouter des icônes de médias sociaux aux menus WordPress

En plus des icônes de menu, vous pouvez également ajouter des icônes de médias sociaux à votre menu de navigation WordPress. Cela aidera à promouvoir vos profils de médias sociaux de manière visuellement attrayante sans prendre trop de place sur votre site.

Pour ce faire, vous pouvez utiliser le plugin Menu Image. Après activation, visitez simplement la page Apparence » Menus depuis le tableau de bord WordPress et développez l'onglet « Liens personnalisés » dans la colonne de gauche.

Ensuite, ajoutez l'URL de votre identifiant de média social et tapez le nom de la plateforme. Ensuite, cliquez sur le bouton « Ajouter au menu ».

Une fois que le profil de média social a été ajouté en tant qu'élément de menu, il s'affichera sur le côté droit de l'écran.

Ici, vous devez à nouveau développer l'onglet des éléments et cliquer sur le bouton « Image du menu ».

Cela ouvrira une nouvelle invite à l'écran où vous pourrez cliquer sur le lien « Définir l'image » pour télécharger une icône de réseau social depuis votre médiathèque.

Si vous souhaitez ajouter une icône préfabriquée, vous pouvez sélectionner l'option « Icône » et ajouter votre icône de réseau social depuis FontAwesome.

Enfin, cliquez sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.

Vous avez maintenant ajouté avec succès une icône de réseau social à votre menu de navigation. Pour plus d'informations, consultez notre tutoriel sur comment ajouter des icônes de réseaux sociaux aux menus WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des icônes d'image à votre menu de navigation WordPress. Vous pouvez également consulter notre guide sur comment ajouter une logique conditionnelle aux menus dans WordPress et comment créer un menu de navigation flottant et fixe dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.