WPBeginner Sites»WPBeginner»Blog»Temalar»WordPress’te Yuvarlak Gravatar Görselleri Nasıl Görüntülenir?

WordPress’te Yuvarlak Gravatar Görselleri Nasıl Görüntülenir?

By Editorial Staff | Reviewed by Syed Balkhi | Mayıs 29, 2024 | Reader Disclosure

Kısa süre önce size yorum düzeninizi nasıl şekillendireceğinizi ve yorum formunuzu nasıl şekillendireceğinizi göstermiştik. Kullanıcılarımızdan biri bize e-posta göndererek ” gravatar resimlerinizi nasıl yuvarlak yaptınız? Gravatar resimlerini yuvarlak hale getirmek için yerel olarak mı saklıyorsunuz?” Bu makalede, WordPress’te yuvarlak gravatar görsellerini nasıl görüntüleyeceğinizi göstereceğiz. Dairesel gravatar görselleri oluşturmak için CSS3’ün border-radius özelliğini kullanacağız.

Yapmanız gereken ilk şey temanızın style.css dosyasını düzenlemektir. Bunu bir FTP programı kullanarak ya da WordPress yöneticinizdeki Görünüm ” Düzenleyici bölümüne giderek yapabilirsiniz. Ardından, CSS dosyanıza aşağıdaki kodu eklemek istiyorsunuz:

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

Bu, çoğu WordPress temasında çalışmalıdır. Ancak, bu sizin temanızda çalışmıyorsa, muhtemelen WordPress’te gravatar için kullanılan varsayılan sınıflarla uğraşan bir eklenti veya tema işleviniz vardır. Gravatar görsellerinin temanızda hangi css sınıfını kullandığını bulmak için yorum içeren bir blog yazısı açmanız gerekir. Yorumlar bölümüne gidin ve gravatar görseline sağ tıklayarak Öğeyi İncele’yi seçin. Size gravatarınızın kaynak kodunu gösterecektir, bunun gibi:

Gravatar resminde avatar dışında bir şey varsa, yukarıdaki css kodunda .av atar yerine bunu kullanın.

Umarız bu makale WordPress blogunuzda yuvarlak gravatar resimleri görüntülemenize yardımcı olmuştur. Herhangi bir sorunuz veya geri bildiriminiz olursa aşağıya yorum bırakarak bize bildirin.

WPBeginner'da Popüler Hemen şimdi!

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Hakkında Editorial Staff

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.

20 yorumBir Cevap Bırakın

Rex

Very timely. Thank you so much.

Yanıtla
- WPBeginner Support
  
  You’re welcome
  
  Yanıtla
  
  Yönetici
pujara

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

Yanıtla
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?

Yanıtla
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.

Yanıtla
- WPBeginner Support
  
  Did you add the CSS in your theme’s stylesheet?
  
  Yanıtla
  
  Yönetici
  - 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!
    
    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!
    
    Yanıtla
Daniel

It worked, thank you

Yanıtla
Chrissy

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

Yanıtla
Jacky

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

Yanıtla
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 ….

Yanıtla
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?

Yanıtla
- Editorial Staff
  
  It is possible that your theme wasn’t using the css class .avatar, and the plugin added that.
  
  Yanıtla
  
  Yönetici
  - Richie
    
    I’ll check it out. Thanks
    
    Yanıtla
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

Yanıtla
- Editorial Staff
  
  It seems that the border width is where the issue seems to be in safari.
  
  Yanıtla
  
  Yönetici
RW

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

Thanks,
Bob

Yanıtla
Martin

If somebody uses IE8 does not deserve for round image

Yanıtla
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.

Yanıtla
- 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!
  
  Yanıtla