Comment ajouter des icônes de médias sociaux au menu WordPress

Que vous dirigiez une entreprise ou un site personnel, vous devez vous assurer que les utilisateurs peuvent partager votre contenu sur les réseaux sociaux. C'est pourquoi, dans cet article, nous allons vous montrer comment ajouter des icônes de médias sociaux à votre menu WordPress .

Pourquoi ajouter des icônes de médias sociaux au menu WordPress ?

Selon des études récentes, près de 50% de la population mondiale utilise au moins un réseau social. Connecter votre site à Facebook ou ajouter des flux Instagram à votre site Web sont de bonnes options, mais vous pouvez faire autre chose pour accroître votre présence sur les réseaux sociaux. Le menu est l'un des éléments les plus importants de votre site. De plus, c'est l'une des premières choses que les utilisateurs voient lorsqu'ils visitent votre site. Par exemple, jetez un œil au menu principal de notre site Web.

Ainsi, pour personnaliser votre site et tirer le meilleur parti de vos canaux de médias sociaux, vous pouvez ajouter des icônes de médias sociaux à votre menu WordPress. En plus de cela, vous pouvez afficher des icônes sur d'autres zones de votre site qui prennent en charge les widgets tels que votre pied de page, votre barre latérale, etc.

Même si certains thèmes comme Divi incluent des options pour ajouter des icônes de médias sociaux au menu, la plupart des thèmes ne sont pas livrés avec cette fonctionnalité. Et WordPress n'inclut pas non plus de fonctionnalité native pour inclure des icônes dans le menu.

Dans cet article, nous allons donc vous montrer trois méthodes pour ajouter facilement des icônes de médias sociaux à votre menu WordPress .

Comment ajouter des icônes de médias sociaux à votre menu WordPress

Il existe trois façons principales d'ajouter des icônes de réseaux sociaux à votre menu WordPress :

1. Avec des plugins
   1. QuadMenu
   2. Icônes sociales WP
2. Depuis le personnalisateur de thème
3. Utilisation manuelle des icônes FontAwesome

Dans ce guide, nous décrirons chaque méthode étape par étape afin que vous puissiez choisir celle que vous préférez.

1) Plugins

L'utilisation de plugins est le moyen le plus simple d'inclure des icônes de médias sociaux dans votre menu. Il existe plusieurs options, donc, pour vous faciliter la vie, nous avons répertorié deux des meilleurs plugins que vous pouvez utiliser.

1.1) QuadMenu

QuadMenu est le meilleur outil pour personnaliser facilement et faire passer vos menus WordPress au niveau supérieur. Il s'agit d'un plugin freemium. Il existe une version gratuite avec des fonctionnalités de base et trois plans premium qui incluent des fonctionnalités plus avancées et une assistance prioritaire.

Pour ajouter des icônes de médias sociaux à votre menu, vous avez besoin de la version premium. Voyons donc comment l'installer et activer le plugin sur votre site.

Installation et activation

Tout d'abord, vous devez acheter le plugin et télécharger les fichiers sur votre bureau. Ensuite, avant de l'installer, vous devez installer la version gratuite sur votre site. Pour ce faire, accédez à votre tableau de bord WP > Plugins > Add New . Ensuite, utilisez la barre de recherche et recherchez QuadMenu. Après cela, appuyez sur Installer puis sur Activer .

Après l'activation, utilisez les fichiers de la version premium que vous avez téléchargés auparavant et installez-les sur votre site.

Une fois que vous avez activé le plugin, vous devrez vérifier votre clé de licence. Depuis le tableau de bord de votre compte QuadMenu, vous verrez l'option de licences.

Copiez la clé à partir de là et collez-la dans le champ des licences avec votre adresse e-mail enregistrée pour vérifier votre clé.

Le plugin est disponible dans notre boutique, Envato et Elegant marketplace, alors utilisez le menu déroulant pour sélectionner l'option appropriée pour votre achat. Après vérification, vous êtes prêt à partir.

Ajoutez des icônes de médias sociaux à votre menu WordPress avec QuadMenu

