Hur man ändrar Gravatar-bildens storlek i WordPress

Om du vill ändra storlek på Gravatar-bilderna på din WordPress-webbplats, är du på rätt plats. Det har förekommit tillfällen då vi var tvungna att ändra storlek på anpassade Gravatar-storlekar på WordPress-webbplatser vi arbetade med, men metoden skiljer sig beroende på vilket tema du använder.

En Gravatar är en bild som används för att representera en kommentator eller blogginläggsförfattare. WordPress-teman visar Gravatars i en fast storlek, men du kanske föredrar att göra dem mindre eller större för att bättre passa din webbplatsdesign.

I den här artikeln visar vi hur du ändrar storleken på Gravatar-bilder i WordPress.

Varför ändra storleken på Gravatar-bilden i WordPress?

Gravatar står för Globally Recognized Avatar. Det är en webbtjänst som låter dig skapa en profil och associera avatarbilder med din e-postadress.

De flesta WordPress-teman visar en Gravatar bredvid användarens kommentar. Vissa teman visar också en Gravatar i författarens bio-ruta.

Även om en användare inte har ett Gravatar-konto, kommer din webbplats fortfarande att visa en av standard-WordPress-Gravatarerna.

Ibland vill du kanske ändra storleken på ditt temas Gravatars. Du kanske till exempel vill göra dem större så att de sticker ut och drar besökarens uppmärksamhet till din webbplatsens kommentarsfält.

Med det sagt, låt oss ta en titt på hur du kan ändra storleken på din anpassade Gravatar-bild på din WordPress-webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa till den metod du vill använda:

• Metod 1: Ändra Gravatar-storlek med Full Site Editor (endast blockteman)
• Metod 2: Ändra Gravatar-storlek genom att redigera comments.php (Alla teman)
• Metod 3: Ändra Gravatar-storlek genom att redigera style.css (Alla teman)
• Method 4: Change Gravatar Size for Author Bios With Code

Metod 1: Ändra Gravatar-storlek med Full Site Editor (endast blockteman)

Om du använder ett blockbaserat tema som Twenty Twenty-Five, kan du ändra standard-WordPress Gravatar-storleken med hjälp av redigeraren för hela webbplatsen.

Den här metoden fungerar inte med alla teman, så om du inte använder ett blockaktiverat tema rekommenderar vi att du använder metod 2 istället.

I WordPress-instrumentpanelen, gå till Utseende » Redigerare.

Du kommer nu till redigeraren för hela webbplatsen och ser flera inställningar för att redigera olika delar av din WordPress-webbplats.

För att ändra standardstorleken på avataren för dina WordPress-kommentarer, klicka på sökikonen högst upp på den vänstra panelen.

Vid det här laget, leta bara efter kommentarsmallsdelen.

Klicka på den när du har hittat den.

På nästa sida ser du information om malldelen för kommentarer.

För att redigera kommentar-mallens del, klicka på pennknappen. Du kommer sedan att dirigeras till redigeringsgränssnittet.

Du kan nu fortsätta och klicka på någon av Gravatar-bilderna i förhandsgranskningen.

I menyn till höger kan du välja fliken 'Block' om den inte redan är vald.

Du kan nu göra Gravatars större eller mindre genom att dra i reglaget 'Bildstorlek'.

När du flyttar reglaget kommer alla Gravatarer att uppdateras automatiskt, så du kan prova olika storlekar för att se vad som ser bäst ut.

Dessutom kan du gärna aktivera inställningen 'Länka till användarprofil'. När en användare klickar på Gravatar-bilden kommer de att dirigeras till kommentatorns profilsida på din webbplats.

När du är nöjd med den nya standardstorleken för Gravatar-bilden, klicka på knappen 'Spara'.

Nu, om du besöker någon kommentarsavdelning på din WordPress-webbplats, kommer du att se ändringarna live.

Metod 2: Ändra Gravatar-storlek genom att redigera comments.php (Alla teman)

