Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment afficher des images rondes de Gravatar dans WordPress

Récemment, nous vous avons affiché comment styliser la mise en page de vos commentaires et comment styliser votre formulaire de commentaires. L’une de nos utilisateurs/utilisatrices nous a envoyé un e-mail pour nous demander « comment avez-vous fait pour que les images de vos gravatars soient rondes ? Est-ce que vous stockez les images gravatar localement pour qu’elles soient rondes ? « . Dans cet article, nous allons vous montrer comment afficher des images gravatar rondes dans WordPress. Nous utiliserons la propriété border-radius de CSS3 pour créer des images gravatar circulaires.

La première chose à faire est de modifier le fichier style.css de votre thème. Vous pouvez le faire en utilisant un programme FTP ou en allant dans Apparence  » Éditeurs/éditrices dans l’administration de WordPress. Ensuite, vous voulez ajouter le code suivant dans votre fichier CSS :

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

Cela devrait fonctionner sur la plupart des thèmes WordPress. Cependant, si cela ne fonctionne pas sur votre thème, alors il y a probablement une extension ou une fonction de votre thème qui perturbe les classes par défaut utilisées pour gravatar dans WordPress. Afin de trouver quelle classe CSS les images gravatar utilisent dans votre thème, vous devez ouvrir une publication de blog qui a des commentaires. Sélectionné jusqu’à la section des commentaires, cliquez avec le bouton droit de la souris sur l’image gravatar pour sélectionner Inspecter l’élément. Cela vous affichera le code source de votre gravatar, comme ceci :

Finding css class used by gravatar icon

Si l’image gravatar a quelque chose d’autre qu’avatar, utilisez-le à la place de .avatar dans le code CSS ci-dessus.

Nous espérons que cet article vous a aidé à afficher des images gravatar rondes sur votre blog WordPress. Faites-nous savoir si vous avez des questions ou des retours en laissant un commentaire ci-dessous.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

20 commentairesLaisser une réponse

  1. Rex

    Very timely. Thank you so much.

    • WPBeginner Support

      You’re welcome :)

      Administrateur

  2. pujara

    How to add comment image automatically like in your comment system?

  3. Nataly

    hello, It worked, thank you, but, the description appear to high. over the pic, do you know to make it appear at the side of the pic?

  4. Therese

    I can’t make it work. :(
    I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.

      • ERFmama

        Yes I did. I have the Twenty Twelve theme.
        Is there a specific place it has to go? In the style.css

        Edit: Never mind it suddenly worked now! :D

        Can I ask how to change the size of the avatars please? Or have you already written that down somewhere?

        Thank you so much for this!

  5. Chrissy

    Fantastic! Exactly what I was looking for! Thanks you guys rock!

  6. Jacky

    THANK YOU so much for this, spent hours trying to accomplish. You provided the most straightforward solution!

  7. Abdul Samad

    Bro Thanks For This Code I’m New In WP and I really Enjoying Your Blog Man Thanks For THis And All Tutorials ….

  8. Richie

    I was going to pass along this tip and of course tried it first on one of my sites.

    Worked like a champ I simply changed my CSS from px to % for the border moz and webkit.

    Here’s where it got interesting.

    I went to another site, did the same tweak and it didn’t work. After a little head scratching I remembered that I had the plugin WP User Avatar installed on the site that it worked on and didn’t have it installed on the site it didn’t work on.

    I installed the plugin and whalah, works like a champ.

    For both sites I’m using a custom theme built on the Presswork framework.

    Bottom line, I got it to work but only with the plugin.

    Any ideas?

    • Editorial Staff

      It is possible that your theme wasn’t using the css class .avatar, and the plugin added that.

      Administrateur

      • Richie

        I’ll check it out. Thanks :)

  9. Roselle Celina

    Hi there, thanks for this tutorial! It’s working great on chrome and Firefox, but for Safari, I’m getting this same problem: http://jsfiddle.net/2UT8v/2/

    Thanks in advance for your help ;)

  10. RW

    I agree and I only use IE about 4% of the time but several of my customers are still on 8.

    Thanks,
    Bob

  11. Martin

    If somebody uses IE8 does not deserve for round image ;)

  12. RW

    Great tip. Please note that IE8 doesn’t natively render round corners (border-radius). You’d need to use javascript, pie, etc… for this but not worth the trouble. Luckily IE9 recognizes current standards…

    Thanks.

    • Jim Burnett

      I remember the days we were trying to keep IE6 support in the loop. Not it’s IE 8 for rounded corners. Lucky us, IE9 is picking up.

      Then again, FF 3.0 doesn’t support any HTML 5. *sad face*

      Cool CSS trick though!

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.