Hur man visar Gravatar från användarens e-post i WordPress

Gravatar är en webbtjänst som kopplar en användares e-postadress till en online-avatar.

WordPress visar automatiskt besökares Gravatars i kommentarsavsnittet, men du kanske vill lägga till dem även i andra delar av din webbplats. Detta kan bidra till att skapa en mer visuellt tilltalande användarupplevelse och öka engagemanget.

I den här artikeln visar vi hur du enkelt kan visa en Gravatar från användarens e-postadress i WordPress genom att utforska olika metoder för att ge dig flexibla alternativ.

Vad är Gravatar och varför visa det?

Gravatar står för Globally Recognized Avatar och låter folk koppla en bild till sin e-postadress.

Om en webbplats stöder Gravatar kan den hämta personens bild och visa den bredvid deras namn. Till exempel, när en användare lämnar en kommentar med sin e-postadress på en WordPress-webbplats, kommer WordPress att visa personens Gravatar bredvid deras kommentar.

Gravatars kan uppmuntra användare att delta i konversationen, bygga en känsla av gemenskap och göra dina sidor mer intressanta. Allt detta tillsammans kan hjälpa dig att få fler kommentarer på dina WordPress-inlägg.

Beroende på hur din webbplats är konfigurerad kan WordPress visa Gravatars på andra platser, som till exempel författarens biografi. Du kanske dock vill ändra var användarnas Gravatars visas på din WordPress-blogg eller webbplats. Du kan till exempel visa användarens Gravatar i din webbplats verktygsfält eller användarprofil.

Med det sagt, låt oss titta på hur du kan visa Gravatar från en användares e-post i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa till den metod du föredrar:

• Metod 1: Redigera ditt WordPress-tema (Bäst för konsekvens)
• Metod 2: Använda en anpassad WordPress-kortkod (helt anpassningsbar)
• Bonus: Ladda Gravatarer lat i WordPress-kommentarer

Metod 1: Redigera ditt WordPress-tema (Bäst för konsekvens)

Först kan du lägga till en Gravatar till ditt WordPress-tema med kod. Detta är ett bra val om du vill visa en Gravatar på samma plats över hela din webbplats, till exempel i sidofältet eller ovanför sidhuvudet. Du måste dock redigera dina mallfiler, så det är inte den mest nybörjarvänliga metoden.

Den här metoden visar Gravatar för den person som för närvarande är inloggad på din webbplats. Detta är användbart för medlemskapswebbplatser, onlinebutiker eller andra webbplatser där användaren måste logga in på ett konto.

För att lägga till en Gravatar i ditt tema behöver du klistra in lite kod i dina temafiler. Om du inte har gjort det tidigare, ta en titt på vår nybörjarguide för att klistra in kodavsnitt från webben i WordPress.

Det enklaste sättet att lägga till kodavsnitt på din WordPress-webbplats är att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress som låter dig lägga till PHP, CSS, JavaScript och mer på din webbplats.

Först måste du installera och aktivera gratis WPCode-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan Kodavsnitt » + Lägg till avsnitt» i WordPress-instrumentpanelen. Här ser du alla färdiga avsnitt som WPCode kan lägga till på din webbplats.

Håll bara muspekaren över ‘Lägg till din anpassade kod (nytt kodavsnitt)’ och klicka på knappen ‘Använd kodavsnitt’ när den visas.

För att börja, skriv in en titel för kodavsnittet. Detta är bara för din referens, så du kan använda vad du vill.

Öppna sedan rullgardinsmenyn 'Kodtyp' och välj 'PHP-utdrag'.

Du kan nu fortsätta och klistra in följande i kodredigeraren:

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;
	
} 

Denna kod skapar en enkel funktion som låter dig lägga till en Gravatar var som helst i dina WordPress-mallfiler.

Efter att ha klistrat in koden, scrolla till avsnittet 'Insertion' och välj 'Auto Insert'. Du kommer också att behöva öppna rullgardinsmenyn 'Location' och välja 'Run Everywhere'.

När det är klart, scrolla till toppen av sidan och klicka på omkopplaren ‘Inaktiv’ så att den visar ‘Aktiv’ istället.

Klicka sedan helt enkelt på knappen 'Spara kodsnutt'.

Nu kan du visa användarens Gravatar var som helst på din WordPress-webbplats med följande funktion:

<?php wpbeginner_display_gravatar(); ?>

Lägg helt enkelt till den här funktionen i rätt mallfil. Om du till exempel vill visa användarens Gravatar i din webbplats sidhuvud, redigerar du vanligtvis filen header.php.

Dock kan detta variera beroende på ditt WordPress-tema. För att hjälpa dig att hitta rätt mallfil för dina behov, ta en titt på vårt fuskblad för WordPress mallhierarki.

Metod 2: Använda en anpassad WordPress-kortkod (helt anpassningsbar)

Du kan också lägga till en Gravatar på valfri sida, inlägg eller widget-redo område genom att skapa en anpassad kortkod.

Detta är ett bra val om du vill styra exakt var Gravatars visas på varje sida eller om du vill visa dessa bilder på olika platser på din webbplats.

Precis som metod 1 kommer detta tillvägagångssätt att visa den aktuella användarens Gravatar. Om du föredrar det kan du visa Gravataren som är kopplad till en specifik e-postadress genom att göra en enkel ändring i koden.

