La plupart des blogs affichent des icônes de réseaux sociaux pour promouvoir leurs profils sociaux. Je vais aujourd'hui vous expliquer comment faire sur WordPress.
Vous pourrez installer ces icônes dans la sidebar de votre blog (c'est-à-dire la colonne qui se trouve sur le côté de vos articles) ou à un autre endroit si votre thème le permet. C'est parti !
Choisir des icônes de réseaux sociaux
Si vous vous sentez l'âme d'un graphiste, vous pouvez bien sûr créer vos propres icônes... mais si ce n'est pas le cas, il existe une solution beaucoup plus facile : télécharger des icônes existantes !
Voici quelques liens vers des sources d'icônes intéressantes :
- Un pack d'icônes rondes à télécharger sur Deviant Art (le lien « Download » se trouve dans la colonne de droite, en haut).
- Un pack d'icônes rondes plus grandes que vous pouvez redimensionner à la taille nécessaire.
- Un pack d'icônes carrées (à télécharger en cliquant sur « Click to download »).
Ces icônes sont toutes gratuites et utilisables sur votre blog. Vous trouverez bien d'autres modèles d'icônes de réseaux sociaux via Google Images mais pensez toujours à vérifier qu'elles sont libres de droits !
Après avoir téléchargé le fichier, dézippez-le (avec WinRar sur PC par exemple, avec un double clic dessus sur Mac). Vous allez obtenir une multitude d'icônes au format .png. Si vous les modifiez ou que vous les redimensionnez, pensez à garder ce même format .png : il sait gérer les fonds transparents là où un format comme le .jpg vous affichera par défaut un fond blanc, ce qui n'est pas toujours esthétique sur votre blog.
Choisissez les icônes dont vous avez besoin. Je vais vous montrer un exemple en créant des liens vers les réseaux sociaux Twitter, YouTube et Pinterest mais vous pourrez bien sûr ajuster le tuto selon vos besoins ! Vos icônes doivent être de la même taille pour que ce soit joli. Si nécessaire, commencez par les renommer en minuscules et sans espace avec le nom du réseau social :
Uploader ses icônes de réseaux sociaux sur WordPress
Maintenant que nos icônes sont prêtes, nous allons les mettre en ligne sur WordPress. Pour les débutants, la méthode la plus simple consiste à créer un nouvel article (menu Articles > Ajouter). Cliquez ensuite sur Ajouter un média puis sur "Sélectionner des fichiers". Vous pouvez ensuite choisir les icônes de réseaux sociaux que vous avez créées.
Avant de valider, vous devez vous intéresser à la zone située à droite de l'écran. Pour chacune des icônes, vous devez :
- Compléter à droite les champs "Titre" et "Texte alternatif" : c'est important d'avoir ce réflexe pour le référencement des images mais aussi pour les lecteurs malvoyants (ils utilisent des lecteurs d'écran capables de leur lire cette description). Exemple pour YouTube :
- Dans la zone "Réglages de l’affichage du fichier attaché", réglez l'alignement sur "Aucun", choisissez "Lier à - Lien personnalisé" et entrez le lien de votre compte sur le réseau social concerné. Exemple pour YouTube :
Une fois que c'est fait, cliquez sur "Insérer dans l'article". Là, vous pouvez réorganiser vos images dans l'ordre souhaité.
Si vous utilisez la plateforme WordPress.com et que vous ne voyez pas la partie "Détails du fichier attaché" ou "Réglages de l'affichage du fichier attaché", vérifiez que vous utilisez l'administration complète de votre blog, accessible en tapant /wp-admin/ à la fin de l'adresse du blog.
Afficher les boutons de réseaux sociaux sur WordPress
Pour afficher ces boutons de réseaux sociaux à l'endroit souhaité, nous devons copier le code qui permet de les afficher. Pas de panique, c'est un simple copier-coller ! Toujours sur la page de rédaction d'un article, vous allez cliquer sur l'onglet "Texte" (à côté de l'onglet "Visuel").
Du code s'affiche, pas de panique :) C'est grâce à ce langage mystérieux, le HTML, que l'ordinateur comprend qu'il doit afficher de jolies icônes de réseaux sociaux avec un lien dessus ! Sélectionnez le code et copiez-le.
Ensuite, nous allons nous rendre dans la rubrique Apparence > Widgets du blog. Vous pouvez l'ouvrir dans un nouvel onglet.
Avec certains thèmes WordPress, vous n'aurez ici qu'une seule possibilité : mettre vos icônes dans la sidebar du blog.
Avec d'autres thèmes, vous aurez parfois plusieurs possibilités : certains thèmes permettent d'installer des widgets dans le footer (= en bas du site), dans le header (= tout en haut du site) ou ailleurs !
A vous de choisir où vous avez envie d'afficher vos icônes. Je vais prendre le cas le plus classique : on a envie d'afficher ses icônes dans la colonne latérale (sidebar) du blog.
Sur la gauche, vous avez une liste des widgets disponibles. Choisissez le widget "HTML Personnalisé" et faites-le glisser vers la zone de droite qui s'appelle "Colonne latérale" ou sidebar.
Ensuite, vous pouvez lui donner un titre ou pas, comme vous voulez ! Copiez dans la zone sous le titre le code que l'on a récupéré à la deuxième étape. Ça devrait ressembler à l'image ci-dessous, avec l'adresse de vos propres réseaux sociaux bien sûr !
Vous n'avez plus qu'à cliquer sur "Enregistrer"... et hop, nos boutons de réseaux sociaux sont bien affichés !
Vous pouvez ensuite supprimer le brouillon d'article que vous aviez créé pour insérer les icônes. Les icônes ne disparaîtront pas car elles sont sauvegardées dans votre bibliothèque de médias sur WordPress même si vous supprimez l'article.
Ouvrir les liens dans une nouvelle fenêtre
Si vous souhaitez que les liens s'ouvrent dans une nouvelle fenêtre, vous pouvez ajouter target="_blank" dans le code de chaque lien, comme ceci :
<a href="http://www.twitter.com" target="_blank"></a>
Ce tutoriel fonctionne aussi bien sur WordPress (plateforme gratuite) que sur WordPress.org (blog auto-hébergé). J'espère qu'il vous aidera ! N'hésitez pas aussi à regarder mon tutoriel pour installer Font Awesome sur un blog : c'est une police d'icônes qui vous donne accès à une multitude d'icônes que vous pouvez utiliser dans vos contenus ou dans votre design.
Bonjour, je ne sais pas comment ça se fait mais je suis bloquée à l’étape « Réglages de l’affichage du fichier attaché », je en trouve pas où cela se trouve. Est-ce au moment de téléverser l’image ou dans les paramètres du bloc dans le corps de l’article ?
Bonjour, sur l’éditeur Gutenberg il faut d’abord insérer l’image, puis la survoler avec la souris ce qui fait apparaître le symbole du lien (une « chaîne »), puis entrer le lien de son choix en cochant « Ouvrir dans un nouvel onglet ».
Un million de fois merci !!
De rien Chloé ! Contente d’avoir pu aider ;)
Bonjour Marlène,
Je suis bloquée dès le début du tuto… En effet, vous spécifiez qu’il faut garder les images sous format PNG (ce que je fais) cependant quand je créé un article pour y ajouter les icônes un message apparaît « Désolé ce type de fichier n’est pas autorisé pour des raisons de sécurité ». Cela vient-il de mon thème ? J’utilise Kale.
Merci beaucoup,
Clémentine
Hello Clémentine, les PNG ne posent pas de problème de sécurité et font partie des formats autorisés par défaut sur WordPress. Je te conseille donc de vérifier s’il n’y a pas d’erreur dans l’extension du fichier et, si le fichier est bien en « png », de contacter ton hébergeur pour voir pourquoi ça bloque.
Bonjour,
Tout d’abord, merci beaucoup pour ce tuto détaillé.
J’ai suivi les étapes et j’ai réussi a faire afficher les icones sur chacun des articles. Mon souci est que les icônes renvoient vers les réseaux sociaux, mais sans partager l’article.. ca m’ouvre Facebook ou autre réseau, mai spas de proposition pour partager..
Auriez-vous une idée SVP ?
Merci par avance.
Hello, c’est normal, ce tuto permet d’afficher des icônes, pas des boutons de partage ;) Pour les boutons de partage, il existe plein de plugins pour ajouter cette fonctionnalité, j’utilise Kiwi Social Share pour ma part.
Bonjour !
Super article, je n’ai eu aucun mal à créer ce widget !
J’essaie de mettre des icônes pour le menu des liens sociaux (tout tout en haut de la page), mais pour une raison que j’ignore, seul l’icône d’instagram s’affiche (de manière automatique d’ailleurs)… auriez-vous une idée de comment régler le problème ?
Merci !
Hello Axelle, tu as l’air d’utiliser FontAwesome pour afficher les icônes, c’est ce que je vois dans le code du blog. Soit les icônes sont manquantes dans la librairie FontAwesome que tu charges, soit le code que tu mets dans ta feuille de style n’est pas le bon et ne correspond pas à la bonne icône.
Bonsoir,
Oui j’ai installé FontAwesome. Ce que je ne comprend pas, c’est que l’icône Pinterest apparaît sans soucis dans la boîte de présentation de l’auteur, mais pas dans le menu des liens… et encore, c’est comme si l’icône y était, mais qu’elle était invisible (espace à côté de l’icône Instagram) :/
Bonsoir !
Juste pour annoncer que j’ai finalement réussi à mettre les icônes !
Je ne suis pas totalement sûre comment j’ai fait parce que j’ai testé pas mal de trucs, mais bon, c’est le résultat final qui compte XD
Merci encore pour cet article et pour tes conseils !
Enfin… ça faisait plus qu’un an que je devais faire cette tâche dans mon to-do-list au boulot. C’est finalement réglé.
Check!!
Bien joué ;) Parfois, ce type de tâche n’est pas très long mais on procrastine un peu !
Merci, merci pour ce tuto très clair, instructif, efficace !
De rien ;)
Bonjour,
Merci beaucoup pour votre article. J’ai suivi le pas à pas et j’ai réussi à installer les icônes :-)
Maintenant, je souhaite afficher les boutons de partage pour chaque article. Savez-vous m’aider ? j’utilise le thème « Lucienne ». Merci par avance.
Bonjour Martin, il existe pas mal de plugins gratuits pour intégrer des boutons de partage à WordPress.
Merci pour ce tutoriel ! Néanmoins, j’ai des soucis pour intégrer la ligne de code target= »_blank ». En effet, je n’arrive pas à la positionner correctement.
Quel est le problème exact ? Car je donne un exemple dans l’article.
Je vous ai répondu, mais commentaire n’apparaît pas. Désolé pour ce nouveau message, il s’agit d’un test, afin de vérifier si je ne me suis pas précédemment trompé.
Mon message n’a donc pas été pris en compte. -_-
Je vais vous réexpliquer mon problème : quand je rentre le code, j’ai un / avant le > <a / rel= »nofollow »> que vous n’avez pas dans votre exemple. Quand je le place entre le / et le >, j’ai un message d’erreur et quand je le place avant le /, il ne se passe rien.
Bonjour Guillaume, le code est filtré dans les commentaires ;)
Ce n’est pas normal qu’il y ait un slash dans la partie « a href ». Vous confondez peut-être en essayant de copier le target= »_blank » dans la partie « img src » qui, elle, se termine par /> ?
En effet, j’avais inclus la ligne de code dans celle de l’image, quelle nouille ! xD Merci beaucoup pour votre aide.
Bonjour,
Merci beaucoup pour votre aide
J’ai enfin réussi à mettre tous les icônes que je voulais
super facile bien expliqué
Merci et bien joué pour les icônes !
Merci beaucoup pour cette aide.
J’ai réussi à mettre l’ icone dans la première page de mon site.
Tout est clair avec des copies d’écrans: le Top ! Bravo
Merci encore
Merci Marie-Danielle, contente d’avoir pu donner un coup de pouce ;)
Merci pour le plugin. J’ai créé mes propres boutons de réseaux sociaux et j’aimerais les mettre dans le html de mon thème. Qu’ils apparaissent sur le côté gauche. Mais je ne sais pas où les placer dans le code. Est-ce que c’est possible? J’ai pas envie de tout casser.
Hello, j’explique comment faire dans l’article :) Tu peux tout à fait suivre le tuto en utilisant les boutons que tu as créés.
Mille mercis, votre article m’a été d’une grande aide ! <3
Tant mieux, merci pour le message !
Bonjour Marlène
Juste pour dire merci, ce tuto est top. Je viens de l’appliquer à mon site et ça fonctionne.
Bravo ;)
Super ! Merci pour ces conseils !!!
Merci à toi pour le message ! Bon week-end :)
Super article, exactement ce que je voulais. Merci beaucoup !
Merci à toi pour le petit message !
Salut Marlène ! Excellent ton article. Merci de m’avoir aidé. À bientôt.
Merci à toi pour ton message !
Bonsoir, je viens de lire ton article, seulement impossible de trouver la zone » Réglages de l’affichage du fichier attaché », je ne sais pas si la version de wordpress a été modifiée depuis l’écriture de ton article, mais je ne trouve aucun moyen de relier l’image à un lien personnalisé
Hello Marie, cette partie existe toujours. Si tu utilises WordPress.com, vérifie que tu es bien sur la bonne administration (nom de ton blog suivi de /wp-admin/). Sinon tu as une version très allégée de WordPress, qui, me semble-t-il, n’a pas toutes les options…
Chère Marlène, un tout grand merci pour ce tuto. Détaillé, didactique, précis, facile. Que demander de mieux ;-)
Merci Roberto !
Merci pour cette information très bien expliquée. Je cherche cette information depuis longtemps.
Merci infiniment, ce tutoriel va m’aider à faire connaître mon site. TNKS A LOT.
Contente que ça puisse t’aider !
Salut! Ton tuto est vraiment bien! :) J’ai suivi toutes les étapes mais ça ne fonctionne pas… Je crois que c’est vers la fin qu’il y a un problème: dans mon cas, sur la page des widgets je n’ai pas «colonne latérale» seulement default sidebar et default footer. Je veux que mon icône s’affiche en haut complètement de ma page à droite. Est-ce qu’il me manque une étape?
Merci à l’avance!
Hello Cathy, chaque thème est conçu différemment. Chez toi, la sidebar s’appelle sans doute « default sidebar » donc il suffit de mettre le widget à cet endroit. Si tu souhaites mettre le widget ailleurs et que ce n’est pas prévu par ton thème, il faut créer un nouvel emplacement de widget mais ça implique de mettre les mains dans le code.
Je voudrais savoir où se trouve la zone « réglages de l’affichage du fichier partagé ». Merci pour ce magnifique tuto.
Elle est juste sous l’endroit où on entre la description de l’image (sous la partie « Détails du fichier attaché »).
Oui j ai trouvé merci beaucoup, j ai réussi toutes les étapes… Bonne continuation et encore merci pour ce partage.
Hello Marlène,
Dans le cas d’un bouton de flux RSS (au lieu d’une icone de réseau social), quel est le lien à mettre dans les « réglages du fichier joint/ lien personnalisé » ? Tu me diras sans doute : celui de ton flux RSS. Mais lorsque j’ai tapé le nom de site/feed/, je tombe sur une extension de Chrome : chrome-extension://nlbjncdgjeocebhnmkbbbdekmmmcbfjd/subscribe.html?http%3A%2F%2Ftropgentillefille.com%2Ffeed%2F et je doute qu’il s’agisse de ce vers où je doive rediriger les lecteurs.
Je ne sais pas si c’est très clair. Merci pour ta réponse, en tous cas.
Hello, quand je vais sur tropgentille.com/feed/ je vois bien ton flux RSS pour ma part, que ce soit sur Chrome ou sur Firefox :)
Bonjour et mrci pour ce tuto. J’ai suivi toute la marche à suivre, pour mon précédent site cela fonctionnait parfaitement mais là, bien que le bouton s’affiche dans la zone centrale de mon footer comme je le souhaitais, lorsque je clique dessus ça rame indéfiniment, en revanche si je fais « ouvrir le lien dans un nouvel onglet » cela fonctionne. Auriez-vous une idée de l’erreur que j’ai pu commettre ? Merci par avance et bonne année !
Bonjour Emmanuelle, je ne vois pas d’explication logique car si le lien est fonctionnel dans un nouvel onglet, il n’y a aucune raison pour qu’il ne le soit pas dans le même onglet. En tout cas, je doute que le problème vienne du code lui-même. Souvent c’est plutôt l’inverse qui se produit (navigateur qui rame un peu à ouvrir un nouvel onglet).
Coucou ! Merci pour cet article très intéressant. J’ai essayé de faire la démarche mais il y a eu récemment une maj de wordpress et maintenant il est impossible de changer l’adresse web d’une photo donc la méthode ne fonctionne pas :/ Sauriez-vous comment je pourrais faire ? Merci d’avance :)
Bonjour Maelle, je ne comprends pas ta question car à aucun moment du tuto il ne faut changer l’adresse web d’une photo :-/ Tu peux m’en dire plus ?
Après avoir modifier le titre et le texte alternatif, il faut gérer l’alignement puis mettre un lien personnalisé qui est à mon avis le lien vers notre réseau social. Cependant avec la maj wordpress ce n’est plus possible gérer l’alignement ou d’ajouter un lien personnalisé donc avec mon lien html je pourrais seulement avoir les icônes d’affichés mais on ne pourra pas accéder à mes réseaux sociaux en cliquant dessus :/
Bonjour Maëlle, je viens d’aller voir sur WordPress.com et l’option est toujours disponible donc tu ne dois pas être au même endroit que dans mon tutoriel. Est-ce que tu écris ton article en passant par le tableau de bord complet de WordPress (en entrant /wp-admin/ après le nom de ton blog pour accéder à l’administration) ? Est-ce que tu ajoutes une image en cliquant sur le bouton « Ajouter un média » (et pas « Mettre une image à la Une », auquel cas il est normal que l’option n’apparaisse pas) ?
J’étais partie dans le menu qui s’affiche directement en cliquant sur « mon site » mais en entrant wp admin j’ai trouvé le bon menu et j’ai réussis la manœuvre :) Merci beaucoup pour ce tuto bien expliqué ! Je suis contente du rendu :)
Je me rends compte au fil de mes articles qu’en fait, beaucoup de blogueurs sur WordPress.com n’utilisent pas du tout ce menu et certains ne savent pas qu’il existe. Je devrais sans doute le préciser dans les tutoriels, j’essaierai d’y penser à l’avenir !
Bonjour Marlène,
Je vous remercie de votre grande générosité! J’ai réussi sans difficulté!
Je suis à refaire mon site sur la plate-forme WordPress. Pour le icône des réseaux, mon template permet aussi de les placer dans le header, mais au moyen d’un Costum Class.
Pourriez-vous me transmettre une ressource qui me permettrait (sans trop de temps d’apprentissage) d’en faire un?
Merci!
Louise
Bonjour Louise, si c’est une « custom class », c’est simplement du code CSS… C’est un langage qui permet de gérer la mise en forme d’un site, il y a des sites entiers qui lui sont dédiés, comme CSS Débutant. Mais avec du CSS seul, je doute qu’on puisse créer des icônes cliquables, il doit y avoir un autre élément à mettre en place. Il ne faut pas hésiter à poser la question au créateur du thème ou à consulter la documentation si elle existe, en général ce type de personnalisation est bien expliqué dedans.
Merci Mylène!
Hello,
Bah crotte alors chez moi ça ne fonctionne pas … j’ai réussi à mettre mes icônes, mais impossible de faire ne sorte qu’elles s’ouvre dans une autre fenêtre, est c’est très embêtant …
Une idée ?
Hello, c’est simple, il suffit d’ajouter
target="_blank"à l’intérieur du lien :)Par exemple, ton icône Instagram se présente actuellement comme ça dans le code :
<a href="https://www.instagram.com/aiove.fr/"><i class="social_icon fa"><span>Instagram</span></i></a>Il faut écrire ça à la place :
<a href="https://www.instagram.com/aiove.fr/" target="_blank"><i class="social_icon fa"><span>Instagram</span></i></a>SIMPLISSIME, brillantissime, practissime … l’esprit WP (que je n’ai pas !) , l’intelligence même.
Merci beaucoup, je reviendrais
Mais l’esprit WP existe-t-il, telle est la question ;) Bravo pour la réussite !
Merci pour tes tutos super clairs.
Pourtant je ne comprends pas ce qui se passe, quand je clique sur mes icônes, je tombe sur :
Ce site est inaccessible/ »Impossible de trouver l’adresse DNS du serveur https. »
Hello, il y a des erreurs sur certains de tes liens. Par exemple, ton lien vers Pinterest ressemble à ça :
https://www.pinterest.com/https://fr.pinterest.com/Tgentillefille/pins//. Il y a deux fois la partie « https » dedans et un slash en trop à la fin. Le bon lien serait plutôt :https://fr.pinterest.com/Tgentillefille/pins/C’est le même problème pour Google+, il y a un bout en trop :) Si tu corriges ça, ça devrait fonctionner !
Merci beaucoup Marlène d’avoir pris la peine de regarder.
J’ai modifié mais sans succès, p-ê cela se situe-t-il ailleurs. Car il y a ce problème là mais il y en a un autre, auquel je ne comprends rien du tout : lorsque je vais dans le back office, on me signale un problème : « JQMIGRATE: Migrate is installed, version 1.4.0/ Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/. »
On me donne aussi une autre info: http://s0.wp.com/wp-includes/js/jquery/jquery.js?ver=20151215
Bref, du Parfait chinois pour une débutante que je suis. Ça me déprime un peu ce genre de probl car je ne sais absolument pas quoi faire. Aurais-tu une piste à me conseiller? ET sinon, as-tu une idée de où m’adresser pour essayer de résoudre cette énigme de Sphinx ?
Bonne journée !
mistigriffe
Ça ressemble plus à un message d’information qu’à un message d’erreur. Parfois, certaines mises à jour de plugins affichent ce genre de message, il suffit de cliquer sur la croix qu’ils comportent pour les effacer :)
Merci pour ce tuto ! Je n’ai même pas stressé :-D
Tant mieux ! Je vois qu’actuellement, tu as mis chaque icône dans un gadget différent, si tu veux les aligner horizontalement il faut toutes les mettre dans le même gadget ;)
Ce tuto est top ! Merci beaucoup ;)
De rien ! Bonne soirée :)
Bonsoir !
J’ai crée mon blog récemment, je débute dans ce domaine et je vous avoues que je ne suis pas une flèche !
Du coup, j’ai bien lu votre article, qui explique très bien mais je suis bloquée à une étape…
Je ne sais pas si j’ai une version différente de WordPress (j’ai pourtant pris le WordPress le plus récent et qui s’affiche en première position sur Google..) mais je n’ai pas la partie « Réglages de l’affichage du fichier attaché »
Voici ce que j’obtiens lorsque je suis les réglages de mon fichier: http://imgur.com/CwfJ8jC
J’espère que vous comprenez mon petit soucis
Merci d’avance !
Hello, je pense juste que vous passez par la version « incomplète » de l’administration de WordPress. Si vous passez par la véritable administration, vous devriez avoir le même affichage que dans mon article :)
Ah d’accord merci beaucoup ! Mais comment on accède a cette véritable administration depuis le site ?
Il suffit de cliquer sur « Tableau de bord » dans le menu de gauche, tout en bas :)
C’est étrange, je n’ai aucune mention du tableau de bord dans ce menu de gauche…J’ai beau fouiller le site de fond en comble, je ne le trouve pas du tout :/
Merci quand même de m’avoir éclairé !
Il y a quoi alors dans le menu de gauche ? On ne doit pas parler de la même page parce que WordPress.com est le même pour tout le monde ;)
C’est le menu où l’on trouve Articles, Pages, Thèmes, Menus, Partage, Personnes, Extensions, etc. En bas, il y a un lien « Tableau de bord ».
Bonjour!
Votre article est très bien expliqué mais je bloque sur une des étapes.
Je n’arrive pas à trouver la zone « Réglages de l’affichage du fichier attaché », j’ai beau cherché, je ne la voie pas…
Pouvez-vous m’aider?
Merci par avance.
Bonjour, quand on clique sur le bouton « Ajouter un média » de WordPress et qu’on uploade une image, ça se trouve dans la colonne de droite.
Bonjour, je suis sur la plateforme WordPress gratuit, est ce que ce tuto fonctionne également? Je ne trouve pas comment mettre le lien sur l’image… merci
Bonjour, oui, le tuto devrait fonctionner sans problème sur WordPress.com. Le lien sur l’image se met via la partie « Réglages de l’affichage du fichier attaché » (c’est expliqué dans le tuto).
Vraiment merci ! Grâce à toi j’ai pu régler pleins de choses sur mon blog que j’ai enfin officiellement lancé hier :D Merci merci merci !!!!!
Passez faire un tour si vous kiffez la mode et les sneakers ! Il ne serait rien sans tes supers conseils :)
Bravo ! Le rendu est très sympa :) Bienvenue dans la blogosphère !
Bonjour,
Je n’ai pas réussi à trouver l’endroit où il y avait les widgets ? Peut être cela vient il de mon thème, je n’en sais rien. C’est étrange.
La Vraie Personne !
La Vraie Personne !
En principe, quand tu es connecté(e) à ton administration WordPress, tu trouves les widgets dans le menu Apparence > Widgets. Si tu n’as pas la possibilité d’ajouter des widgets à cet endroit, ça peut effectivement signifier que ton thème ne prévoit aucun emplacement pour ça.
Coucou, j’ai réussi pour Twitter et Facebook ! Mais tu n’aurais pas une icône pour Livraddict? (Petit rond??).
Et, je voulais te demander, pour le référencement, c’est dans « Mots clés » qu’il faut mettre quelques chose?
Et on va jusqu’à quel point? Le titre du livre, plus tout les mots séparés, plus l’auteur, plus le nom et le prénom séparés???
La Vraie Personne !
La Vraie Personne !
Hello, tu peux récupérer ton logo Apple Touch et en faire un rond, non ?
Je ne suis pas sûre de bien comprendre ta question sur les mots clés, en quoi est-ce lié aux icônes ? Tu veux mettre des mots clés sur des icônes ?
Bonjour,
Merci pour votre article.
J’ai bien télécharger les icones sur mon site mais je ne trouve pas la zone « Réglages de l’affichage du fichier attaché » je n’ai que détails des Fichiers attaché, je ne comprends pas pourquoi, pouvez vous m’aider ? je peux vous envoyer une capture écran si vous le souhaitez !
Merci !
La Vraie Personne !
La Vraie Personne !
Bonjour, cette zone est en principe située juste sous la zone « Détails du fichier attaché », dans la même colonne. Il faut parfois scroller pour la voir.
Super. Je ne savais pas que c’était si simple. Et votre explication est très claire. Merci
La Vraie Personne !
La Vraie Personne !
Merci d’avoir pris le temps de laisser un petit commentaire :)
Bonjour,
Tout d’abord merci pour ce tuto, voilà longtemps que je voulais ajouter des boutons de réseaux sociaux à mon blog, sans savoir comment faire ! J’ai juste une petite question : mes boutons sociaux se sont bien affichés sur mon blog, mais au lieu de se suivre horizontalement (comme sur ta capture d’écran), ils se suivent verticalement, comme si j’avais fait un saut à la ligne entre chaque bouton (pourtant mon texte HTML est bien sans interruption).
Aurais-tu une solution ?
Merci d’avance
La Vraie Personne !
La Vraie Personne !
Hello, je viens d’aller jeter un œil et on dirait que dans ton code, tu es revenue à la ligne après chaque </a>, du coup WordPress place les icônes les unes sous les autres. Il suffit de retirer ces sauts de ligne dans ton widget (rubrique Apparence > Widgets) pour que ça fonctionne.
Coucou,
Apparemment il n’y a pas de sauts de ligne… Voici mon code :
J’ai essayé de recommencer l’importation des images dans mon brouillon, et de copier le « nouveau » code ainsi généré, et toujours pas de résultat…
Merci pour ton aide !
La Vraie Personne !
La Vraie Personne !
Quand j’affiche ton code il se met comme ça :
Je pense que ce saut de ligne est ajouté par le code de ton thème. Je vais essayer de rendre l’explication simple même si ce n’est pas évident à expliquer :) En gros, les images de ton widget n’ont pas d’alignement par défaut (= elles ne sont alignées ni à droite, ni à gauche). La mention « alignnone » apparaît dans le code de l’image pour le signaler.
Or, ton thème ordonne à toutes les images comportant cet attribut « alignnone » de s’afficher en « display:block ». Un bout de code qui équivaut à dire à l’image : « Occupe toute la largeur disponible et met un saut de ligne après ». Donc ton image est automatiquement toute seule sur sa ligne et suivie d’un saut de ligne.
Pour changer ça, il faudrait :
– soit retirer le mot « alignnone » du code de ton widget. Tes images vont alors être collées l’une à l’autre, pour créer un espace entre chacune tu dois ajouter après chaque </a> sauf le dernier.
– soit modifier les paramètres à l’échelle de ton thème entier, dans le fichier style.css… mais ça aura des conséquences à d’autres endroits de ton site et sans étudier ton code dans le détail, je ne peux pas te dire lesquelles.
Ça y est, j’ai réussi, tout est parfait ! Merci encore mille fois pour ton aide, et à bientôt !
Bonjour,
Je te pris de m’excuser mais je n’y parviens pas, rien ne s’affiche sur mon blog après avoir effectué ta démarche…
La Vraie Personne !
La Vraie Personne !
Bonjour, sans l’adresse du blog en question et une description un peu plus précise du problème, je ne peux malheureusement pas t’aider davantage. N’hésite pas à m’en dire plus !
Salut ! Oui c’est vrai que je n’ai pas été aidante.
Il s’agit de ce blog : http://www.metalobil.fr/
Lorsque je fais l’opération sur les widgets, je clique sur enregistrer mais rien n’apparait sur le site.
Je ne sais pas quelles informations supplémentaires pourraient t’éclairer
Merci de te soucier de tes lecteurs, c’est sympa
La Vraie Personne !
La Vraie Personne !
L’emplacement où tu ajoutes les widgets est-il censé apparaître sur le site ? Par exemple, si tu les ajoutes dans une sidebar mais que ton blog est en configuration « pleine page » sans sidebar, on ne verra pas les widgets.
Bien vu !
Problématique résolue
Merci encore
Merci ton article m’a beaucoup aidé ! :)
La Vraie Personne !
La Vraie Personne !
Super, merci pour le petit message :)
Merci merci merci ! Milles mercis ! J’ai enfin réussis !!
La Vraie Personne !
La Vraie Personne !
Hé hé je vois ça, c’est cool que ça fonctionne :) Bravo !
Hello! Merci pour ce super tuto.
Par contre je voudrais ouvrir les liens dans une autre fenêtre, je tente ta technique mais ça ne fonctionne pas…
Peut-être que je ne place pas target= »_blank » au bon endroit, mais dans ce cas je ne sais pas où le mettre exactement.
Si tu peux m’éclairer ;)
Merci!
La Vraie Personne !
La Vraie Personne !
Il doit s’écrire sous cette forme :
<a href="https://www.notuxedo.com" title="No Tuxedo" target="_blank">(Image de l'icône)</a>Le « target » peut être placé n’importe où tant qu’il se trouve dans la première partie. On peut par exemple écrire<a href="https://www.notuxedo.com" target="_blank" title="No Tuxedo">, ça marchera aussi.Merci pour ta réponse. J’avais déjà activé le bouton Pin It mais en choisissant « texte seulement » et cette config n’affichait pas le bouton au survol des images, maintenant avec « bouton officiel » ça marche. Par contre, pour info, si dans « afficher les boutons sur » tu choisis « les pages d’accueil, d’archive et résultat de recherche » en plus de « articles », le bouton marche sur tout le blog.
La Vraie Personne !
La Vraie Personne !
Merci de la précision, ça pourra sûrement servir à d’autres personnes !
Très utile pour débuter. Mais maintenant que je sais le faire, je n’arrive pas avec cette méthode à créer le bouton « Pin It » pour qu’un lecteur épingle une image de mon blog. Plus exactement, j’arrive très bien à créer le bouton mais lorsque le clique sur le bouton créer, je me retrouve sur Pinterest alors que ce que je veux c’est ouvrir la page « choisissez une image à épingler ». J’ai essayé plusieurs méthodes, la journée d’hier et une bonne partie de la nuit….Je crois que je vais abdiquer! Je précise que je suis sur « WordPress.com », il existe un lien de ce type mais qui s’affiche en bas de page. J’ai essayé de rentrer dans le code (bon, je n’y connais rien mais je sais faire un copier/coller!) mais je n’arrive pas à le modifier….Enfin, je veux avoir la main, je veux customiser le bouton (il y en a plein sur la toile) et je veux choisir sa position! Merci pour votre aide.
La Vraie Personne !
La Vraie Personne !
Sur WordPress.com à ma connaissance il n’y a qu’une technique pour y arriver. Va sur ce lien : boutons de partage WordPress, ça devrait te conduire sur la page de paramétrage des boutons de partage WordPress de ton blog. Clique sur « Modifier les boutons de partage », ajoute Pinterest et en bas, choisis « Boutons officiels » dans la partie « Style de bouton ». Ca t’affichera le bouton Pin it au survol des photos mais seulement quand tu es en vue « article » (pas sur la page d’accueil de ton blog par exemple). Je viens de tester, ça fonctionne !
En effet, WP a vraiment beaucoup d’avantages dans la version en .org (je en sais plus comment tu la nommes).
J’avoue apprendre bien plus avec ton blog qu’en formation mais chut …
Rien à voir avec cet article mais je tente : pourrais-tu me dire comment modifier la largeur de la page (dans l’éditeur de code).
Merci par avance !!!
La Vraie Personne !
La Vraie Personne !
Hé hé merci :) Je devrais me lancer dans la formation ! Heureusement que tu as trouvé la solution à ta question seule parce que je n’aurais pas pu te répondre : chaque thème est codé différemment. Sur le principe, c’est assez simple, il faut trouver le nom du « conteneur » de la page, la balise qui englobe toute la partie dont on veut modifier la largeur et lui attribuer une « width » dans le fichier CSS du thème. Mais le conteneur change de nom d’un thème à l’autre selon l’inspiration du développeur :)
Il faut aussi penser au côté « responsive design », c’est-à-dire à personnaliser les largeurs selon la résolution de l’écran, modifier les largeurs qui découlent de la largeur principale (ex : si la page devient plus large, il faudra aussi élargir le footer, la sidebar et/ou la colonne de gauche par exemple).
Bonjour et merci pour cet article très clair et très utile !
J’ai bien suivi les indications mais les 2 icônes que je souhaite ajouter (Facebook et Twitter) apparaissent l’une après l’autre comme si il y avait un saut de page.
Existe t il une explication et une solution ;) ?
J’ai trouvé la solution : Simplement cocher la case alignement à gauche ou a droite. ;)
Merci
La Vraie Personne !
La Vraie Personne !
Ce n’est pas utile de faire ça :) Le fait que les images s’affichent l’une au-dessus de l’autre dans ton éditeur n’a pas d’importance car ces sauts de ligne n’apparaissent pas dans le code : une fois copié-collé dans un widget, le code affichera bien à l’écran des images alignées horizontalement.
Merci beaucoup
Grace à toi je viens d’insérer le lien Facebook à mon blog :)
Demain j’enchainerai avec tweeter.
La Vraie Personne !
La Vraie Personne !
Top ! Je vais ajouter une précision dans l’article car je vois que j’ai oublié de le faire… pour ceux qui veulent que les liens s’ouvrent dans un nouvel onglet ! Ça peut être pratique :)
Je garde ça sous le coude quand j’aurai un peu de temps. J’aime ces explications claires! Merci Lou
La Vraie Personne !
La Vraie Personne !
Merci Marie ! N’hésite pas à revenir poser des questions s’il y a des étapes pas claires :)
Ah MERCI ! Je me demandais comment faire depuis un moment déjà ! Il me reste plus qu’à faire tout ça :)
La Vraie Personne !
La Vraie Personne !
Tu me diras si tu t’en sors :)
Je connaissais déjà le « truc » mais c’est toujours utile ! Je me suis même amusée à personnaliser mes propres boutons (bons même si pour le coup ils sont pas super originaux).
La Vraie Personne !
La Vraie Personne !
Une fois qu’on a compris le principe on peut aussi s’en servir pour d’autres choses (ex : faire un « joli lien » vers un formulaire de contact, une image cliquable qui renvoie vers sa boutique Etsy ou autre, etc) :)