Möchten Sie die Größe von Gravatar-Bildern auf Ihrer WordPress-Site ändern?
Gravatar ist ein Dienst, der die E-Mail-Adresse eines Benutzers mit seinem Bild verbindet. WordPress-Themes zeigen Gravatar-Bilder in einer bestimmten Größe an, aber einige Website-Besitzer bevorzugen möglicherweise größere oder kleinere Bilder.
In diesem Artikel zeigen wir Ihnen, wie Sie die Größe von Gravatar-Bildern in Ihrem WordPress-Theme ändern.
Was ist Gravatar?
Gravatar steht für Globally Recognized Avatar. Es ist ein Webservice, der von der Firma Automattic des WordPress-Mitbegründers Matt Mullenweg erstellt und betrieben wird. Sie können ein Profil erstellen und Avatar-Bilder mit Ihren E-Mail-Adressen verknüpfen.
Die meisten WordPress-Themes fügen neben jedem Benutzerkommentar einen Gravatar hinzu. Einige zeigen auch einen Gravatar in der Bio-Box des Autors. Wenn ein Benutzer kein Gravatar-Konto hat, wird stattdessen das Standardbild von Gravatar angezeigt.
Da die Größe von Gravatar-Bildern durch Ihr Theme definiert wird, müssen Sie Ihre Theme-Dateien bearbeiten, um diese Einstellung auf Ihrer WordPress-Website zu ändern.
Wenn Sie mit der Bearbeitung des Codes Ihrer WordPress-Dateien nicht vertraut sind, empfehlen wir Ihnen, zuerst Ihre Website zu sichern und unseren Anfängerleitfaden zum Einfügen von Code-Snippets in WordPress zu lesen.
Vielleicht möchten Sie auch unseren Anfängerleitfaden zur Verwendung von FTP für den Zugriff auf Ihre WordPress-Dateien lesen.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die Gravatar-Bildgröße auf Ihrer WordPress-Site ändern können. Sie können die folgende Liste verwenden, um zu dem Abschnitt zu springen, der Sie am meisten interessiert.
- So ändern Sie die Gravatargröße für WordPress-Kommentare
- So zeigen Sie runde Gravatarbilder an
- So ändern Sie die Gravatargröße für das Autorenbios
So ändern Sie die Gravatargröße für WordPress-Kommentare
Das erste, was Sie tun müssen, ist, sich über eine FTP-Software mit Ihrer Website zu verbinden und dann zu /wp-content/themes/ zu gehen. Öffnen Sie dann den Ordner des Themes, das Sie gerade verwenden.
Wenn Ihr WordPress-Hosting-Unternehmen alternativ einen Dateimanager anbietet, können Sie diese Datei über die Weboberfläche in Ihrem cPanel bearbeiten.
Dort sollten Sie die Datei comments.php öffnen, die sich in Ihrem Themenordner befindet. Als nächstes müssen Sie den folgenden Code finden: avatar_size
Es wird in der wp_list_comments
Funktion.
<?php wp_list_comments( array( 'avatar_size' => 60, 'style' => 'ol', 'short_ping' => true, ) ); ?>
Ändern Sie einfach die Größe auf die gewünschten Abmessungen. Im obigen Screenshot würden Sie 60 in eine andere Zahl ändern. Gravatare sind quadratisch, daher ist der von Ihnen eingestellte Wert für Breite und Höhe gleich.
Fahren Sie fort und speichern Sie Ihre Änderungen. Wenn Sie FTP verwenden, laden Sie die Änderungen auf Ihren Server hoch.
Öffnen Sie nun einen Beitrag mit Kommentaren, um zu sehen, ob Ihre Änderungen live sind. So sieht unsere Demo-Site vor und nach der Vergrößerung der Gravatar-Größe von 60 auf 70 Pixel aus. Wir verwenden das Standardthema Twenty Twenty-One.
Wenn sich die Größe des Gravatar-Bildes nicht geändert hat, kann dies an Ihrem Cache liegen. Sehen Sie sich zuerst unsere Anleitung an, wie Sie beheben können, dass WordPress nicht sofort aktualisiert wird.
Wenn es sich immer noch nicht ändert, könnte es daran liegen, dass das CSS Ihres Themes die Einstellung in der comments.php überschreibt. Der beste Weg, dies zu überprüfen, besteht darin, das Inspect-Tool in Ihrem Browser zu verwenden.
Klicken Sie einfach mit der rechten Maustaste auf den Gravatar in Ihrem Browser und klicken Sie auf Inspizieren.
Dadurch wird Ihr Browser-Bildschirm in zwei Teile geteilt. Am unteren Bildschirmrand sehen Sie HTML und CSS für die Seite.
Sie müssen sich die Höhe und Breite des Gravatar-Bildes ansehen, um zu sehen, ob es den von Ihnen festgelegten Wert widerspiegelt. Wenn der Code, auf den Ihre Maus zeigt, den Gravatar hervorhebt, sollten Sie die Größe sehen können, in der er angezeigt wird.
Sie werden feststellen, dass sich die Größe des Bildes hier von der in der Datei comments.php angegebenen unterscheidet. Dies bedeutet, dass die Datei style.css Ihres Themes die Standardbildgröße überschreibt.
Viele Themen wie das Thema Twenty Sixteen verwenden CSS, um die Gravatar-Bildgröße für verschiedene Bildschirmgrößen zu steuern.
Sie müssen die Datei style.css im Ordner Ihres Themes öffnen und nach Avatar suchen. Sie werden wahrscheinlich eine CSS-Klasse finden comment-author .avatar
die einen Code wie diesen enthalten:
.comment-author .avatar { height: 42px; position: relative; top: 0.25em; width: 42px; }
Fahren Sie fort und ändern Sie die Breite und Höhe so, dass sie dem Wert entsprechen, den Sie zuvor in der Datei comments.php festgelegt haben.
Das ist alles. Sie haben die Gravatar-Bildgröße in Ihren WordPress-Kommentaren erfolgreich geändert.
Jetzt fragen Sie sich vielleicht, warum wir mit dem Wechsel beginnen avatar_size
in der Datei comments.php, wenn Sie die Bildgröße einfach mit CSS überschreiben können. Es gibt zwei Gründe.
Erstens, um verschwommene Bilder zu vermeiden. Wenn Sie CSS verwenden, um das Bild größer erscheinen zu lassen, als es tatsächlich ist, sieht es verschwommen aus.
Zweitens für schnellere Ladezeiten. Wenn Sie CSS verwenden, um das Bild kleiner erscheinen zu lassen, muss Ihre Website dennoch das größere Bild laden. Indem Sie die Größe in der comments.php ändern, verkleinern Sie das eigentliche Bild und laden es schneller.
So zeigen Sie runde Gravatarbilder an
Sie haben vielleicht bemerkt, dass Gravatar-Bilder auf Themelocal rund sind und möchten dasselbe auf Ihrer eigenen Website tun. Einige Themen, wie Twenty Twenty-One und Astra, zeigen standardmäßig runde Gravatare an.
Wenn Ihr Design standardmäßig quadratische Gravatare anzeigt, können Sie den gleichen Effekt mithilfe von Code erzielen. Wir verwenden die border-radius-Eigenschaft von CSS3.
Als erstes müssen Sie die style.css-Datei Ihres Themes mit einem FTP-Programm bearbeiten. Alternativ können Sie das CSS hinzufügen, indem Sie zu . gehen Erscheinungsbild » Anpassen » Zusätzliches CSS in Ihrem WordPress-Admin.
Als nächstes möchten Sie den folgenden Code hinzufügen:
.avatar { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
Dies sollte bei den meisten WordPress-Themes funktionieren. Hier sind Vorher-Nachher-Screenshots unserer Demo-Site mit dem Twenty Twenty-Thema.
Wenn dies jedoch bei deinem Theme nicht funktioniert, dann gibt es wahrscheinlich ein Plugin oder deine Theme-Funktion, die die Standardklassen für Gravatar in WordPress durcheinander bringt.
Um herauszufinden, welche CSS-Klasse Gravatar-Bilder in Ihrem Theme verwenden, müssen Sie einen Blog-Beitrag mit Kommentaren öffnen. Scrollen Sie nach unten zum Kommentarbereich und klicken Sie mit der rechten Maustaste auf das Gravatar-Bild, um Inspect auszuwählen.
Dadurch wird Ihr Browser-Bildschirm in zwei Teile geteilt. Am unteren Bildschirmrand sehen Sie HTML und CSS für die Seite. Sie müssen den Mauszeiger über den Code bewegen, bis das Gravatar-Bild hervorgehoben ist, und dann die CSS-Klasse des Bildes suchen.
Wenn die Klasse etwas anderes als ‚Avatar‘ ist, verwenden Sie dies anstelle von .Benutzerbild im CSS-Code oben.
So ändern Sie die Gravatargröße für das Autorenbios
Einige WordPress-Themes verwenden Gravatar auch für Autoren-Bioboxen. Möglicherweise müssen Sie zuerst etwas in das Feld Biografische Informationen des Benutzerprofils eingeben. Erfahren Sie mehr in unserer Anleitung zum Hinzufügen einer Autoren-Infobox in WordPress-Beiträgen.
Sie können die Standardgröße von Gravatar hier ähnlich wie in der Kommentarvorlage ändern.
Zuerst müssen Sie die Theme-Datei finden, die die Bio hinzufügt. Sie müssen die Vorlagendateien des Themes nach dem Code durchsuchen get_avatar
.
Das Standardthema Twenty Twenty-One verwendet die Vorlagenteildatei namens author-bio.php. In anderen Themes könnte es sich in der Datei single.php, functions.php oder woanders befinden.
Hier ist der Code in der Datei author-bio.php von Twenty Twenty-One:
<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>"> <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>
Sie müssen nur die Zahl 85 ändern, wie Sie möchten.
In anderen Themes kann der Code so aussehen:
get_avatar( get_the_author_meta( 'user_email' ), 85);
Nachdem Sie die Größe geändert haben, aktualisieren Sie die Seite, um zu sehen, ob die Größe aktualisiert wurde. Wenn nicht, müssen Sie in der Datei style.css nach der Avatar-Klasse suchen, wie wir für Kommentare gezeigt haben, und die Größe auch dort aktualisieren.
So sieht unsere Demo-Site vor und nach dem Verringern der Gravatar-Größe von 85 auf 60 Pixel aus, wenn das Standardthema Twenty Twenty-One verwendet wird.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, die Gravatar-Bildgröße in WordPress zu ändern.
Vielleicht möchten Sie auch lernen, wie Sie eine kostenlose geschäftliche E-Mail-Adresse erstellen oder unsere Liste der besten WordPress-Hosting-Dienste ansehen.