Avatar und Username per Shortcode anzeigen

Inhaltsverzeichnis

Heute gibt es mal wieder ein kleines sinnvolles Snippet. Tatsächlich habe ich dies auf einer Kundenseite benötigt.

Hier sollte für eingeloggte User im Kopfbereich der Seite ein kleines Element angezeigt werden wo der hinterlegte “Avatar” gezeigt wird, sowie eine kurze Begrüßung des Users und eine Logout Option.

avatar beispiel

Über einen Shortcode kann dies dann an beliebigen Stellen der Webseite angezeigt werden.

Im folgende Artikel zeige ich dir kurz wie du dies entweder mit einem einfachen Snippet für die functions.php umsetzt und direkt das WordPress Plugin downloadest.

WordPress Avatar per Shortcode – Snippet

Das folgende Snippet kopierst du einfach und fügst dies in deine functions.php ein.

Wie immer – Child Theme ist in dem Fall natürlich Pflicht. Hier siehst du wie du ein Child Theme für WordPress erstellst.

function greeting_with_avatar_shortcode() {
    // Überprüfe, ob ein Benutzer angemeldet ist.
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        
        // Nur den Vornamen des Benutzers anzeigen.
        $user_name = $current_user->user_firstname;

        // Versuchen Sie, den Avatar des Benutzers zu erhalten. Wenn kein Avatar vorhanden ist, wird ein Dummy-Bild verwendet.
        $avatar_url = get_avatar_url($current_user->ID, ['size' => 64, 'default' => 'https://example.com/pfad/zum/dummy/bild.png']);

        // Logout URL
        $logout_url = wp_logout_url();

        // Rückgabe des formatierten Strings.
        return '<div style="display: flex; align-items: center;">' .
               '<a href="/Zielseite-bei-klick-auf-den-Avatar/" style="margin-right: 10px;"><img src="' . esc_url($avatar_url) . '" alt="User Avatar" width="64" height="64" style="border-radius: 50%;" /></a>' . // Hier wurde `border-radius` hinzugefügt.
               '<div style="display: flex; flex-direction: column; align-items: start; line-height: 1.2;">' .
               'Hallo<br>' . esc_html($user_name) . '<br><a href="' . esc_url($logout_url) . '">Abmelden</a>' .
               '</div></div>';
    } else {
        // Optionale Nachricht für nicht angemeldete Benutzer. Du kannst diese Zeile auch entfernen, wenn du nichts anzeigen möchtest.
        return 'Bitte melden Sie sich an.';
    }
}
add_shortcode('fastwp_avatar', 'greeting_with_avatar_shortcode');
Code-Sprache: PHP (php)

Was genau macht dieses Snippet?

Grundsätzlich prüft es ob der User eingeloggt ist. Wenn dieser eingeloggt ist, wird der Vorname und falls vergeben der Avatar (Gravatar) gezogen.

Wenn kein Bild vorhanden ist, kannst du auch einen Pfad zu einem Dummy Bild vergeben, so dass zumindest etwas angezeigt wird.

Generiert wird dann ein Shortcode [fastwp-avatar] den du an beliebigen Stellen in deiner WordPress Seite einbauen kannst.

Z.b. im Header.

WordPress Avatar Plugin

Ich habe zwar 1,2 Plugins gefunden die sich diesem Thema ganz minimalistisch annehmen, beide haben bei meinem Test aber nicht funktioniert.

avatar plugin settings

Daher findet ihr hier eine einfache Version des Avatar Shortcodes als WordPress Plugin zum download.

Ihr könnt hier die Begrüßung und die Anzeige des Vor- und, oder Nachnamens auswählen, sowie noch ein paar andere kleine Settings.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian