Gravatar anhand der Benutzer-E-Mail-Adresse in WordPress anzeigen

Gravatar ist ein Webdienst, der die E-Mail-Adresse eines Benutzers mit einem Online-Avatar verknüpft.

WordPress zeigt automatisch die Gravatare von Besuchern im Kommentarbereich an, aber Sie möchten sie vielleicht auch in anderen Bereichen Ihrer Website hinzufügen. Dies kann dazu beitragen, ein visuell ansprechenderes Benutzererlebnis zu schaffen und das Engagement zu steigern.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Gravatar aus der E-Mail des Benutzers in WordPress anzeigen können, indem wir verschiedene Methoden untersuchen, um Ihnen flexible Optionen zu bieten.

Was ist Gravatar und warum sollte man ihn anzeigen?

Gravatar steht für Globally Recognized Avatar und ermöglicht es Benutzern, ein Bild mit ihrer E-Mail-Adresse zu verknüpfen.

Wenn eine Website Gravatar unterstützt, kann sie das Bild der Person abrufen und neben ihrem Namen anzeigen. Wenn ein Benutzer beispielsweise einen Kommentar mit seiner E-Mail-Adresse auf einer WordPress-Website hinterlässt, zeigt WordPress den Gravatar dieser Person neben seinem Kommentar an.

Gravatare können Benutzer dazu ermutigen, sich an der Konversation zu beteiligen, ein Gemeinschaftsgefühl aufzubauen und Ihre Seiten interessanter zu gestalten. All dies zusammen kann Ihnen helfen, mehr Kommentare zu Ihren WordPress-Beiträgen zu erhalten.

Abhängig davon, wie Ihre Website eingerichtet ist, zeigt WordPress Gravatare möglicherweise auch an anderen Stellen an, z. B. in der Autorenbeschreibung. Möglicherweise möchten Sie jedoch ändern, wo Benutzer-Gravatare in Ihrem WordPress-Blog oder Ihrer Website erscheinen. Sie könnten beispielsweise das Gravatar des Benutzers in der Symbolleiste oder im Benutzerprofil Ihrer Website anzeigen.

Mit dem Gesagten, lassen Sie uns sehen, wie Sie den Gravatar aus einer Benutzer-E-Mail in WordPress anzeigen können. Verwenden Sie einfach die folgenden Schnelllinks, um zu der von Ihnen bevorzugten Methode zu springen:

• Methode 1: Bearbeiten Sie Ihr WordPress-Theme (am besten für Konsistenz)
• Methode 2: Verwendung eines benutzerdefinierten WordPress-Shortcodes (vollständig anpassbar)
• Bonus: Gravatare in WordPress-Kommentaren per Lazy Load laden

Methode 1: Bearbeiten Sie Ihr WordPress-Theme (am besten für Konsistenz)

Erstens können Sie einen Gravatar mit Code zu Ihrem WordPress-Theme hinzufügen. Dies ist eine gute Wahl, wenn Sie einen Gravatar an derselben Stelle auf Ihrer gesamten Website anzeigen möchten, z. B. in der Seitenleiste oder über dem Header. Sie müssen jedoch Ihre Vorlagendateien bearbeiten, daher ist dies nicht die anfängerfreundlichste Methode.

Diese Methode zeigt das Gravatar der Person an, die gerade auf Ihrer Website angemeldet ist. Dies ist nützlich für Mitgliederseiten, Online-Shops oder jede andere Website, auf der sich der Benutzer bei einem Konto anmelden muss.

Um einen Gravatar zu Ihrem Theme hinzuzufügen, müssen Sie etwas Code in Ihre Theme-Dateien einfügen. Wenn Sie dies noch nie getan haben, lesen Sie unseren Anfängerleitfaden zum Einfügen von Snippets aus dem Web in WordPress.

Der einfachste Weg, Code-Snippets zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin für WordPress, mit dem Sie PHP, CSS, JavaScript und mehr zu Ihrer Website hinzufügen können.

Installieren und aktivieren Sie zuerst das kostenlose WPCode-Plugin. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung im WordPress-Dashboard die Seite Code-Snippets » + Snippet hinzufügen. Hier sehen Sie alle fertigen Snippets, die WPCode zu Ihrer Website hinzufügen kann.