Om du inte använder ett blockbaserat WordPress-tema, kan du ändra storleken på Gravatar-profilbilden för WordPress-kommentarer genom att redigera ditt temas kod.

Den här metoden kräver att du redigerar temafiler, så det är inte det mest nybörjarvänliga alternativet. Den här metoden bör dock fungera för de flesta WordPress-teman.

Först måste du ansluta till din WordPress-webbplats med en FTP-klient som FileZilla, eller så kan du använda filhanteraren i din WordPress-värd cPanel.

Om detta är första gången du använder FTP, kan du se vår kompletta guide om hur du ansluter till din webbplats med FTP.

När du är ansluten måste du gå till /wp-content/themes/ och öppna mappen för ditt nuvarande WordPress-tema.

När du är här, öppna filen comments.php och leta efter en wp_list_comments-funktion. Inne i denna funktion hittar duavatar_size, som ställer in storleken på Gravatar.

Här är ett exempel på hur detta kan se ut:

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

Du kan helt enkelt ändra avatar_size till den storlek du vill använda. I kodavsnittet ovan skulle detta innebära att ändra 60 till ett annat nummer.

Gravatars är fyrkantiga, så WordPress kommer att använda samma värde för bildens bredd och höjd. Detta innebär att du bara behöver skriva in en siffra.

Efter att ha gjort denna ändring, se till att spara och ladda upp filen tillbaka till ditt WordPress-värdkonto. När du är klar kan du besöka din WordPress-blogg för att se ändringen i praktiken.

Om Gravatar-bilden inte har ändrats, kan det bero på cachen. För att lära dig mer, se vår guide om hur man fixar att WordPress inte uppdateras direkt.

Om Gravatar fortfarande inte ändras, kan ditt temas CSS åsidosätta inställningarna i comments.php-filen. I så fall behöver du prova nästa metod.

Metod 3: Ändra Gravatar-storlek genom att redigera style.css (Alla teman)

För att se om ditt temas CSS åsidosätter din comment.php-fil kan du använda din webbläsares Inspektera-verktyg. Stegen varierar beroende på vilken webbläsare du använder, men i Chrome kan du helt enkelt högerklicka eller Ctrl-klicka på Gravatar och sedan välja 'Inspektera'.

Detta visar sidans HTML- och CSS-kod i en ny panel.

I den här koden behöver du fokusera på den nedre panelen och leta efter CSS-klassen eller klasserna för kommentarsförfattarens avatar.

I vårt exempel var de .comment-author och .avatar, och de innehåller CSS-egenskaper för Gravatars höjd- och breddvärden. Vi vet detta eftersom när vi för muspekaren över CSS-kodavsnitten, markeras Gravatar i förhandsgranskningen.

Här är hur koden ser ut i vårt tema. Notera att den kan se annorlunda ut i ditt:

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

Om Gravatar-storleken i CSS-koden skiljer sig från vad du angav i comments.php-filen, betyder det att ditt temas style.css-fil åsidosätter dina ändringar.

För att redigera din style.css-fil behöver du använda WPCode, som är ett plugin för kodutdrag som gör det enkelt att infoga anpassad kod i ditt tema. Med detta kan du redigera din style.css-fil utan att komma åt den direkt, vilket minskar risken för fel.

Du måste också hålla fliken där du har inspektionsverktyget öppet. Detta är så att du kan kopiera och klistra in CSS-koden för din kommentar-författares Gravatar till WPCode och redigera den senare.

Installera först WPCode på din WordPress-webbplats. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.

Gå sedan till Kodavsnitt » + Lägg till avsnitt och välj 'Lägg till din anpassade kod (nytt avsnitt)'. Klicka på knappen '+ Lägg till anpassat avsnitt'.

När du är klar, skriv in ett namn för din nya CSS-kod. Det kan vara något så enkelt som 'Ändra Gravatar-storlek'.

När det gäller kodtyp, välj 'CSS-utdrag'.

Kopiera och klistra nu in dina ursprungliga CSS-kodavsnitt från temat för Gravatar-storleken i rutan 'Kodförhandsgranskning'.

