Är du frustrerad över hur bilderna ser ut på din WordPress-webbplats? Kanske dina utvalda bilder visas suddiga och pixliga, eller så är de så stora att dina sidor laddas långsamt.
Vi har sett detta hända på många olika WordPress-sajter, och det är ett av de vanligaste problemen användare stöter på. Här är varför: WordPress standardbildstorlekar fungerar inte alltid för alla sajter.
De goda nyheterna är att skapa anpassade bildstorlekar är enklare än du kanske tror. Det kan få din webbplats att se skarpare ut och hjälpa dina sidor att laddas snabbare.
I den här guiden får du lära dig hur du skapar ytterligare bildstorlekar i WordPress. Med bara några få steg får du optimerade bilder som förbättrar din webbplats design och prestanda.
Varför skapa ytterligare bildstorlekar i WordPress?
Du kan behöva skapa extra bildstorlekar om de som WordPress eller ditt tema genererar inte uppfyller dina behov.
De flesta populära teman och plugins skapar automatiskt sina egna bildstorlekar för saker som miniatyrbilder eller anpassade layouter. Men dessa inbyggda storlekar kan fortfarande vara otillräckliga i vissa fall.
Till exempel kanske du skapar ett barntema, konfigurerar en rutnätslayout eller optimerar bilder för en specifik del av din webbplats.
Det är där anpassade bildstorlekar kommer in. De låter dig generera exakt de dimensioner du vill ha och använda dem där de passar bäst.
Med det i åtanke kommer vi att visa dig hur du skapar ytterligare bildstorlekar i WordPress.
Här är en snabb översikt över alla tips vi kommer att gå igenom i den här artikeln:
- Registering Additional Image Sizes for your Theme
- Visa ytterligare bildstorlekar i ditt WordPress-tema
- Generera om ytterligare bildstorlekar
- Aktivera ytterligare bildstorlekar för ditt inläggsinnehåll
- Bonustips: Åtgärda problemet med bilduppladdning i WordPress
- Vanliga frågor: Skapa ytterligare bildstorlekar i WordPress
- Hjälpsamma guider för att använda bilder i WordPress
Redo? Låt oss börja!
Registrera ytterligare bildstorlekar för ditt tema
De flesta WordPress-teman stöder miniatyrbilder, även kända som inläggstumnaglar.
Men om du skapar ett anpassat WordPress-tema, måste du lägga till stöd för miniatyrbilder.
De flesta WordPress-experter kan rekommendera att lägga till följande anpassade kodavsnitt i din temas functions.php-fil.
add_theme_support( 'post-thumbnails' );
Men, det är inte helt nybörjarvänligt, eftersom du riskerar att förstöra din webbplats med bara ett litet misstag. Istället rekommenderar vi att du lägger till anpassade kodavsnitt med WPCode istället.
WPCode är ett kraftfullt plugin för kodavsnitt som förenklar tillägget av anpassad kod till WordPress, använt av över 2 miljoner webbplatsägare. Det kör avsnitt som om de vore i dina temafiler, vilket gör anpassningar framtidssäkra och lätta att hantera, även för nybörjare.
✏️ Notera: Många av våra varumärkespartners förlitar sig på WPCode för att lägga till anpassade kodavsnitt på sina webbplatser. Vi har sett från första hand hur enkelt men kraftfullt det är, vilket är anledningen till att vi starkt rekommenderar det. Vill du veta mer? Kolla in vår fullständiga WPCode-recension.
De goda nyheterna är att WPCode gratisversion låter dig lägga till dina egna kodavsnitt. Så, låt oss installera och aktivera pluginet. Om du behöver hjälp kan du se steg-för-steg-instruktionerna i vår guide om hur man installerar ett WordPress-plugin.
Efter aktivering kan du navigera till Kodavsnitt » + Lägg till avsnitt från din WordPress-instrumentpanel. Klicka sedan på knappen 'Lägg till din anpassade kod (nytt avsnitt)'.
På nästa skärm kommer du att namnge ditt anpassade kodavsnitt. Du kan till exempel namnge detta 'Stöd för inläggsbilder'.
Sedan kan du kopiera och klistra in denna kod i området 'Kodförhandsgranskning':
add_theme_support( 'post-thumbnails' );
Här är hur det kan se ut i redigeraren:
Därefter, låt oss se till att du ändrar kodtypen till 'PHP-utdrag'.
Därefter kan du växla omkopplaren från 'Inaktiv' till 'Aktiv' och klicka på 'Spara avsnitt'.
När du har lagt till stöd för anpassad kod för miniatyrbilder kan du registrera ytterligare bildstorlekar med funktionen add_image_size().
Låt oss återigen öppna WPCode-redigeraren för anpassad kod genom att gå till Kodavsnitt » + Lägg till avsnitt. Därefter väljer vi knappen 'Lägg till din anpassade kod (nytt avsnitt)'.
Därefter kan du namnge detta kodavsnitt 'Ytterligare bildstorlekar'.
Sedan, i kodredigeraren, använder du funktionen add_image_size i följande format:
add_image_size( 'name-of-size', width, height, crop mode );
Här är några exempel på hur hela funktionen kan se ut:
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
I exemplet med obegränsad höjd använder vi ett mycket stort tal som 9999 för höjden. Detta talar om för WordPress att inte begränsa bildens höjd, så den kan vara så hög som behövs samtidigt som bredden hålls fast.
Som du kan se använder varje exempel ett annat läge: hård beskärning, mjuk beskärning och obegränsad höjd. Du kan välja det som bäst passar dina behov.
Så här ser det ut i kodredigeraren:
Glöm inte att ändra kodtypen till 'PHP', växla från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara'.
Med det i åtanke, låt oss titta på hur du kan använda varje läge på din egen WordPress-blogg eller webbplats.
1. Hårt beskärningsläge
I exemplet ovan använde vi ett 'true'-värde efter höjden. Detta talar om för WordPress att beskära bilden till den exakta storlek vi definierade, vilket i det här fallet är 120px x 120px.
Den här funktionen kommer automatiskt att beskära bilden antingen från sidorna eller från toppen och botten, beroende på dess storlek. På så sätt kan du se till att alla dina bilder är i proportion och ser bra ut på din WordPress-webbplats.
2. Mjuk beskärningsläge
Som du kan se i vårt exempel på mjuk beskärning har vi inte lagt till ett 'sant' värde efter höjden:
add_image_size( 'homepage-thumb', 220, 180 );
Detta beror på att mjuk beskärningsläge är aktiverat som standard.
Mjuk beskärning ändrar storleken på bilden för att passa inom de dimensioner du ställer in, samtidigt som de ursprungliga proportionerna bibehålls. Detta innebär att den inte förvränger eller skär bort någon del av din bild.
Beroende på originalbildens form kan den slutliga versionen matcha bredden men vara kortare, eller matcha höjden och vara smalare, vilket säkerställer att den aldrig blir utsträckt.
Här är ett exempel på hur detta kan se ut:
3. Obegränsat höjdläge
Ibland kan du ha långa bilder som du vill använda på din webbplats samtidigt som du begränsar deras bredd. Du kan till exempel ha skapat en infografik för din företagswebbplats. Infografik tenderar att vara mycket lång och vanligtvis bredare än innehållets bredd.
Läge för obegränsad höjd låter dig ange en bredd som inte bryter din layout utan att begränsa höjden.
Visa ytterligare bildstorlekar i ditt WordPress-tema
När du har lagt till fler bildstorlekar på din webbplats är det dags att visa dem i ditt WordPress-tema.
Nu, om du bygger eller anpassar ditt eget tema och är bekväm med att redigera kod, kan du visa dessa nya bildstorlekar direkt i dina temafiler.
✏️ Notera: Detta är ett avancerat steg, och vi rekommenderar inte att du redigerar dina temafiler direkt om du inte vet vad du gör. Ett litet misstag kan förstöra din webbplats. Det är alltid bästa praxis att använda ett barntema för anpassningar som denna.
För att göra detta kan du öppna temafilen där du vill visa bilden (som single.php eller archive.php) och lägga till följande kod inuti inläggsloopen:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Du kanske vill lägga till lite stil så att bilden passar perfekt med resten av din webbplats. Detta är dock allt du behöver för att visa ytterligare bildstorlekar i ditt tema.
Generera om ytterligare bildstorlekar
Funktionen add_image_size() skapar endast ytterligare storlekar när du laddar upp en ny bild. Detta innebär att alla bilder du laddar upp innan du skapar funktionen add_image_size() inte kommer att ha de nya storlekarna.
För att åtgärda detta problem måste du generera om miniatyrbilder för din WordPress-webbplats med hjälp av Perfect Images. Detta plugin kommer också att generera om dina utvalda bilder och retina-bilder samt uppdatera din medie-metadata.
Först måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.
Vid aktivering kan du gå till Media » Perfect Images.
Perfect Images kommer nu att skanna ditt WordPress-mediebibliotek, så du kan behöva vänta några ögonblick tills det är klart.
När det är klart vill du öppna rullgardinsmenyn som som standard visar 'Massåtgärder' och sedan välja 'Återskapa alla poster'.
Perfect Images kommer nu att generera om alla dina miniatyrbilder.
För mer information om detta ämne, se vår artikel om hur du genererar om nya bildstorlekar.
Aktivera ytterligare bildstorlekar för ditt inläggsinnehåll
Även om du har lagt till några nya bildstorlekar, kan du bara använda dem i WordPress-temat och inte i inläggsinnehållet.
För att göra dessa nya storlekar tillgängliga i WordPress innehållsredigerare måste du registrera följande kod i WPCode:
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
'homepage-thumb' => 'Homepage Thumbnail',
'singlepost-thumb' => 'Infographic Single Post'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );
Upprepa helt enkelt samma process för att lägga till den anpassade kodsnutten vi delade. Glöm sedan inte att aktivera och spara kodsnutten efter att ha lagt till koden.
Nu, när du laddar upp en bild till WordPress, kommer du att se alla anpassade storlekar under 'Bildstorlek'. Du kan nu ändra bildstorleken när du arbetar med en sida eller ett inlägg.
Bonustips: Åtgärda problemet med bilduppladdning i WordPress
Nu när du vet hur du skapar och hanterar anpassade bildstorlekar, låt oss beröra ett annat vanligt problem som många WordPress-användare står inför: problem med att ladda upp bilder.
Om du någonsin har sett ett felmeddelande när du försöker lägga till en bild på din webbplats, oroa dig inte. Detta är vanligt och kan bero på några olika anledningar.
Först och främst hanterar olika webbläsare uppladdningar på sitt eget sätt, så det som fungerar i en webbläsare kanske inte fungerar i en annan. Din webbplatsens cache kan också orsaka problem. Om den är inaktuell kan den störa uppladdningen, så att rensa den kan hjälpa.
✏️ Notera: På WPBeginner använder vi WP Rocket för att hantera cachning och snabba upp vår webbplats. Det gör att våra sidor laddas snabbt och hjälper till att undvika problem som detta. Du kan läsa vår fullständiga recension av WP Rocket för att lära dig mer.
Ibland kan plugins och teman också vara problemet.
Vissa plugins kan störa uppladdningsprocessen utan att du vet om det. Vissa teman är inte välkodade och kan orsaka konflikter när du försöker ladda upp bilder.
För felsökningstips kan du läsa vår guide om hur du åtgärdar problem med bilduppladdning i WordPress.
Vanliga frågor: Skapa ytterligare bildstorlekar i WordPress
Vilka är standardbildstorlekarna i WordPress?
Som standard skapar WordPress några olika storlekar varje gång du laddar upp en bild:
- Miniatyr – 150×150 pixlar (beskuren)
- Medium – upp till 300×300 pixlar
- Medium Large – upp till 768×768 pixlar
- Stor – upp till 1024×1024 pixlar
Dina WordPress-plugins eller tema kan också lägga till egna anpassade storlekar beroende på deras funktioner.
Kommer nya bildstorlekar att påverka mina gamla bilder?
Nej. Nya bildstorlekar gäller endast för bilder du laddar upp efter att storleken har skapats. Om du vill att dina befintliga bilder i ditt WordPress-mediotek ska inkludera de nya storlekarna måste du generera om miniatyrbilder med ett plugin som Perfect Images.
Hur vet jag vilka bildstorlekar jag ska skapa?
Det beror på ditt temas layout. Ett bra sätt att börja är att kontrollera de områden där du kommer att använda bilderna – som din huvudinnehållskolumn, sidofält eller sektioner i full bredd. Du kan högerklicka och använda din webbläsares Inspektera-verktyg för att se de exakta måtten för dessa områden.
Hjälpsamma guider för att använda bilder i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ytterligare bildstorlekar i WordPress.
Du kanske också vill se våra andra hjälpsamma guider om:
- Bästa WordPress-plugins för att hantera bilder
- WebP vs PNG vs JPEG: Bästa bildformatet för WordPress
- Hur man lägger till en bakgrundsbild i WordPress (enkla sätt)
- Hur man skapar ett bildgalleri i WordPress
- Hur man enkelt skapar en responsiv slider i WordPress
- Hur du lägger till bild-hover-effekter i WordPress
- How to Bulk Resize Large Images in WordPress
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.
Mrteesurez
Tack för att du tog upp ämnet att skapa ytterligare bildstorlekar. Det är en avgörande aspekt av att hantera en visuellt tilltalande och effektiv webbplats. Jag lärde mig detta den hårda vägen när jag först började designa en blogg. Initialt laddade jag upp bilder i full storlek utan att tänka på hur de skulle se ut i olika delar av webbplatsen. Detta saktade ner min webbplats avsevärt. När jag väl förstod hur man skapar anpassade bildstorlekar kunde jag optimera bilder för olika layouter utan att offra kvalitet. Det förbättrade inte bara webbplatsens hastighet utan säkerställde också att bilder visades perfekt på alla enheter.
Jag tror att för alla som hanterar en medieintensiv webbplats kommer att behärska denna process att vara mycket hjälpsam för webbplatsens prestanda. Bra jobbat WPbeginner!
Jiří Vaněk
Om jag får ge ett råd, fokusera inte enbart på bildstorlek om hastighet är din oro. Det är också viktigt att tänka på bildformatet. Jag anpassade mina bilder till olika storlekar enligt en artikel, vilket förbättrade min webbplats hastighet avsevärt, men det är också en bra idé att tänka på att konvertera bilder från PNG eller JPG till WebP. WebP är ett relativt modernt format som kan minska bildstorleken med upp till 90 % samtidigt som kvaliteten bibehålls. Det är där den verkliga magin sker när det gäller laddningshastighet. Dessutom finns det gratis WordPress-plugins som automatiskt kan konvertera dina befintliga bilder till WebP.
Jiří Vaněk
Tack för handledningen, jag försöker göra samma sak med en annan handledning men det fungerade inte. Det här fungerar perfekt.
axel
Det var enkelt, tack.
Something harder:
How do i get rid of old, unused thumbnail sizes?
(best without a plugin)
Med vänliga hälsningar
axel
WPBeginner Support
Vi förklarar hur du kan ta bort oanvända bildstorlekar i vår artikel nedan:
https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/
Vi rekommenderar plugins för att förenkla processen. Om du är orolig för antalet plugins på din webbplats, rekommenderar vi att du tittar på vår artikel nedan:
https://wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
B Toro
Mycket enkelt och hjälpsamt
WPBeginner Support
Glad our guide was helpful
Admin
JKLYN
Ganska hjälpsam handledning. Men hur ställer man in klass för bild??
Kim
Tack WPBeginner, det här fungerade utmärkt!
Thiago
Hej,
Bra artikel! Jag förstår dock fortfarande inte nyttan med verktyget för hård beskärning; jag laddade upp en bild med 306×165, och efter det skapade jag två anpassade storlekar: 256×148 (mjuk beskärning) och 256×148 (hård beskärning), men som du kan se i denna skärmdump från inlägget: [http://prnt.sc/eromp3] förblir båda alternativen desamma. Jag skapade en fil i Photoshop som innehöll 256×148 och drog in originalbilden utan att ändra storlek på något, och resultatet kan du se i exempel 4 av bilden ovan. Så, min fråga är denna: borde inte bild 2 se ut som bilden som genererats av Photoshop?
Nedan följer koden som används i functions.php:
//Soft Crop som används i exempel 2
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘new-size8’, 256, 148 );
}
add_filter(‘image_size_names_choose’, ‘my_image_sizes8’);
function my_image_sizes8($sizes) {
$addsizes = array(
“new-size8” => __( “Ny Storlek8”)
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}
////Hård beskärning använd i exempel 3
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘new-size9’, 256, 148, true, array( ‘center’, ‘center’ ) ); //(beskuren)
}
add_filter(‘image_size_names_choose’, ‘my_image_sizes9’);
function my_image_sizes9($sizes) {
$addsizes = array(
“new-size9” => __( “Ny Storlek9”)
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}
Tack på förhand!
Kevin
Detta fungerar utmärkt, men en sak som alltid stör mig är att om någon laddar upp en bild som är mindre än en av dina beskurna storlekar, så kommer den bilden inte att skapas, vilket förstör layouten om du ville ha bilder med lika höjd.
Matt Rock
Kämpar med samma problem, Kevin (uppladdning av mindre bild skapar inte beskuren storlek). Jag förstår varför detta kan vara vettigt (systemet kommer inte att producera onödiga bilder), men en låg/dålig upplösning skulle se bättre ut än en dåligt beskuren...
gonza
Tack för informationen
du hjälper mig så mycket!
Sakshi
Jag skriver den här koden kan.
Egentligen vill jag ställa in storleken på inläggsbilden för bannerbilden. Som jag laddade upp genom utvald bild i bakgrunden, vänligen ge mig förslag.
Aakash
Hej,
Jag är ny på wordpress, och förutom att jag har många problem, och det första är att jag har skapat många inlägg i wordpress, säg A B C D, och när jag uppdaterar detta på min webbplats ser de ut som att den första är D och sedan c och sedan b och sedan a, vilket betyder att när jag laddar upp visas de först sist. Om det finns någon lösning så att de först visas i serie, inte DCBA som ABCD... snälla hjälp
Daniel Knoflicek
Fantastiskt… så hjälpsamt för många galleriprogram…
Lavinia Manzanarez
Utmärkt! Jag läste om användningen av denna funktion i Codex för Wordpress men ibland behöver jag en steg-för-steg-guide, tack!
WPBeginner Staff
Ja, det är möjligt.
Bonde John
Jag vill också göra samma sak som Ali Rohan vill göra. Kan du vänligen utveckla det? Jag försökte implementera metoden du förklarade men lyckades inte. Jag förstår inte var jag gör fel. Hur länkar jag texten för upplösning till bildfilen?
Ali Rohan
Tack för en fin artikel.
Jag vill starta en bakgrundsbildswebbplats i WordPress, så är det möjligt att när jag laddar upp en stor bakgrundsbild så skalas den automatiskt till många upplösningar för användarna. Till exempel, när jag laddar upp en 1920×1280 bakgrundsbild, måste den skalas till 1024×768, 800×600 etc. upplösning... så att användarna enkelt kan se och ladda ner bakgrundsbilder i önskad storlek?
Aayush
Hej kära. Jag behöver din hjälp snarast. Jag har ett problem med bildstorleken. Jag använder faktiskt ett plugin som heter WP Gallery Custom Links. Jag har laddat upp många bilder i ett inlägg men varje bild har olika höjd och bredd så de visas i olika storlekar. Jag vill ställa in dem med samma storlek som jag vill ha. Vänligen ge mig en idé för att lösa detta problem.
Här
Jag behövde bara säga tack för att du sa detta. Du har helt rätt.|
Shoaib
Utmärkt förklaring
Andrew
Jag har ställt in detta och det fungerar utmärkt förutom förslaget som MIKE LITTLE gjorde ovan – miniatyren är ändrad och den visas så i backend i medieredigeraren – men på frontend där min loop är – är bildminiatyren fortfarande vad WP standardmässigt använder – jag har till och med kört REGEN THUMBS och det löser fortfarande inte problemet – har någon annan detta problem eller vet lösningen???
WPBeginner Support
Titta på din loop och använd
<?php the_post_thumbnail('your-specified-image-size'); ?>istället förthe_post_thumbnail()Admin
Tomasz
Fin handledning!
Kolla in pluginet som tillåter manuell beskärning av registrerade bildstorlekar:
http://wordpress.org/plugins/manual-image-crop
WPBeginner Support
Tack, det ser ut som ett trevligt plugin. Vi kommer att titta på det.
Admin
Marc C
Bra handledning – många tack WPBEGINNER.
Jag hade också problem med att inte kunna beskära de nya registrerade bildstorlekarna, men pluginet som TOMASZ postade gör jobbet bra – tack TOMASZ!
Robbe Clerckx
Fortfarande hjälpsamt efter all denna tid :). Tack.
Danny
Tack för denna mycket tydliga och hjälpsamma handledning. Den sparade mig mycket tid eftersom WP-dokumentationen är mycket kryptisk.
lydia karanja
Jag har ett WordPress-konto men jag visste inte hur jag skulle hantera det, men nu vet jag allt tack vare den här handledningen, tack så mycket för att du hjälper människor att förstå mer om hur man skapar och hanterar sina webbplatser.
andy19at
@jezThomp Great if your images work
jezThomp
@andy19at Länk…?
andy19at
@jezThomp En länk? Jag postade den inte eftersom den inte fungerade.
jezThomp
@andy19at http://t.co/YvmiX9hR
mikelittle
Du säger: "Nackdelen med hård beskärning är att du inte kan kontrollera vilken del av bilden som visas." Inte sant.
När du har laddat upp en bild och innan du infogar den i ett inlägg, kan du klicka på 'redigera bild' och därifrån ändra miniatyrbilden eller hela bilden, skala, rotera eller vända bilden, och för miniatyrbilden välja exakt den del av bilden du vill ha.
wpbeginner
@mikelittle Thanks for the correction Mike. Just edited the article
clelandillustration
Jag verkar inte kunna få den anpassade beskärningen att fungera för nya bildstorlekar. Den anpassade beskärningen fungerar för standardversionen av storleken "miniatyrbild", men den beskärningen gäller inte för nya bildstorlekar. Det verkar som att beskärningen fortfarande är okontrollerbar för anpassade bildstorlekar.
Brent Norris
bra insikt i redigeringsflödet...
TdGon
Bra artikel ..och foton att ha till också...fint. Jag såg på några ställen hur man gör detta men de förklarade det inte lika bra som du gör här. Jag ska prova det.
Tack så mycket! (0.o)
PaulDeWoutersd'Oplinter
utmärkt förklaring av ett förvirrande ämne. och mycket användbart plugin
mssbee
Bra handledning! Tack för att du förklarade de olika beskärningsalternativen. Det hjälpte mig verkligen att förstå hur de fungerar.
tjhakan
Fin tutorial. Bra jobbat
defries
Bra sammanfattning av vad som kan göras med bara standardfunktionen för utvalda bilder. Ett extra tips: du kan också ställa in bredden på ditt innehållsområde som en utvald bild och definiera samma bredd i Inställningar > Media. På så sätt kan du välja en utvald bild att använda i ditt tema och den blir automatiskt maximal storlek för innehållsområdet.
Bra att ha de värdena där för <a href="http://codex.wordpress.org/Embeds">oEmbed</a>.
Vanlig slumpmässighet
Tack för den här handledningen, jag undrade varför jag ibland hade bilder som inte beskars till den storlek jag hade kodat.