QuadMenu fonctionne avec n'importe quel thème gratuit ou premium. Pour cette démo, nous allons utiliser GeneratePress mais le processus est similaire à tout autre thème. Tout d'abord, allons dans les paramètres du plugin en allant dans QuadMenu > Options .

Là, vous verrez plusieurs options de personnalisation telles que :

• Menu primaire
• Sensible
• Thème par défaut
• Personnaliser
• Social
• Importer / Exporter

Configurer les options sociales

Dans notre cas, nous devons ajouter des icônes de médias sociaux à notre menu principal. Nous allons donc sélectionner l'option Social .

Vous verrez plusieurs options par défaut que vous pouvez modifier ou supprimer en fonction des chaînes dont vous disposez. Ils ont déjà attribué des icônes avec des profils de médias sociaux.

Cependant, vous pouvez également les personnaliser en cliquant sur le bouton + Ajouter une icône . De plus, vous pouvez ajouter de nouveaux canaux de médias sociaux en appuyant sur le bouton + .

Disons que vous voulez changer l'icône Facebook. Appuyez sur l' icône + Ajouter et vous verrez une fenêtre contextuelle avec de nombreuses icônes parmi lesquelles vous pouvez choisir.

Il existe de nombreuses icônes, nous vous recommandons donc d'utiliser la fonction de recherche pour filtrer les résultats.

Comme vous pouvez le voir, nous avons recherché des icônes Facebook. Il vous montrera toutes les icônes disponibles liées à votre requête de recherche, alors sélectionnez celle que vous aimez et enregistrez-la. Vous pouvez également modifier les titres et les URL. Une fois que vous avez apporté toutes les modifications souhaitées dans QuadMenu, enregistrez les paramètres.

Après cela, allez dans les menus de WordPress. Vous y verrez tous les menus disponibles. Pour utiliser les options QuadMenu dans votre menu, vous devez le marquer comme QuadMenu Dev sous les paramètres du menu . Après cela, enregistrez le menu.

Au prochain chargement de la page, vous verrez les options de QuadMenu.

Sous les éléments QuadMenu, vous verrez la liste des icônes sociales . Sélectionnez-les et appuyez sur Ajouter au menu .

Après cela, vous verrez la section Social sous les options du menu principal. Passez votre souris dessus et vous verrez les options de personnalisation de QuadMenu.

Si vous avez besoin d'une personnalisation supplémentaire, sélectionnez cette option. Sinon, appuyez sur le bouton Enregistrer le menu et vous êtes prêt à partir.

Icônes du menu (Frontend)

Maintenant, il est temps de vérifier les résultats. Alors, allez sur la page d'accueil de votre site Web et vous verrez les icônes sociales. Et lorsque vous les survolez, les icônes seront rendues.

C'est ça! Vous avez ajouté avec succès des icônes de médias sociaux à vos menus WordPress avec QuadMenu .

1.2) Icônes du menu WP

Si vous ne pouvez pas vous permettre des plugins premium, ne vous inquiétez pas. Nous avons une solution gratuite pour vous. Dans cette section, nous allons vous montrer comment ajouter des icônes de médias sociaux à votre WordPress avec un plugin gratuit appelé WP Menu Icons.

Installation et activation

Tout d'abord, installez et activez les icônes de menu WP sur votre site.

Cet outil est très facile à utiliser et ne nécessite aucune personnalisation supplémentaire.

Personnalisation des icônes de menu

Si vous n'avez pas de menu sur votre site, vous pouvez en créer un à partir de la section de configuration.

Attribuez un emplacement à votre menu et vous êtes alors prêt à y ajouter des éléments. Pour ajouter vos profils de médias sociaux au menu, choisissez l'élément Liens personnalisés . Vous devrez entrer l'URL de la page que vous souhaitez lier et une étiquette. Appuyez ensuite sur Ajouter au menu .

Après avoir ajouté l'icône au menu, la page de configuration ressemblera à ceci.

De même, vous pouvez ajouter d'autres icônes de médias sociaux. Dans ce cas, nous avons ajouté les icônes Twitter, Pinterest et Instagram à notre menu.

