Ajouter des icônes de médias sociaux à votre menu WordPress est un moyen intelligent de promouvoir vos profils sans encombrer votre site. Ces petits logos reconnaissables peuvent encourager les internautes à vous suivre sur diverses plateformes, ce qui peut potentiellement stimuler votre présence et votre engagement en ligne.
Nous avons constaté qu’avec WordPress, la manière d’ajouter des icônes de médias sociaux à votre menu dépend de l’utilisation d’un thème classique ou d’un thème en bloc. Mais nous avons trouvé des méthodes efficaces pour les deux types de thèmes.
Dans cet article, nous allons vous montrer comment ajouter des icônes de médias sociaux dans les menus de WordPress, en utilisant des méthodes qui fonctionnent à la fois pour les thèmes classiques et les thèmes en bloc.
Pourquoi ajouter des icônes de réseaux sociaux aux menus de WordPress ?
En ajoutant des icônes de médias sociaux à vos menus WordPress, vous pouvez souvent obtenir plus de publicités, d’engagement et d’abonnés sur tous vos profils de médias sociaux.
Les icônes de réseaux sociaux peuvent également attirer l’attention de l’internaute sans ajouter de texte supplémentaire à vos menus. Cela vous autorise à promouvoir un grand nombre de profils différents dans un espace réduit.
Le processus d’ajout d’icônes de médias sociaux est différent de l’insertion d’icônes d’images dans votre menu WordPress. C’est parce que ces images doivent être liées à vos profils sociaux, et elles nécessitent souvent un style spécial pour maintenir leur apparence sur différents appareils et tailles d’écran.
En outre, vous devrez veiller à ce que ces icônes soient reconnaissables et de taille cohérente, ce qui peut s’avérer difficile lorsque vous utilisez des fichiers d’images ordinaires.
Ceci étant dit, jetons un coup d’œil à 2 façons conviviales pour les débutants d’ajouter des icônes de réseaux sociaux aux menus de WordPress.
Tutoriel vidéo
Si vous préférez les instructions écrites, continuez à lire. Il vous suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :
Méthode 1 : Utilisation de l’extension Menu Image (thèmes classiques uniquement)
La façon la plus simple d’ajouter des icônes de médias sociaux aux menus de WordPress est d’utiliser Menu Image.
Lors de la création de vos icônes sociales, vous pouvez utiliser n’importe quelle image que vous avez téléversée dans la médiathèque de WordPress.
Par exemple, de nombreuses entreprises de réseaux sociaux de premier plan fournissent des logos que vous pouvez utiliser sur votre site, comme la boîte à outils de la marque Twitter. Vous pouvez également télécharger des icônes à partir de bibliothèques en ligne comme le site Font Awesome.
Menu Image s’intègre également à l’extension Font Awesome. Cela vous permet de parcourir et d’importer toutes les icônes Font Awesome directement depuis le tableau de bord de WordPress, y compris les icônes des principaux réseaux sociaux.
Nous vous recommandons d’installer d’abord l’extension Font Awesome avant de poursuivre le tutoriel. Pour des instructions détaillées sur la façon de configurer Font Awesome, veuillez consulter notre guide sur la façon d’ajouter facilement des polices d’icônes à votre thème WordPress.
Aucun de la façon dont vous offrez les icônes de réseaux sociaux, vous aurez besoin d’installer et d’activer le plugin Menu Image. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Après l’activation, vous pouvez jeter un coup d’œil aux tailles des icônes et les modifier si nécessaire. Pour ce faire, vous devez vous rendre dans Menu Image » Menu Image.
Lors de la création de vos icônes sociales, vous pouvez utiliser l’une des tailles d’image par défaut de WordPress, telles que la miniature, l’image ou la grande. Menu Image vous permet également de choisir entre trois tailles uniques qui sont définies à 24×24, 36×36 et 48×48 pixels par défaut.
Ces tailles devraient convenir à la plupart des sites WordPress, mais vous pouvez les modifier en saisissant des nombres différents dans les champs « 1st, 2nd, or 3rd Menu Image ».
Une fois cela fait, cliquez sur « Enregistrer les modifications » pour stocker vos réglages.
Pour ajouter des icônes à un menu de navigation, rendez-vous dans Apparence » Menus. Par défaut, WordPress affiche le menu principal de votre site.
Si vous souhaitez ajouter des icônes de médias sociaux à un autre emplacement du menu, comme un menu flottant collant, il vous suffit d’ouvrir le menu déroulant « Sélectionner un menu à modifier ».
Vous pouvez ensuite choisir un menu dans la liste et cliquer sur « Sélectionné ».
Pour savoir étape par étape comment créer un nouveau menu, veuillez consulter notre guide sur l’ajout d’un menu de navigation dans WordPress.
Pour commencer, vous devrez ajouter chaque profil social à votre menu sous la forme d’un nouveau lien.
Lorsque vous êtes prêt, cliquez pour déplier la section » Liens personnalisés « , puis saisissez l’adresse de la page du réseau social que vous souhaitez utiliser. Par exemple, vous pouvez saisir l’URL de votre groupe Facebook ou de votre chaîne YouTube.
Vous devrez également saisir un « texte de lien ». Dans une étape par étape, vous aurez la possibilité de modifier l’emplacement de ce titre dans le menu ou même de le masquer complètement.
Cliquez ensuite sur « Ajouter au menu ».
Cet article apparaît désormais dans la colonne de droite.
Pour ajouter une icône de réseau social, il suffit de survoler le nouvel élément de menu.
Cliquez ensuite sur le bouton « Image du menu » lorsqu’il apparaît.
Note : Si le bouton « Image du menu » n’apparaît pas, cliquez sur « Enregistrer les modifications ». Le bouton « Image du menu » doit maintenant apparaître lorsque vous survolez un élément du menu.
Vous pouvez maintenant décider d’utiliser une image de votre médiathèque WordPress ou une icône fournie par Font Awesome.
Pour utiliser une icône Font Awesome prête à l’emploi, cliquez sur le bouton radio situé à côté de » Icône « .
Sélectionnez ensuite « Fontawesome ».
Vous pouvez ensuite cliquer sur « Marques ».
Vous verrez maintenant toutes les icônes de marque, y compris les icônes des principaux réseaux sociaux, de Facebook à LinkedIn. Lorsque vous voyez l’image que vous souhaitez utiliser, il vous suffit de cliquer dessus.
Une autre option consiste à utiliser votre propre icône à partir de la médiathèque de WordPress en sélectionnant le bouton radio « Image ». Cliquez ensuite sur le lien « Définir l’image ».
Vous pouvez maintenant choisir une image dans la médiathèque de WordPress ou téléverser un nouveau fichier depuis votre ordinateur.
Quel que soit l’endroit d’où provient l’icône, Menu Image affichera une prévisualisation à droite.
Vous pouvez désormais modifier l’affichage du titre du lien au-dessus, au-dessous, avant ou après l’icône du réseau social à l’aide des Réglages de la « Position du titre ».
De nombreuses icônes de réseaux sociaux sont instantanément reconnaissables, de sorte que le titre du lien peut être inutile. Si vous ajoutez beaucoup d’icônes sociales à un menu de navigation, les titres peuvent même donner à votre menu un aspect plus désordonné et compliqué.
Ceci étant dit, vous pouvez masquer le titre en sélectionnant le bouton radio « Masquer ».
Au fur et à mesure que vous apportez des modifications, la Prévisualisation directe se met à jour automatiquement, ce qui vous permet d’essayer différents Réglages pour voir ce qui vous convient le mieux.
Enfin, si vous utilisez votre propre image, vous pouvez redimmensionner les icônes de réseaux sociaux à l’aide du menu déroulant « Taille de l’image ».
Des icônes plus grandes attireront l’attention de l’internaute, mais elles peuvent aussi le distraire. En gardant cela à l’esprit, vous pouvez essayer différentes tailles pour voir ce qui fonctionne le mieux sur votre blog WordPress.
Lorsque vous êtes satisfait de la façon dont l’icône de réseau social est définie, il vous suffit de cliquer sur « Enregistrer les modifications ».
Il suffit de répéter ces étapes pour ajouter d’autres icônes à votre menu WordPress.
Vous pouvez même ajouter des icônes à d’autres éléments importants du menu de navigation et mettre ces éléments en évidence pour attirer l’attention de vos utilisateurs.
Lorsque vous êtes satisfait de la façon dont le menu est configuré, cliquez sur « Enregistrer le menu ».
Désormais, vous pouvez visiter votre site pour voir les nouvelles icônes de réseaux sociaux en action.
Voici à quoi cela ressemble sur notre site de démonstration.
Méthode 2 : Utilisation de l’éditeur de blocs (thèmes uniquement)
WordPress dispose d’un bloc d’icônes sociales intégré qui vous permet de créer un menu contenant des icônes de réseaux sociaux, puis de les afficher dans une belle mise en page.
Ce bloc est livré avec des icônes intégrées pour tous les principaux réseaux sociaux, de sorte que vous n’avez pas besoin d’installer un plugin comme Font Awesome ou de téléverser des icônes dans votre médiathèque.
Cependant, vous pouvez uniquement ajouter des icônes de réseaux sociaux et des liens au bloc Icônes sociales, il n’est donc pas aussi flexible que l’extension Image de menu.
Si vous utilisez un thème à blocs, vous pouvez ajouter un bloc d’icônes sociales à n’importe quelle partie de votre site, comme l’en-tête ou le pied de page. De cette manière, vous pouvez afficher un menu de réseaux sociaux sur l’ensemble de votre site.
Pour Premiers, allez dans Apparence » Éditeur dans le Tableau de bord WordPress.
À partir de là, vous verrez quelques menus permettant de personnaliser le design de votre thème de bloc.
Pour ajouter des icônes de réseaux sociaux à votre menu, cliquez sur « Navigation ».
L’étape suivante consiste à cliquer sur l’icône « Modifier ».
Ceci ouvrira l’éditeur/éditrices WordPress.
Ceci fait, vous pourrez maintenant modifier et styliser votre menu de navigation, qui fait partie de votre modèle d’en-tête WordPress.
Pour commencer, cliquez sur l’icône bleue » + » dans le coin supérieur gauche. Dans la barre de recherche, vous devez taper « Icônes sociales ».
Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur le modèle de thème.
Pour ajouter la première icône, il suffit de cliquer sur l’icône « + » à l’intérieur du module.
Dans la fenêtre surgissante, saisissez l’icône que vous souhaitez ajouter, par exemple « Twitter » ou « Facebook ».
Lorsque l’icône adéquate apparaît, il suffit de cliquer pour l’ajouter à votre blog WordPress.
Cliquez ensuite sur la nouvelle icône de réseau social.
Une petite barre s’ouvre, dans laquelle vous pouvez saisir l’URL vers laquelle vous souhaitez établir un lien, comme votre page Facebook.
Pour ajouter d’autres icônes sociales à WordPress, il suffit de cliquer sur l’icône » + » et de répéter le même processus décrit ci-dessus.
Après avoir ajouté toutes les plateformes de réseaux sociaux, vous voudrez peut-être personnaliser le bloc. Pour ce faire, cliquez pour sélectionner le bloc Icônes sociales, puis cliquez sur l’onglet » Bloc « .
Vous pouvez modifier la justification, l’alignement et l’orientation de l’icône à l’aide des réglages « Mise en page ».
Par défaut, tous les liens des réseaux sociaux s’ouvrent dans le même onglet. Pour que les internautes restent sur votre site, vous pouvez cliquer pour activer le permutateur « Ouvrir les liens dans un nouvel onglet ».
Par défaut, WordPress affiche uniquement les icônes sociales, sans aucun texte.
Si vous souhaitez afficher du texte à côté de chaque icône, cliquez sur le bouton « Afficher les libellés » pour le faire permuter.
Cliquez ensuite sur l’onglet « Styles ».
Ici, vous pouvez modifier le style du bouton en cliquant sur « Défaut », « Logos uniquement » ou « Forme de pilule ».
Enfin, vous pouvez modifier l’espace entre les icônes sociales à l’aide des Réglages sous » Espacement des blocs « .
Lorsque vous êtes satisfait de l’aspect du menu, cliquez sur le bouton « Enregistrer ».
Maintenant, si vous visitez votre site, vous verrez les icônes des réseaux sociaux en direct.
Astuce bonus : Contenu embarqué de flux sociaux sur votre site WordPress
L’ajout d’icônes de réseaux sociaux aux menus WordPress est un excellent moyen d’obtenir plus d’abonnés et d’engagement sur vos différents comptes. Cependant, il y a beaucoup d’autres façons de promouvoir votre Twitter, Facebook et d’autres profils sociaux.
La meilleure façon d’obtenir plus d’abonnés et d’engagement est d’embarquer un flux social direct sur votre site. Cela vous permet d’afficher les dernières publications de vos sites de médias sociaux, ainsi que des boutons que les internautes peuvent utiliser pour s’engager avec vos publications ou vous suivre sur les médias sociaux.
La meilleure façon d’ajouter des flux de réseaux sociaux à votre site est d’utiliser Smash Balloon. C’est la meilleure extension de flux de médias sociaux pour WordPress et vous permet d’intégrer des flux directs de Twitter, Instagram, Facebook, et plus encore.
En savoir plus, veuillez consulter notre tutoriel WordPress sur l’ajout de flux de réseaux sociaux sur WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des icônes de médias sociaux aux menus de WordPress. Vous pouvez également consulter notre article sur la création d’un menu déroulant sur WordPress et notre guide ultime sur l’ajout d’une barre de recherche à votre menu de navigation.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Jiří Vaněk
The Menu Image plugin is fantastic. I actually wrote an article about it when I was dealing with the exact same issue. Creating a main ‘Contact’ folder in the menu and adding a submenu with links to social networks along with icons—it works like magic. Previously, I used Font Awesome, and it was quite impractical. This is a much more elegant solution.
Ralph
As I love your article tutorials this time I only watched video and it was great! Short, no fluff and straight to the point. You guys should include more video tutorials. You are great at it and now I have new icons in my menu (not only for my socials). Thanks a lot!
Jonas
Thanks for this article, it helped me a lot!
WPBeginner Support
Glad our article was helpful!
Administrateur
Farhad
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support
There are a few different options for that, you would want to start by taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Administrateur
Jimmy Ekisa
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam
How to show icons of social profiles in footer?
WPBeginner Support
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administrateur
Kerry
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support
You would have the menu items be custom URLs
Administrateur
Vicki
Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?
WPBeginner Support
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
Administrateur
Danielle
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support
We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.
Administrateur
Lisa Jackson
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support
It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.
Administrateur
andi moss
What? No icons? Find our own?
WPBeginner Support
We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.
Administrateur
Bob Wright
Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).
WPBeginner Support
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrateur
Ankit
Hi,
Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?
WPBeginner Support
Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.
Administrateur
Jonathan
I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!
WPBeginner Support
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administrateur
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
Administrateur
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
Administrateur
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
Administrateur
Debbie Serjeant
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Administrateur
Isaac
Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you
WPBeginner Support
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrateur
Sam Simson
I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.
WPBeginner Support
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Administrateur
Tracy
Hi! I tried using this method but I didn’t get the « select image » part. I only get to introduce the URL and Navigation Label… any ideas?
WPBeginner Support
You may want to ensure the plugin was fully installed and activated for the select image to appear
Administrateur
Lea
Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?
WPBeginner Support
You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.
Administrateur
Larry Hilton
I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions
WPBeginner Support
Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added
Administrateur
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
Administrateur
Muneeb
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support
If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.
Administrateur
Mr. Debtsmith
Hi guys,
Installed the plug in. Added 3 social accounts and clicked « Main Nav » location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.
Thanks!
WPBeginner Support
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
Administrateur
ARPIT
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support
Glad our article could be helpful to you.
Administrateur
Dan
My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?
WPBeginner Support
Hi Dan,
It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.
Administrateur
David Cornish
Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?
WPBeginner Support
Hi David,
Please see our list of the best social media plugins for WordPress.
Administrateur
Rob Lilley
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff
Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the « Screen Options » tab on the top right of the screen and make sure that « Link Target » option is checked.
Administrateur
Umarbhatti
Hi,
This plugin looks awesome. Thanks!
Aman Singh
Hello,
Can I get the custom code for the widget to look similar to what it is on WPbeginner?
I like the widget look for social media icons on WPBeginner so can I get the code.
Thank you.
WPBeginner Support
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Administrateur