Detta är användbart om du har en persons e-postadress och vill visa deras Gravatar på din webbplats, men de inte är en registrerad användare.

Det enklaste sättet att skapa anpassade kortkoder är att använda WPCode. Ännu bättre, du behöver inte redigera dina temafiler, vilket gör detta till en mycket mer nybörjarvänlig metod.

Om du inte redan har gjort det, måste du installera WPCode. Du måste också skapa ett nytt anpassat kodavsnitt genom att följa samma process som beskrivs ovan.

När det är gjort, ge kodsnutten ett namn och välj ‘PHP Snippet’ som kodtyp.

Klistra sedan in följande PHP i kodredigeraren:

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');

Den här koden skapar en [wpb_gravatar]kortkod som du kan lägga till på vilken sida, inlägg eller widget-redo område som helst.

När du är redo, scrolla till avsnittet ‘Infogning’ och se till att ‘Auto Insert’ är valt. Du måste också öppna rullgardinsmenyn ‘Plats’ och välja ‘Kör överallt’ om det inte redan är valt.

Slutligen, skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv' så att den visar 'Aktiv' istället. Du kan sedan klicka på 'Spara kodavsnitt' för att göra din kod live.

Du kan nu visa användarens Gravatar på vilken sida, inlägg eller widget-redo område som helst med hjälp av följande kortkod:

[wpb_gravatar]

För mer information om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

Om du vill visa gravataren för en specifik användare kan du helt enkelt lägga till deras e-postadress i kortkoden:

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

Om du inte är nöjd med hur Gravatar ser ut, kan du styla den med anpassad CSS. Du kan till exempel lägga till följande CSS-kodavsnitt i din WordPress-temas stilmall:

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

För mer information om att lägga till CSS i WordPress, se vår guide om hur du enkelt lägger till anpassad CSS på din WordPress-webbplats.

Om du föredrar det kan du lägga till anpassad CSS med hjälp av WordPress Customizer. I instrumentpanelen går du helt enkelt till Utseende » Anpassa.

Klicka på ‘Ytterligare CSS’ i menyn till vänster.

Du kan sedan klistra in den anpassade CSS:en i den lilla kodredigeraren.

När det är klart, klickar du helt enkelt på ‘Publicera’.

Nu om du besöker din webbplats kommer du att se din Gravatar med den nya stilen.

För ännu fler tips om hur du anpassar Gravatars på din webbplats, se vår guide om hur man ändrar Gravatar-bildstorleken i WordPress.

Hur man lägger till en anpassad kortkod med hjälp av redigeraren för hela webbplatsen

Om du använder ett av de nyare blockbaserade teman, kan du lägga till kortkoden i vilken mall eller mallkomponent som helst. Detta gör att du kan visa användarens Gravatar över hela din webbplats utan att behöva redigera mallfilerna.

Till exempel kan du lägga till kortkoden i din webbplats mall för blogginlägg eller mall för sidhuvud.

För att komma igång, gå till Utseende » Redigerare i WordPress-instrumentpanelen.

Som standard visar redigeraren för hela webbplatsen din temas hemmamall, men du kan lägga till kortkoder till vilken mall eller mallkomponent som helst, till exempel sidhuvudet eller sidfoten.

För att se alla tillgängliga alternativ, välj antingen 'Malar' eller 'Mall-delar'.

Du kan nu klicka på mallen eller malldelen du vill redigera.

Som ett exempel kommer vi att lägga till kortkoden till 404-sidmall, men stegen kommer att vara exakt desamma oavsett vilken mall du väljer.

WordPress kommer nu att visa en förhandsgranskning av mallen eller malldelen.

För att lägga till kortkoden, klicka på den lilla pennikonen.

När det är klart, klicka på det blå ikonen '+' i det övre vänstra hörnet.

I sökfältet, skriv in 'Shortcode'.

När rätt block visas, dra och släpp det på temamallen.

Du kan nu antingen klistra in eller skriva [wpb_gravatar] kortkoden i det här blocket.

Klicka sedan på knappen ‘Spara’.

Besök nu helt enkelt din WordPress-blogg för att se Gravatar i aktion.

Bonus: Ladda Gravatarer lat i WordPress-kommentarer

När du har lagt till Gravatars på flera platser på din webbplats är det en bra idé att ladda dessa Gravatars lat i WordPress-kommentarer.

Detta beror på att de flesta Gravatar visas i kommentarsavsnittet och kan sakta ner din webbplats hastighet, särskilt på artiklar med många kommentarer.

För att ladda Gravatars lat, installera och aktivera pluginet a3 Lazy Load. För detaljer, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Inställningar » a3 Lazy Load från WordPress-instrumentpanelen och expandera fliken ‘Lazy Load Images’.

Växla sedan helt enkelt omkopplaren bredvid alternativet 'Gravatars' till 'På'. Klicka sedan på knappen 'Spara ändringar' för att lagra dina inställningar.

Nu kommer alla Gravatars i dina författarbiografier och kommentarer att laddas lat för att öka webbplatsens prestanda. För fler instruktioner, se vår handledning om hur man laddar Gravatars lat i WordPress-kommentarer.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar Gravatar från användares e-postmeddelanden på din WordPress-webbplats. Du kanske också vill se vår handledning om hur man meddelar användare när deras kommentar har godkänts i WordPress och vår guide om hur man lägger till snabbtaggar i WordPress-kommentarformulär.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.