Sur les éléments de menu, il y a un bouton + . C'est le paramètre que vous devez utiliser pour ajouter des icônes aux éléments de menu, alors cliquez dessus.

Ensuite, vous verrez une large sélection d'articles à choisir.

Il existe des dizaines d'icônes, utilisez donc la fonction de recherche pour filtrer les résultats souhaités. Dans ce cas, nous avons sélectionné l'élément de menu Facebook, nous allons donc rechercher l'icône Facebook. Après avoir sélectionné celui que vous aimez, vous verrez les paramètres de l'icône dans la colonne de droite. Ici, vous pouvez afficher ou masquer l'étiquette, personnaliser la position, la taille et l'alignement. Dans ce cas, nous allons masquer l'étiquette. Une fois la personnalisation terminée, cliquez sur Enregistrer .

Vous pouvez personnaliser les icônes Pinterest, Twitter et Instagram de la même manière. Après avoir ajouté les icônes requises, enregistrez le menu.

Il est maintenant temps de vérifier le résultat. Accédez à l'interface de votre site Web et vous verrez les nouvelles icônes.

C'est ainsi que vous pouvez ajouter des icônes de médias sociaux à vos menus d'en-tête dans WordPress avec WP Menu Icons . Enfin, vous pouvez également styliser vos icônes à partir de la page de paramètres WP Menu Icons.

2) Ajouter des icônes de médias sociaux avec le personnalisateur de thème

Si vous ne souhaitez installer aucun plug-in, vous pouvez inclure des icônes de médias sociaux dans vos menus à l'aide de votre personnalisateur de thème. Certains thèmes premium tels que Divi, Newspaper ou Avada sont livrés avec des panneaux thématiques intégrés qui vous permettent de personnaliser le thème et d'ajouter des icônes de médias sociaux.

Si vous n'êtes pas sûr que votre thème propose l'option d'ajouter des icônes de médias sociaux, dans votre tableau de bord WordPress, accédez à Apparence > Personnaliser > Menus > Afficher les emplacements et vérifiez s'il existe une option de menu social ou d'icône sociale.

Pour notre démonstration, nous allons utiliser le thème Divi de Elegant Themes. Tout d'abord, accédez à votre tableau de bord WP> Apparence> Personnaliser .

Ensuite, accédez à la personnalisation de l'en-tête et aux éléments d'en-tête. Là, vous verrez une option pour activer les icônes sociales d'en-tête.

Activez cette option et vous la verrez ensuite sur l'en-tête de votre site Web.

De plus, vous pouvez les personnaliser en allant dans Divi > Options du thème .

Là, vous pouvez activer les icônes que vous voulez et entrer l'URL de vos profils de médias sociaux. Les icônes de médias sociaux apparaîtront par défaut dans l'en-tête et le pied de page de votre site.

Cependant, vous pouvez choisir de les masquer via les paramètres de personnalisation.

D'autres thèmes comme Newspaper et Newsmag ont leurs propres options de personnalisation, vous pouvez donc activer/désactiver les icônes et les afficher directement via le panneau de thème dédié. Si vous ne trouvez pas la section des icônes de médias sociaux dans le personnalisateur de thème ou le panneau, n'hésitez pas à laisser un commentaire ci-dessous et nous essaierons de vous aider.

3) Utiliser FontAwesome

Enfin, vous pouvez ajouter manuellement des icônes de médias sociaux à vos menus dans WordPress. Même si vous n'êtes pas développeur ou n'avez pas de compétences en codage, vous pouvez afficher des icônes de médias sociaux avec un peu de codage HTML. Pour ce faire, nous utiliserons les icônes de FontAwesome.

Donc, la première chose que vous devez faire est d'aller sur le site Web de FontAwesome.

Utilisez la fonction de recherche pour trouver les icônes dont vous avez besoin. Pour cette démo, nous allons rechercher des icônes Twitter .

Sur la page suivante, le site Web vous montrera les résultats de la recherche. Choisissez celui que vous préférez.

Sur la page suivante, vous verrez les détails de l'icône que vous avez sélectionnée, alors copiez simplement le code HTML de l'icône.

Ajouter des icônes Font Awesome à WordPress

Ensuite, rendez-vous dans la section des menus de votre site WordPress. Sur le côté gauche, vous verrez la section des liens personnalisés. Vous devrez entrer l'URL de votre profil Twitter et coller le code HTML que vous venez de copier dans le champ Texte du lien . Une fois que vous avez fait cela, appuyez sur Ajouter au menu .

Après cela, enregistrez les modifications. Ensuite, allez sur l'interface de votre site et vous verrez l'icône.

De cette façon, vous pourrez ajouter n'importe quelle icône de réseau social à votre menu .

Le code HTML ne fonctionne pas

Si vous avez suivi toutes les étapes de ce tutoriel mais que le HTML ne fonctionne pas, essayez ceci. Si le code fab ne fonctionne pas, essayez de modifier le code HTML en supprimant le b du fab .

Ainsi, par exemple, dans notre cas, le code HTML final ressemblera à ceci <i class=”fa fa-twitter”></i> au lieu de <i class=”fab fa-twitter”></i> . Exemple:

Ajouter des icônes de médias sociaux à l'en-tête WordPress

L'en-tête est l'un des endroits les plus populaires où vous souhaiterez peut-être ajouter des icônes de médias sociaux. Voyons donc rapidement comment le faire à l'aide du personnalisateur de thème.

Notez que vous aurez besoin d'un thème qui vous donne la possibilité d'ajouter des icônes de médias sociaux au menu. Gardez également à l'esprit que les étapes peuvent être légèrement différentes en fonction de votre thème, mais vous devriez pouvoir suivre les étapes sans aucun problème dans la plupart des thèmes.

Examinons deux options : créer un nouveau menu et en modifier un existant.

Ajout d'icônes de médias sociaux à l'en-tête dans un nouveau menu

1. Dans votre tableau de bord WordPress, allez dans Apparence > Menus
2. Appuyez sur le lien créer un nouveau menu à côté du bouton Sélectionner et donnez-lui un nom
3. Vous pouvez maintenant y ajouter les icônes. Sélectionnez le nouveau menu et entrez les médias sociaux et les URL que vous souhaitez inclure (Instagram, Facebook, YouTube, etc.) et appuyez sur Ajouter au menu
4. Enregistrer les modifications
5. Après cela, placez le menu que vous venez de créer dans la section d'en-tête
6. Enregistrez les modifications et c'est tout ! C'est ainsi que vous ajoutez des icônes de médias sociaux à l'en-tête WordPress !

Ajouter des icônes de médias sociaux à l'en-tête d'un menu existant

1. Dans votre tableau de bord WordPress, allez dans Apparence > Personnaliser > Menus
2. Accédez à la section En- tête et appuyez sur le bouton Ajouter des éléments
3. Sélectionnez ensuite l'icône de la plate-forme de médias sociaux que vous souhaitez ajouter, entrez l'URL et appuyez sur Ajouter au menu . Vous devez faire la même chose pour chaque média social que vous souhaitez ajouter
4. Sélectionnez l'emplacement du menu où vous souhaitez afficher les icônes. Les options dont vous disposez dépendront de votre thème.
5. Enregistrez les modifications. C'est ça!

Sinon, si vous souhaitez ajouter les icônes au pied de page, par exemple, suivez le même processus mais sélectionnez le pied de page comme emplacement des icônes.

Bonus : ouvrez les icônes des réseaux sociaux dans un nouvel onglet

L'ajout d'icônes de réseaux sociaux à votre menu WordPress vous aidera à développer votre présence sur les réseaux sociaux. Cependant, le problème est que lorsqu'un utilisateur clique sur l'icône de votre menu, la page du média social se charge dans la même fenêtre et l'utilisateur quitte votre site. La solution consiste à faire en sorte que l'icône des médias sociaux charge la page dans un nouvel onglet. Voyons comment faire.

Dans votre tableau de bord WordPress, accédez à Apparence > Menus , ouvrez les options d'écran en haut à droite et activez l'option Lien cible . Ensuite, accédez à chaque élément du menu et cochez la case Ouvrir le lien dans un nouvel onglet . Vous pouvez également définir chaque cible sur _blank.