När du är klar kan du ändra höjd- och breddvärdena i koden. I vårt exempel ändrade vi det till 50px. Se till att höjd- och breddstorlekarna är desamma.

När du är klar, scrolla ner till avsnittet Infoga.

Se till att metoden 'Auto Insert' är vald. När det gäller plats, välj bara 'Site Wide Footer' så att din anpassade CSS kan åsidosätta den befintliga CSS-koden.

Klicka sedan helt enkelt på omkopplaren i det övre högra hörnet för att göra koden 'Aktiv' och klicka på 'Spara kodavsnitt'. Om du besöker din WordPress-blogg eller webbplats kommer du att se dina uppdaterade Gravatar-bilder.

Nu rekommenderar vi att du försöker ändra Gravatar-storleken i comments.php-filen innan du använder den enklare CSS-metoden.

För det första kan CSS ibland göra att Gravatars ser suddiga ut, särskilt om du gör avatarerna mycket större än originalbilden.

För det andra hjälper det ofta att ändra bildstorleken i comments.php din webbplats att laddas snabbare. Detta beror på att webbläsaren fortfarande måste ladda ner hela bilden och sedan använda CSS för att ändra storlek på den för visning. Detta kan leda till långsammare webbplatsprestanda.

Metod 4: Ändra Gravatar-storlek för författarbiografier med kod

Om du driver en WordPress-webbplats med flera författare, kan en författarlåda hjälpa läsarna att lära sig mer om inläggets författare.

Om du vill lägga till den här funktionen på din webbplats, kolla in vår guide om hur man lägger till en författarinformationsruta i WordPress-inlägg.

Många författarbiografier visar författarens Gravatar tillsammans med deras biografi. För att ändra standardstorleken på Gravatar i dina författarbiografilådor måste du hitta temafilen som lägger till biografin.

Anslut helt enkelt till din webbplats med en FTP-klient som FileZilla eller filhanteraren för din WordPress-hosting. När du är ansluten, gå till /wp-content/themes/ och öppna mappen för ditt nuvarande WordPress-tema.

Därefter måste du öppna mappen template-parts.

Du behöver nu hitta filen som innehåller koden get_avatar . Du hittar ofta den här koden i en mallfil som heter author-bio.php, single.php-filen, functions.php-filen eller liknande.

Här är ett exempel på hur den här koden kan se ut:

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

I utdraget ovan kan du helt enkelt ändra siffran 85 till den storlek du vill använda.

I andra teman kan koden se ut så här:

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

Du kan helt enkelt ersätta siffran med det värde du vill använda för att göra Gravataren större eller mindre.

Efter att ha ändrat storleken, glöm inte att spara dina ändringar. Du kan sedan besöka din webbplats för att se den nya författarbiolådan i aktion.

Om Gravatars inte har ändrats, måste du söka efter avatar-klassen i filen style.css genom att följa samma process som beskrivs i Metod 3. När du hittar den här klassen kan du skapa ett nytt WPCode-utdrag och skriva in de nya värdena för Gravatars höjd och bredd.

Lär dig fler sätt att förbättra din kommentarssektion

Vill du ta dina WordPress-kommentarer till nästa nivå? Kolla in dessa guider för att anpassa din kommentarssektion:

• Hur man begränsar kommentarslängden i WordPress (enkel handledning)
• Hur man ändrar texten "Svara" i WordPress-kommentarer
• Hur du låter dina användare prenumerera på kommentarer i WordPress
• Hur man paginerar kommentarer i WordPress (steg för steg)
• Hur man tillåter användare att gilla eller ogilla kommentarer i WordPress
• Hur man tar bort fältet för webbplats-URL från WordPress kommentarsformulär

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du ändrar Gravatar-bildens storlek i WordPress. Du kanske också vill lära dig hur du stylar WordPress-kommentarsformuläret eller kolla in vår lista över de bästa WordPress-kommentarpluginsen.

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.