Yakın zamanda, yorum düzeninizi nasıl stilize edeceğinizi ve yorum formunuzu nasıl stilize edeceğinizi gösterdik. Kullanıcılarımızdan biri bize e-posta göndererek şöyle sordu: “gravatar resimlerinizi nasıl yuvarlak yaptınız? Yuvarlak hale getirmek için gravatar resimlerini yerel olarak mı saklıyorsunuz?” Bu makalede, WordPress'te yuvarlak gravatar resimlerini nasıl göstereceğinizi anlatacağız. Yuvarlak gravatar resimleri 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 veya WordPress yönetici panelinizde Görünüm » Düzenleyici yolunu izleyerek yapabilirsiniz. Ardından, CSS dosyanıza aşağıdaki kodu eklemek isteyeceksiniz:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Bu, çoğu WordPress temasında çalışmalıdır. Ancak, temanızda çalışmazsa, muhtemelen gravatar için kullanılan varsayılan sınıflarla oynayan bir eklenti veya tema işleviniz vardır. Temanızda gravatar resimlerinin hangi css sınıfını kullandığını bulmak için yorumları olan bir blog yazısı açmanız gerekir. Yorumlar bölümüne gidin ve gravatar resmine sağ tıklayarak 'Öğeyi İncele'yi seçin. Gravatar'ınızın kaynak kodunu şöyle gösterecektir:
Gravatar görüntüsünde avatar dışında bir şey varsa, yukarıdaki css kodunda .avatar yerine onu kullanın.
Umarım bu makale, WordPress blogunuzda yuvarlak gravatar resimleri görüntülemenize yardımcı olmuştur. Herhangi bir sorunuz veya geri bildiriminiz olursa lütfen aşağıya yorum bırakarak bize bildirin.
Rex
Çok zamanında. Çok teşekkür ederim.
WPBeginner Desteği
You’re welcome
Yönetici
pujara
Yorum sisteminizdeki gibi yorum resmini otomatik olarak nasıl eklerim?
Nataly
merhaba, İşe yaradı, teşekkürler, ancak açıklama çok yüksek görünüyor. resmin üzerinde, resmin yanında görünmesini nasıl sağlayacağımı biliyor musunuz?
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.
WPBeginner Desteği
CSS'i temanızın stil sayfasında eklediniz mi?
Yönetici
ERFmama
Evet yaptım. Yirmi On İki temasına sahibim.
Belirli bir yere mi gitmesi gerekiyor? style.css içinde
Edit: Never mind it suddenly worked now!
Lütfen avatarların boyutunu nasıl değiştireceğimi sorabilir miyim? Yoksa bunu zaten bir yere yazdınız mı?
Bunun için çok teşekkür ederim!
Daniel
İşe yaradı, teşekkürler
Chrissy
Harika! Tam olarak aradığım şeydi! Teşekkürler, siz harikasınız!
Jacky
Bunun için ÇOK teşekkür ederim, başarmak için saatler harcadım. En anlaşılır çözümü sağladınız!
Abdul Samad
Kardeşim Bu Kod İçin Teşekkürler WP'de Yeniyim ve Blogunuzdan Gerçekten Keyif Alıyorum Adam Teşekkürler Bunun İçin Ve Tüm Öğreticiler İçin....
Richie
Bu ipucunu paylaşacaktım ve tabii ki önce sitelerimden birinde denedim.
Harika çalıştı, sadece CSS'imi kenarlık moz ve webkit için px'ten %'ye değiştirdim.
İlginçleşen yer burasıydı.
Başka bir siteye gittim, aynı değişikliği yaptım ve işe yaramadı. Biraz kafa yorduktan sonra, üzerinde çalıştığı sitede WP User Avatar eklentisinin yüklü olduğunu ve çalışmadığı sitede yüklü olmadığını hatırladım.
Eklentiyi yükledim ve harika, harika çalışıyor.
Her iki site için de Presswork çatısı üzerine kurulu özel bir tema kullanıyorum.
Sonuç olarak, eklentiyle birlikte çalışmasını sağladım.
Herhangi bir fikriniz var mı?
Yayın Kadrosu
Temanızın .avatar css sınıfını kullanmıyor olması ve eklentinin bunu eklemiş olması mümkündür.
Yönetici
Richie
I’ll check it out. Thanks
Roselle Celina
Merhaba, bu eğitim için teşekkürler! Chrome ve Firefox'ta harika çalışıyor, ancak Safari'de aynı sorunu yaşıyorum: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Yayın Kadrosu
Safari'de sorunun kenarlık genişliği gibi görünüyor.
Yönetici
RW
Katılıyorum ve IE'yi zamanımın yalnızca yaklaşık %4'ünde kullanıyorum ancak müşterilerimin birkaçı hala 8'de.
Teşekkürler,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Harika ipucu. Lütfen IE8'in yuvarlak köşeleri (border-radius) yerel olarak oluşturmadığını unutmayın. Bunun için javascript, pie vb. kullanmanız gerekir, ancak bu zahmete değmez. Neyse ki IE9 mevcut standartları tanıyor...
Teşekkürler.
Jim Burnett
IE6 desteğini döngüde tutmaya çalıştığımız günleri hatırlıyorum. Şimdi yuvarlak köşeler için IE 8. Şanslıyız, IE9 ilerliyor.
Tekrar söylemek gerekirse, FF 3.0 herhangi bir HTML 5'i desteklemiyor. *üzgün surat*
Yine de harika bir CSS hilesi!