So ändern Sie die Größe des Gravatar-Bildes in WordPress

Wenn Sie die Gravatar-Bilder auf Ihrer WordPress-Website vergrößern oder verkleinern möchten, sind Sie hier genau richtig. Es gab Fälle, in denen wir benutzerdefinierte Gravatar-Größen auf WordPress-Websites, an denen wir arbeiteten, anpassen mussten, aber die Methode unterscheidet sich je nach dem von Ihnen verwendeten Theme.

Ein Gravatar ist ein Bild, das verwendet wird, um einen Kommentator oder Autor eines Blogbeitrags darzustellen. WordPress-Themes zeigen Gravatare in einer festgelegten Größe an, aber Sie möchten sie vielleicht kleiner oder größer machen, damit sie besser zu Ihrem Website-Design passen.

In diesem Artikel zeigen wir Ihnen, wie Sie die Größe von Gravatar-Bildern in WordPress ändern.

Warum die Größe des Gravatar-Bildes in WordPress ändern?

Gravatar steht für Globally Recognized Avatar. Es ist ein Webdienst, der es Ihnen ermöglicht, ein Profil zu erstellen und Avatar-Bilder mit Ihrer E-Mail-Adresse zu verknüpfen.

Die meisten WordPress-Themes zeigen neben dem Kommentar des Benutzers einen Gravatar an. Einige Themes zeigen auch einen Gravatar im Autoren-Bio-Feld an.

Selbst wenn ein Benutzer kein Gravatar-Konto hat, zeigt Ihre Website immer noch einen der Standard-WordPress-Gravatare an.

Manchmal möchten Sie die Größe der Gravatare Ihres Themes ändern. Sie möchten sie zum Beispiel größer machen, damit sie hervorstechen und die Aufmerksamkeit des Besuchers auf den Kommentarbereich Ihrer Website lenken.

Nichtsdestotrotz wollen wir uns nun ansehen, wie Sie die Größe Ihres benutzerdefinierten Gravatar-Bildes auf Ihrer WordPress-Website ändern können. Verwenden Sie einfach die untenstehenden Schnelllinks, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Gravatar-Größe mit dem Full Site Editor ändern (nur Block-Themes)
• Methode 2: Gravatar-Größe durch Bearbeiten von comments.php ändern (Alle Themes)
• Methode 3: Gravatar-Größe durch Bearbeiten von style.css ändern (Alle Themes)
• Method 4: Change Gravatar Size for Author Bios With Code

Methode 1: Gravatar-Größe mit dem Full Site Editor ändern (nur Block-Themes)

Wenn Sie ein blockbasiertes Theme wie Twenty Twenty-Five verwenden, können Sie die Standardgröße des WordPress-Gravatars über den Full Site Editor ändern.

Diese Methode funktioniert nicht mit allen Themes. Wenn Sie also kein Block-fähiges Theme verwenden, empfehlen wir stattdessen Methode 2.

Gehen Sie im WordPress-Dashboard zu Darstellung » Editor.

Sie gelangen nun zum Full-Site-Editor und sehen verschiedene Einstellungen, um verschiedene Teile Ihrer WordPress-Website zu bearbeiten.

Um die Standard-Avatar-Größe für Ihre WordPress-Kommentare zu ändern, klicken Sie auf das Suchleisten-Symbol oben im linken Bereich.

An dieser Stelle suchen Sie einfach nach dem Vorlagenteil für Kommentare.

Klicken Sie darauf, sobald Sie es gefunden haben.

Auf der nächsten Seite sehen Sie einige Informationen über den Kommentar-Template-Teil.

Um den Kommentar-Template-Teil zu bearbeiten, klicken Sie auf den Bleistift-Button. Sie werden dann zur Bearbeitungsoberfläche weitergeleitet.

Sie können nun auf jeden der Gravatare in der Live-Vorschau klicken.

Im rechten Menü können Sie den Tab 'Block' auswählen, falls er nicht bereits ausgewählt ist.

Sie können die Gravatare jetzt größer oder kleiner machen, indem Sie den Schieberegler „Bildgröße“ ziehen.

Wenn Sie den Schieberegler bewegen, werden alle Gravatare automatisch aktualisiert, sodass Sie verschiedene Größen ausprobieren können, um zu sehen, was am besten aussieht.

Sie können auch die Einstellung „Link zum Benutzerprofil“ aktivieren. Wenn ein Benutzer auf den Gravatar klickt, wird er zur Profilseite des Kommentators auf Ihrer Website weitergeleitet.

Wenn Sie mit der neuen Standard-Gravatar-Bildgröße zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern'.

Wenn Sie nun einen beliebigen Kommentarbereich auf Ihrer WordPress-Website besuchen, sehen Sie die Änderungen live.

Methode 2: Gravatar-Größe durch Bearbeiten von comments.php ändern (Alle Themes)

Wenn Sie kein Block-basiertes WordPress-Theme verwenden, können Sie die Größe des Gravatar-Profilbildes für WordPress-Kommentare ändern, indem Sie den Code Ihres Themes bearbeiten.