Enfin, enregistrez les modifications et vous avez terminé !

Comment ajouter des flux sociaux à votre site

En plus d'ajouter des icônes de médias sociaux à votre menu, vous pouvez également ajouter des flux sociaux à votre site pour augmenter l'engagement avec vos utilisateurs. Dans la section, nous vous montrerons comment connecter Instagram et TikTok à votre site Web.

Ajouter un flux Instagram à WordPress

Le moyen le plus simple de connecter Instagram à votre site consiste à utiliser le plug-in Social Feed Gallery. C'est un outil freemium qui vous permet d'afficher votre flux Instagram en quelques clics.

Tout d'abord, installez et activez le plugin à partir de ce lien. Ensuite, accédez à Social Feed Gallery et connectez- vous à votre compte Instagram.

Après cela, accédez à Social Feed Gallery > Accounts et vous aurez la possibilité de vous connecter à votre compte personnel ou professionnel (gardez à l'esprit que le compte professionnel a plus d'options). Ensuite, ajoutez un compte, connectez-vous et accordez à l'application les autorisations nécessaires pour connecter votre compte à WordPress.

Une fois cela fait, accédez à l'onglet Flux , appuyez sur +Flux et ajoutez le flux que vous souhaitez afficher. Enfin, personnalisez votre flux et une fois que vous avez terminé, vous verrez que le plugin vous fournit un shortcode que vous pouvez coller sur n'importe quelle page ou publier pour afficher votre flux.

Pour plus d'informations, consultez notre guide sur la façon d'intégrer Instagram à WordPress.

Ajouter un flux TikTok à WordPress

De même, vous pouvez également connecter votre site à TikTok. Pour afficher les flux TikTok, nous utiliserons un plugin dédié appelé WP TikTok Feed. C'est le plugin TikTok le plus populaire pour WordPress et il a une version gratuite et quelques plans premium.

Après avoir installé et activé le plugin, dans votre tableau de bord WordPress , vous devez lier votre compte TikTok puis aller dans Tiktok Feed > Feeds . Là, appuyez sur + Feed et ajoutez le flux que vous souhaitez afficher. De plus, vous verrez plusieurs options pour personnaliser la façon dont vous affichez le flux sur votre site.

Pour plus d'informations à ce sujet, consultez notre tutoriel sur la façon d'intégrer des vidéos TikTok dans WordPress.

Conclusion

Dans l'ensemble, l'ajout d'icônes de réseaux sociaux à vos menus WordPress est un excellent moyen de renforcer votre présence sur les réseaux sociaux. Dans ce guide, nous avons vu 3 façons différentes de le faire :

1. Avec des plugins
2. Depuis le personnalisateur de thème
3. Manuellement

Si votre thème vous permet d'ajouter des icônes par défaut, vous n'avez pas besoin d'utiliser de plugins ou de code HTML supplémentaires. Si vous préférez un plugin, nous vous recommandons d'utiliser QuadMenu. Il vous permettra de prendre le contrôle total de l'ensemble de la personnalisation de votre menu WordPress et il est également livré avec de nombreuses fonctionnalités puissantes.

Cependant, si vous préférez une solution gratuite, jetez un œil aux icônes du menu WP. C'est un outil simple qui vous aidera à inclure des icônes sociales en un rien de temps.

D'un autre côté, si vous ne souhaitez installer aucun plugin, vous pouvez ajouter des icônes de médias sociaux en utilisant un peu d'icônes HTML et FontAwesome. Cette option vous permet également de personnaliser les icônes avec un peu de CSS ou vous pouvez éviter la partie style et utiliser les icônes par défaut.

Avez-vous trouvé cet article utile? Si vous l'avez fait, laissez-nous un commentaire ci-dessous et partagez ce message sur les réseaux sociaux. Pour plus de didacticiels connexes, consultez les guides suivants :

• Meilleurs plugins pour ajouter des flux de médias sociaux à WordPress
• Comment ajouter des flux de groupe Facebook à WordPress