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

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

WordPress visar automatiskt besökares Gravatarer i kommentarsfältet, men du kanske vill lägga till dem på andra områden på din webbplats också. 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.

Gravatarer 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, till exempel i 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 e-postadress 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)

Först kan du lägga till en Gravatar i 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 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 måste 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 det kostnadsfria 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 kodavsnitt som WPCode kan lägga till på din webbplats.

Håll helt enkelt musen över "Lägg till din anpassade kod (nytt avsnitt)" och klicka på knappen "Använd avsnitt" när den visas.

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

Därefter, öppna rullgardinsmenyn "Kodtyp" och välj "PHP-avsnitt".

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

Den här koden 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 sektionen "Infogning" och välj "Automatisk infogning". Du måste också öppna rullgardinsmenyn "Plats" och välja "Kör överallt".

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

Klicka sedan helt enkelt på knappen "Spara avsnitt".

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

<?php wpbeginner_display_gravatar(); ?>

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

Detta kan dock 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 (Fullständigt 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 Gravatar visas på varje sida eller om du vill visa dessa bilder på olika platser på din webbplats.

Precis som metod 1 visar detta tillvägagångssätt den aktuella användarens Gravatar. Om du föredrar det kan du visa Gravatar 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 kodavsnittet 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å valfri sida, inlägg eller widget-redo område.

När du är redo, scrolla till avsnittet 'Insertion' och se till att 'Auto Insert' är valt. Du måste också öppna rullgardinsmenyn 'Location' och välja 'Run Everywhere' om det inte redan är valt.

Slutligen, scrolla till toppen av skärmen och klicka på 'Inactive'-växlingsknappen så att den visar 'Active' istället. Du kan sedan klicka på 'Save Snippet' för att göra din kod live.

Du kan nu visa användarens Gravatar på valfri sida, inlägg eller widget-redo område 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 Gravatar 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 hur du lägger 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 WordPress Customizer. Gå helt enkelt till Utseende » Anpassa i instrumentpanelen.

I menyn till vänster klickar du på ‘Ytterligare CSS.’

Du kan sedan klistra in den anpassade CSS-koden i den lilla kodredigeraren.

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

Om du nu 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 du ändrar Gravatar-bildens storlek i WordPress.

Hur man lägger till en anpassad kortkod med hjälp av Full Site Editor

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

Du kan till exempel lägga till kortkoden i din webbplats bloggmall eller sidhuvudmall.

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

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

För att se alla tillgängliga alternativ, välj antingen ‘Mallar’ eller ‘Mall-delar’.

Du kan nu klicka på den mall eller mall-del du vill redigera.

Som ett exempel kommer vi att lägga till kortkoden i 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 mall-delen.

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

När det är gjort, klicka på den blå ‘+’-ikonen i det övre vänstra hörnet.

I sökfältet, skriv ‘Kortkod’.

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

Du kan nu antingen klistra in eller skriva kortkoden [wpb_gravatar] i detta block.

Efter det, klicka på knappen ‘Spara’.

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

Bonus: Ladda Gravatars "lat" i WordPress-kommentarer

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

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

För att lazy load Gravatars, 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 instrumentpanel 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 spara 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 latladdar Gravatars 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 snabbkoder i WordPress-kommentarformulär.

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