Diese Methode erfordert die Bearbeitung von Theme-Dateien, daher ist sie nicht die anfängerfreundlichste Option. Diese Methode sollte jedoch für die meisten WordPress-Themes funktionieren.

Zuerst müssen Sie sich mit Ihrer WordPress-Site über einen FTP-Client wie FileZilla verbinden, oder Sie können den Dateimanager Ihres WordPress-Hostings cPanel verwenden.

Wenn Sie FTP zum ersten Mal verwenden, finden Sie in unserem vollständigen Leitfaden hier, wie Sie sich mit Ihrer Website über FTP verbinden.

Sobald Sie verbunden sind, müssen Sie zu /wp-content/themes/ gehen und den Ordner für Ihr aktuelles WordPress-Theme öffnen.

Sobald Sie hier sind, öffnen Sie die Datei comments.php und suchen Sie nach der Funktion wp_list_comments. Innerhalb dieser Funktion finden Sie avatar_size, die die Größe des Gravatars festlegt.

Hier ist ein Beispiel, wie das aussehen könnte:

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

Sie können einfach die avatar_size auf die gewünschte Größe ändern. Im obigen Code-Snippet bedeutet dies, 60 durch eine andere Zahl zu ersetzen.

Gravatare sind quadratisch, daher verwendet WordPress denselben Wert für die Bildbreite und -höhe. Das bedeutet, dass Sie nur eine Zahl eingeben müssen.

Stellen Sie nach dieser Änderung sicher, dass Sie die Datei speichern und wieder auf Ihr WordPress-Hosting-Konto hochladen. Wenn Sie fertig sind, können Sie Ihren WordPress-Blog besuchen, um die Änderung in Aktion zu sehen.

Wenn sich das Gravatar-Bild nicht geändert hat, liegt es möglicherweise am Cache. Um mehr zu erfahren, lesen Sie bitte unseren Leitfaden zur Behebung von WordPress-Websites, die nicht sofort aktualisiert werden.

Wenn sich der Gravatar immer noch nicht ändert, dann könnte das CSS Ihres Themes die Einstellungen in der Datei comments.php überschreiben. In diesem Fall müssen Sie die nächste Methode ausprobieren.

Methode 3: Gravatar-Größe durch Bearbeiten von style.css ändern (Alle Themes)

Um zu sehen, ob die CSS Ihres Themes Ihre comment.php-Datei überschreibt, können Sie das Inspect-Tool Ihres Browsers verwenden. Die Schritte variieren je nach verwendetem Browser, aber in Chrome können Sie einfach mit der rechten Maustaste auf den Gravatar klicken oder Strg+Klick darauf ausführen und dann „Untersuchen“ auswählen.

Dies zeigt den HTML- und CSS-Code der Seite in einem neuen Bereich an.

In diesem Code müssen Sie sich auf das untere Panel konzentrieren und nach der CSS-Klasse oder den CSS-Klassen für den Avatar des Kommentarautors suchen.

In unserem Beispiel waren dies .comment-author und .avatar, und sie enthalten CSS-Eigenschaften für die Höhen- und Breitenwerte des Gravatars. Wir wissen das, weil sich der Gravatar beim Überfahren der CSS-Code-Schnipsel im Vorschaubild hervorhebt.

So sieht der Code in unserem Theme aus. Beachten Sie, dass er in Ihrem anders aussehen kann:

.comment-author .avatar {
height: 42px;
position: relative;
top: .25em;
width: 42px;
}

Wenn die Gravatar-Größe im CSS-Code von der im comments.php-Datei angegebenen Größe abweicht, bedeutet dies, dass die style.css-Datei Ihres Themes Ihre Änderungen überschreibt.

Um Ihre style.css-Datei zu bearbeiten, müssen Sie WPCode verwenden, ein Code-Snippet-Plugin, das das einfache Einfügen von benutzerdefiniertem Code in Ihr Theme ermöglicht. Damit können Sie Ihre style.css-Datei bearbeiten, ohne direkt darauf zuzugreifen, was die Wahrscheinlichkeit von Fehlern verringert.

Außerdem müssen Sie den Tab geöffnet lassen, auf dem sich das Inspektionswerkzeug befindet. So können Sie den CSS-Code für den Gravatar Ihres Kommentarautors kopieren und in WPCode einfügen und später bearbeiten.

Installieren Sie zunächst WPCode auf Ihrer WordPress-Website. Sie können unsere Anleitung zur Installation eines WordPress-Plugins für weitere Informationen lesen.

Gehen Sie dann zu Code-Snippets » + Snippet hinzufügen und wählen Sie „Eigene Codes hinzufügen (Neues Snippet)“. Klicken Sie auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Geben Sie nach Abschluss einen Namen für Ihren neuen CSS-Code ein. Es kann etwas so Einfaches sein wie 'Gravatar-Größe ändern'.

Wählen Sie als Code-Typ „CSS-Snippet“.

Kopieren Sie nun Ihre ursprünglichen CSS-Code-Schnipsel Ihres Themes für die Gravatar-Größe und fügen Sie sie in das Feld „Code-Vorschau“ ein.