Bewegen Sie einfach die Maus über „Fügen Sie Ihren benutzerdefinierten Code hinzu (Neuer Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“, wenn sie erscheint.

Geben Sie zunächst einen Titel für den Code-Schnipsel ein. Dies dient nur Ihrer Information, Sie können also alles verwenden, was Sie möchten.

Öffnen Sie danach das Dropdown-Menü 'Code-Typ' und wählen Sie 'PHP-Snippet'.

Sie können nun fortfahren und Folgendes in den Code-Editor einfügen:

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

Dieser Code erstellt eine einfache Funktion, mit der Sie einen Gravatar an beliebiger Stelle in Ihren WordPress-Vorlagendateien hinzufügen können.

Nachdem Sie den Code eingefügt haben, scrollen Sie zum Abschnitt „Einfügen“ und wählen Sie „Automatisch einfügen“. Sie müssen auch das Dropdown-Menü „Position“ öffnen und „Überall ausführen“ auswählen.

Wenn Sie dies getan haben, scrollen Sie zum Seitenanfang und klicken Sie auf den Schalter 'Inaktiv', sodass stattdessen 'Aktiv' angezeigt wird.

Klicken Sie dann einfach auf die Schaltfläche „Snippet speichern“.

Jetzt können Sie den Gravatar des Benutzers mit der folgenden Funktion überall auf Ihrer WordPress-Website anzeigen:

<?php wpbeginner_display_gravatar(); ?>

Fügen Sie diese Funktion einfach in die richtige Vorlagendatei ein. Wenn Sie beispielsweise das Gravatar des Benutzers im Header Ihrer Website anzeigen möchten, bearbeiten Sie normalerweise die Datei header.php.

Dies kann jedoch je nach Ihrem WordPress-Theme variieren. Um Ihnen bei der Suche nach der richtigen Vorlagendatei für Ihre Bedürfnisse zu helfen, werfen Sie einen Blick auf unser WordPress-Vorlagenhierarchie-Cheat-Sheet.

Methode 2: Verwendung eines benutzerdefinierten WordPress-Shortcodes (vollständig anpassbar)

Sie können auch ein Gravatar zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen, indem Sie einen benutzerdefinierten Shortcode erstellen.

Dies ist eine gute Wahl, wenn Sie genau steuern möchten, wo die Gravatare auf jeder Seite erscheinen, oder wenn Sie diese Bilder an verschiedenen Stellen auf Ihrer Website anzeigen möchten.

Ähnlich wie bei Methode 1 zeigt dieser Ansatz das Gravatar des aktuellen Benutzers an. Wenn Sie es vorziehen, können Sie das Gravatar anzeigen, das einer bestimmten E-Mail-Adresse zugewiesen ist, indem Sie eine einfache Änderung am Code vornehmen.

Dies ist nützlich, wenn Sie die E-Mail-Adresse einer Person haben und deren Gravatar auf Ihrer Website anzeigen möchten, sie aber kein registrierter Benutzer sind.

Der einfachste Weg, benutzerdefinierte Shortcodes zu erstellen, ist die Verwendung von WPCode. Noch besser ist, dass Sie Ihre Theme-Dateien nicht bearbeiten müssen, was dies zu einer viel anfängerfreundlicheren Methode macht.

Wenn Sie dies noch nicht getan haben, müssen Sie WPCode installieren. Sie müssen auch einen neuen benutzerdefinierten Code-Snippet erstellen, indem Sie denselben Prozess wie oben beschrieben befolgen.

Wenn das erledigt ist, geben Sie dem Code-Snippet einen Namen und wählen Sie „PHP-Snippet“ als Code-Typ.

Fügen Sie als Nächstes den folgenden PHP-Code in den Code-Editor ein:

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

Dieser Code erstellt einen [wpb_gravatar]-Shortcode, den Sie zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen können.

Wenn Sie bereit sind, scrollen Sie zum Abschnitt „Einfügen“ und stellen Sie sicher, dass „Automatisch einfügen“ ausgewählt ist. Sie müssen auch das Dropdown-Menü „Position“ öffnen und „Überall ausführen“ auswählen, falls es nicht bereits ausgewählt ist.

Zum Schluss scrollen Sie zum oberen Bildschirmrand und klicken auf den Umschalter „Inaktiv“, sodass stattdessen „Aktiv“ angezeigt wird. Sie können dann auf „Snippet speichern“ klicken, um Ihren Code live zu schalten.

Sie können nun den Gravatar des Benutzers auf jeder Seite, jedem Beitrag oder in jedem Widget-fähigen Bereich mit dem folgenden Shortcode anzeigen:

[wpb_gravatar]

Weitere Informationen zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Wenn Sie den Gravatar eines bestimmten Benutzers anzeigen möchten, können Sie einfach dessen E-Mail-Adresse zum Shortcode hinzufügen:

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Wenn Sie mit dem Aussehen des Gravatars nicht zufrieden sind, können Sie es mit benutzerdefiniertem CSS gestalten. Sie können beispielsweise den folgenden CSS-Code-Snippet zu Ihrer WordPress-Theme-Stylesheet hinzufügen:

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

Weitere Details zum Hinzufügen von CSS zu WordPress finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Site.

Wenn Sie möchten, können Sie benutzerdefiniertes CSS über den WordPress Customizer hinzufügen. Gehen Sie im Dashboard einfach zu Darstellung » Anpassen.

Klicken Sie im linken Menü auf „Zusätzliches CSS“.

Sie können dann das benutzerdefinierte CSS in den kleinen Code-Editor einfügen.

Wenn das erledigt ist, klicken Sie einfach auf „Veröffentlichen“.

Wenn Sie nun Ihre Website besuchen, sehen Sie Ihren Gravatar im neuen Stil.

Weitere Tipps zur Anpassung von Gravataren auf Ihrer Website finden Sie in unserem Leitfaden unter how to change the Gravatar image size in WordPress.

So fügen Sie einen benutzerdefinierten Shortcode mit dem Full Site Editor hinzu

Wenn Sie eines der neueren Block-basierten Themes verwenden, können Sie den Shortcode zu jedem Template oder Template-Teil hinzufügen. Dies ermöglicht es Ihnen, den Gravatar des Benutzers auf Ihrer gesamten Website anzuzeigen, ohne die Template-Dateien bearbeiten zu müssen.

Sie könnten den Shortcode beispielsweise zu Ihrer Blog-Vorlage oder dem Header-Vorlagenteil Ihrer Website hinzufügen.

Um zu beginnen, gehen Sie im WordPress-Dashboard zu Darstellung » Editor.

Standardmäßig zeigt der vollständige Website-Editor die Startvorlage Ihres Themes an, aber Sie können Shortcodes zu jeder Vorlage oder jedem Vorlagenteil hinzufügen, wie z. B. dem Header oder Footer.

Um alle verfügbaren Optionen anzuzeigen, wählen Sie einfach entweder „Vorlagen“ oder „Vorlagenteile“.

Sie können nun auf die Vorlage oder das Vorlagenteil klicken, das Sie bearbeiten möchten.

Als Beispiel fügen wir den Shortcode zur 404-Seitenvorlage hinzu, aber die Schritte sind genau die gleichen, unabhängig davon, welche Vorlage Sie auswählen.

WordPress zeigt nun eine Vorschau der Vorlage oder des Vorlagenteils an.

Um den Shortcode hinzuzufügen, klicken Sie auf das kleine Stiftsymbol.

Wenn dies erledigt ist, klicken Sie auf das blaue Symbol '+' in der oberen linken Ecke.

Geben Sie in die Suchleiste 'Shortcode' ein.

Wenn der richtige Block erscheint, ziehen Sie ihn per Drag & Drop auf die Theme-Vorlage.

Sie können nun entweder den [wpb_gravatar] Shortcode in diesen Block einfügen oder eingeben.

Klicken Sie danach auf die Schaltfläche „Speichern“.

Besuchen Sie nun einfach Ihren WordPress-Blog, um den Gravatar in Aktion zu sehen.

Bonus: Gravatare in WordPress-Kommentaren per Lazy Load laden

Sobald Sie Gravatare an mehreren Stellen auf Ihrer Website hinzugefügt haben, ist es eine gute Idee, diese Gravatare in WordPress comments lazy-loaded zu laden.

Dies liegt daran, dass die meisten Gravatare im Kommentarbereich angezeigt werden und die Geschwindigkeit Ihrer Website verlangsamen können, insbesondere bei Artikeln mit vielen Kommentaren.

Um Gravatare per Lazy Load zu laden, installieren und aktivieren Sie einfach das Plugin a3 Lazy Load. Details finden Sie in unserem Anfängerleitfaden zum Thema Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung im WordPress-Dashboard zu Einstellungen » a3 Lazy Load und erweitern Sie den Tab „Lazy Load Images“.

Schalten Sie dann einfach den Schalter neben der Option „Gravatare“ auf „Ein“. Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Jetzt werden alle Gravatare in Ihren Autoren-Biografien und Kommentaren lazy-loaded, um die Leistung der Website zu verbessern. Weitere Anweisungen finden Sie in unserem Tutorial unter how to lazy load Gravatars in WordPress comments.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Gravatare aus Benutzer-E-Mails auf Ihrer WordPress-Site anzeigen. Möglicherweise möchten Sie auch unser Tutorial zum Thema Benachrichtigung von Benutzern bei Kommentarfreigabe in WordPress und unseren Leitfaden zum Thema Hinzufügen von Quicktags zu WordPress-Kommentarformularen lesen.

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.