Kürzlich haben wir Ihnen gezeigt, wie Sie das Layout Ihrer Kommentare gestalten und wie Sie das Formular für WordPress-Kommentare gestalten. Einer unserer Benutzer hat uns per E-Mail gefragt: „Wie haben Sie Ihre Gravatar-Bilder rund gemacht? Speichern Sie Gravatar-Bilder lokal, um sie rund zu machen?“ In diesem Artikel zeigen wir Ihnen, wie Sie runde Gravatar-Bilder in WordPress anzeigen. Wir verwenden die CSS3-Eigenschaft border-radius, um kreisförmige Gravatar-Bilder zu erstellen.
Als Erstes müssen Sie die Datei style.css Ihres Themes bearbeiten. Dies können Sie mit einem FTP-Programm tun oder indem Sie in Ihrem WordPress-Adminbereich zu Darstellung » Editor gehen. Fügen Sie als Nächstes den folgenden Code in Ihre CSS-Datei ein:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Dies sollte auf den meisten WordPress-Themes funktionieren. Wenn dies jedoch auf Ihrem Theme nicht funktioniert, gibt es wahrscheinlich ein Plugin oder Ihre Theme-Funktion, die mit den Standardklassen für Gravatare in WordPress herumspielt. Um herauszufinden, welche CSS-Klasse Gravatar-Bilder in Ihrem Theme verwenden, müssen Sie einen Blogbeitrag öffnen, der Kommentare enthält. Scrollen Sie nach unten zum Kommentarbereich und klicken Sie mit der rechten Maustaste auf das Gravatar-Bild, um „Element untersuchen“ auszuwählen. Es wird Ihnen der Quellcode für Ihr Gravatar angezeigt, wie hier:
Wenn das Gravatar-Bild etwas anderes als avatar hat, verwenden Sie stattdessen diesen Wert anstelle von .avatar im obigen CSS-Code.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, runde Gravatar-Bilder auf Ihrem WordPress-Blog anzuzeigen. Lassen Sie uns wissen, wenn Sie Fragen oder Feedback haben, indem Sie unten einen Kommentar hinterlassen.
Rex
Sehr zeitgemäß. Vielen Dank.
WPBeginner Support
You’re welcome
Admin
pujara
Wie kann man automatisch ein Kommentarbild wie in Ihrem Kommentarsystem hinzufügen?
Nataly
Hallo, es hat funktioniert, danke, aber die Beschreibung erscheint zu hoch. Über dem Bild, wissen Sie, wie man es neben dem Bild erscheinen lässt?
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 Support
Haben Sie das CSS in der Stylesheet-Datei Ihres Themes hinzugefügt?
Admin
ERFmama
Ja, das habe ich. Ich habe das Twenty Twelve Theme.
Muss es an eine bestimmte Stelle? In der style.css
Edit: Never mind it suddenly worked now!
Kann ich fragen, wie man die Größe der Avatare ändert? Oder haben Sie das schon irgendwo aufgeschrieben?
Vielen Dank dafür!
Daniel
Es hat funktioniert, danke
Chrissy
Fantastisch! Genau das, wonach ich gesucht habe! Danke, ihr seid spitze!
Jacky
VIELEN DANK dafür, ich habe Stunden damit verbracht, es zu erreichen. Sie haben die geradlinigste Lösung geliefert!
Abdul Samad
Bro, danke für diesen Code. Ich bin neu in WP und genieße deinen Blog wirklich, Mann. Danke dafür und für alle Tutorials....
Richie
Ich wollte diesen Tipp weitergeben und habe ihn natürlich zuerst auf einer meiner Websites ausprobiert.
Hat wie ein Zauber funktioniert. Ich habe einfach mein CSS von px auf % für den Border moz und webkit geändert.
Hier wurde es interessant.
Ich ging zu einer anderen Website, machte dieselbe Änderung und es funktionierte nicht. Nach einigem Nachdenken fiel mir ein, dass ich das Plugin WP User Avatar auf der Website installiert hatte, auf der es funktionierte, und es nicht auf der Website installiert hatte, auf der es nicht funktionierte.
Ich habe das Plugin installiert und siehe da, es funktioniert einwandfrei.
Für beide Websites verwende ich ein benutzerdefiniertes Theme, das auf dem Presswork-Framework basiert.
Fazit: Ich habe es zum Laufen gebracht, aber nur mit dem Plugin.
Irgendwelche Ideen?
Redaktion
Es ist möglich, dass Ihr Theme die CSS-Klasse .avatar nicht verwendet hat und das Plugin diese hinzugefügt hat.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Hallo, danke für dieses Tutorial! Es funktioniert super unter Chrome und Firefox, aber für Safari habe ich dasselbe Problem: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Redaktion
Es scheint, dass die Rahmenbreite das Problem in Safari zu sein scheint.
Admin
RW
Ich stimme zu und ich benutze IE nur etwa 4 % der Zeit, aber mehrere meiner Kunden sind immer noch auf 8.
Danke,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Toller Tipp. Bitte beachten Sie, dass IE8 standardmäßig keine abgerundeten Ecken (border-radius) rendert. Sie müssten dafür JavaScript, PIE usw. verwenden, aber das ist die Mühe nicht wert. Glücklicherweise erkennt IE9 aktuelle Standards...
Danke.
Jim Burnett
Ich erinnere mich an die Zeiten, als wir versuchten, IE6-Unterstützung im Auge zu behalten. Jetzt ist es IE8 für abgerundete Ecken. Glücklicherweise holt IE9 auf.
Nun, FF 3.0 unterstützt kein HTML 5. *trauriges Gesicht*
Cooler CSS-Trick aber!