Sobald Sie fertig sind, können Sie die Werte für Höhe und Breite im Code ändern. In unserem Beispiel haben wir sie auf 50px geändert. Stellen Sie sicher, dass die Größen für Höhe und Breite gleich sind.

Wenn Sie fertig sind, scrollen Sie nach unten zum Abschnitt "Einfügen".

Stellen Sie sicher, dass die Methode 'Automatisch einfügen' ausgewählt ist. Wählen Sie für den Speicherort einfach 'Website-weiter Footer', damit Ihr benutzerdefiniertes CSS den vorhandenen CSS-Code überschreiben kann.

Klicken Sie danach einfach auf den Schalter in der oberen rechten Ecke, um den Code auf 'Aktiv' zu setzen, und klicken Sie auf 'Snippet speichern'. Wenn Sie Ihren WordPress-Blog oder Ihre Website besuchen, sehen Sie Ihre aktualisierten Gravatar-Bilder.

Nun empfehlen wir, zu versuchen, die Gravatar-Größe in der Datei comments.php zu ändern, bevor Sie die einfachere CSS-Methode verwenden.

Erstens kann CSS manchmal dazu führen, dass die Gravatare verschwommen aussehen, insbesondere wenn Sie die Avatare viel größer als das Originalbild machen.

Zweitens hilft die Änderung der Bildgröße in comments.php oft dabei, dass Ihre Website schneller lädt. Dies liegt daran, dass der Browser immer noch das Bild in voller Größe herunterladen und dann CSS verwenden muss, um es für die Anzeige zu skalieren. Dies kann zu einer langsameren Website-Leistung führen.

Methode 4: Gravatar-Größe für Autoren-Bios mit Code ändern

Wenn Sie eine Website mit mehreren Autoren in WordPress betreiben, kann eine Autorenbox den Lesern helfen, mehr über den Autor des Beitrags zu erfahren.

Wenn Sie diese Funktion zu Ihrer Website hinzufügen möchten, dann lesen Sie unseren Leitfaden zum Hinzufügen einer Autoreninfo-Box in WordPress-Beiträgen.

Viele Autoren-Biografien zeigen das Gravatar des Autors zusammen mit seiner Biografie an. Um die Standardgröße des Gravatars in Ihren Autoren-Bio-Boxen zu ändern, müssen Sie die Theme-Datei finden, die die Biografie hinzufügt.

Verbinden Sie sich einfach mit Ihrer Website über einen FTP-Client wie FileZilla oder den Dateimanager Ihres WordPress-Hostings. Sobald Sie verbunden sind, navigieren Sie zu /wp-content/themes/ und öffnen Sie den Ordner für Ihr aktuelles WordPress-Theme.

Danach müssen Sie den Ordner template-parts öffnen.

Sie müssen nun die Datei finden, die den get_avatar Code enthält. Sie finden diesen Code oft in einer Template-Part-Datei namens author-bio.php, single.php, functions.php oder ähnlich.

Hier ist ein Beispiel, wie dieser Code aussehen könnte:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

Im obigen Ausschnitt können Sie einfach die Zahl 85 in die gewünschte Größe ändern.

Bei anderen Themes kann der Code so aussehen:

get_avatar( get_the_author_meta( 'user_email' ), 85);

Sie können die Zahl einfach durch den gewünschten Wert ersetzen, um den Gravatar größer oder kleiner zu machen.

Vergessen Sie nach der Größenänderung nicht, Ihre Änderungen zu speichern. Sie können dann Ihre Website besuchen, um die neue Autoren-Bio-Box in Aktion zu sehen.

Wenn sich die Gravatare nicht geändert haben, müssen Sie die Avatar-Klasse in der Datei style.css suchen, indem Sie denselben Prozess wie in Methode 3 beschrieben befolgen. Sobald Sie diese Klasse gefunden haben, können Sie einen neuen WPCode-Snippet erstellen und die neuen Gravatar-Höhen- und -Breitenwerte eingeben.

Erfahren Sie mehr Wege, um Ihren Kommentarbereich zu verbessern

Möchten Sie Ihre WordPress-Kommentare auf die nächste Stufe heben? Schauen Sie sich diese Anleitungen an, um Ihren Kommentarbereich anzupassen:

• So begrenzen Sie die Kommentar-Länge in WordPress (einfaches Tutorial)
• So ändern Sie den Text „Antworten“ in WordPress-Kommentaren
• So erlauben Sie Ihren Benutzern, Kommentare in WordPress zu abonnieren
• So paginieren Sie Kommentare in WordPress (Schritt für Schritt)
• So erlauben Sie Benutzern, Kommentare in WordPress zu mögen oder nicht zu mögen
• So entfernen Sie das Website-URL-Feld aus dem WordPress-Kommentarformular

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie die Größe des Gravatar-Bildes in WordPress ändern können. Möglicherweise möchten Sie auch lernen, wie Sie das WordPress-Kommentarformular gestalten oder unsere Liste der besten WordPress-Kommentar-Plugins ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.