Dessa taktiker kommer ocks\u00e5 att f\u00f6rb\u00e4ttra delningsv\u00e4rdet av dina inl\u00e4gg, vilket kommer att leda till mer synlighet och trafik. Statistik visar att l\u00e4sare bara kommer ih\u00e5g 10% av textinneh\u00e5llet de l\u00e4ser efter tre dagar, men denna siffra g\u00e5r upp till 65% om du l\u00e4gger till visuellt tilltalande bilder i ditt inneh\u00e5ll.<\/p>\n
I denna omfattande guide l\u00e4r du dig allt du beh\u00f6ver veta om bildstorlekar f\u00f6r WordPress.<\/p>\n
Nyfiken? Nu s\u00e4tter vi i g\u00e5ng!<\/p>\n
F\u00f6redrar du att titta p\u00e5 videoversionen<\/a>?<\/h3>\n<\/kinsta-video><\/p>\nHur WordPress hanterar de bilder du laddar upp<\/h2>\n
Att ladda upp bilder till WordPress<\/a> \u00e4r ganska enkelt, men mycket p\u00e5g\u00e5r i WordPress backend n\u00e4r det hanterar dem.<\/p>\nDet f\u00f6rsta WordPress g\u00f6r n\u00e4r du laddar upp en bild \u00e4r att skapa tre olika storlekar av din bild. Det betyder att du f\u00e5r fyra bilder f\u00f6r var och en du laddar upp:<\/p>\n
\n- Miniatyr<\/li>\n
- Medium<\/li>\n
- Stor<\/li>\n
- Ursprunglig Storlek<\/li>\n<\/ul>\n
WordPress skapar alla dessa olika storlekar f\u00f6r att visa dina bilder i l\u00e4mpligast storlek f\u00f6r varje bes\u00f6kare. Din webbplats kommer alltid att visa r\u00e4tt bilder f\u00f6r dina l\u00e4sare baserat p\u00e5 enheten de anv\u00e4nder<\/a>, vilket snabbar upp och f\u00f6rb\u00e4ttrar deras upplevelse p\u00e5 din webbplats.<\/p>\nDu kan alltid redigera dina bilder manuellt f\u00f6r att skapa dessa ytterligare storlekar, men att g\u00f6ra det korrekt i ett verktyg som Photoshop \u00e4r inget litet projekt. Det kommer att inneb\u00e4ra en hel del tr\u00e5kigt arbete, vilket \u00e4r anledningen till att WordPress besparar dig besv\u00e4ret.<\/p>\n\n
WordPress bildstorlekar: viktiga saker att komma ih\u00e5g<\/h2>\n
Innan vi g\u00e5r in p\u00e5 de mer tekniska aspekterna av WordPress bildstorlekar b\u00f6r du k\u00e4nna till ett par saker.<\/p>\n
Vi har diskuterat hur WordPress skapar tre standardbildstorlekar f\u00f6r dig, men vad h\u00e4nder om du beh\u00f6ver en annan storlek \u00e4n WordPress-standarden? T\u00e4nk om du vill ha fler storlekar totalt?<\/p>\n
Goda nyheter! Du kan g\u00f6ra det enkelt. WordPress l\u00e5ter dig \u00e4ndra standardbildstorlekar och l\u00e4gga till s\u00e5 m\u00e5nga ytterligare storlekar som du vill. Vi f\u00f6rklarar detta mer detaljerat om en liten stund.<\/p>\n
Men innan vi kommer till det borde du veta att det finns specifika krav f\u00f6r att detta ska fungera som du vill.<\/p>\n
Ett av dem \u00e4r att du borde prova att ladda upp dina bilder i den st\u00f6rsta storleken<\/a> du kommer att beh\u00f6va. Medan WordPress kommer att g\u00f6ra den mindre f\u00f6r mindre enheter, kommer det att anv\u00e4nda full storlek (originalstorlek) d\u00e4r bilden m\u00e5ste vara som st\u00f6rst.<\/p>\nAntag att du laddar upp en bild som \u00e4r mindre \u00e4n den st\u00f6rsta storleken du har definierat i WordPress. I s\u00e5 fall kommer WordPress inte att visa den speciella bilden i den st\u00f6rsta storleken korrekt. Dessutom kommer det att bli en m\u00e4rkbar kvalitetsf\u00f6rlust.<\/p>\n
Med det sagt m\u00e5ste du ocks\u00e5 se till att du inte laddar upp bilder som \u00e4r st\u00f6rre \u00e4n vad den st\u00f6rsta storleken beh\u00f6ver vara. WordPress kommer aldrig att anv\u00e4nda s\u00e5dana bilder eftersom de \u00e4r f\u00f6r stora och kommer att \u00e4ta upp on\u00f6digt utrymme p\u00e5 din server<\/a>.<\/p>\nS\u00e5ledes b\u00f6r du kontrollera storleken p\u00e5 den bild du laddar upp och se till att det \u00e4r den st\u00f6rsta storleken den beh\u00f6ver vara innan du laddar upp den till WordPress, men inte st\u00f6rre \u00e4n s\u00e5.<\/p>\n
Var och hur lagrar WordPress dina bilder?<\/h2>\n
N\u00e4r det g\u00e4ller din adminpanel lagrar WordPress dina uppladdade bilder i mediabiblioteket<\/a>. Du kan se alla dina uppladdade bilder genom att sv\u00e4va med musen \u00f6ver Media och klicka p\u00e5 Bibliotek.<\/p>\n![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/wordpress-media-library.jpg\")
WordPress Mediabibliotek.<\/figcaption><\/figure>\nDu kan sortera dem efter medietyp (bild, video, ljud, etc.) och datum. Observera dock att du bara kan sortera bilderna efter datum om du inte har inaktiverat den h\u00e4r funktionen under Inst\u00e4llningar<\/strong>.<\/p>\nDet finns ocks\u00e5 en s\u00f6kruta till h\u00f6ger f\u00f6r att hj\u00e4lpa dig att sp\u00e5ra upp din uppladdade bild. Skriv bara in ett ord som du anv\u00e4nde i titeln, bildtexten eller beskrivningen av din bild f\u00f6r att hitta den.<\/p>\n
Dina bilder lagras i webbplatsens mappar f\u00f6r uppladdningar (wp-content\/uploads\/<\/strong>). F\u00f6r att komma \u00e5t den h\u00e4r mappen m\u00e5ste du anv\u00e4nda en FTP\/SFTP-klient<\/a>. Det kommer att finnas flera underkataloger i din webbplats uploads-mapp som lagrar dina bilder efter uppladdningsdatum (f\u00f6rutsatt att du har l\u00e4mnat m\u00f6jlighet att Sortera efter datum p\u00e5slagen i dina Inst\u00e4llningar<\/strong>).<\/p>\nDu kan ocks\u00e5 skapa egna mappar f\u00f6r dina mediafiler<\/a>, men vi rekommenderar att du bara g\u00f6r det om du anser dig vara en avancerad anv\u00e4ndare.<\/p>\nVilka \u00e4r WordPress standard-bildstorlekar?<\/h2>\n
N\u00e4r det g\u00e4ller WordPress och bildstorlekar tittar vi alltid p\u00e5 fyra olika, med din ursprungliga bildfil och de tre olika storlekarna WordPress skapar som standard:<\/p>\n
\n- Miniatyrstorlek:<\/strong> 150px (kvadrat)<\/li>\n
- Medelstor:<\/strong> Maxbredd och h\u00f6jd p\u00e5 300px<\/li>\n
- Stor:<\/strong> Maxbredd och h\u00f6jd p\u00e5 1024px<\/li>\n
- Fullstor:<\/strong> Den ursprungliga storleken p\u00e5 din bild<\/li>\n<\/ul>\n
\u00c5terigen, som vi n\u00e4mnde tidigare, b\u00f6r du ladda upp dina bilder i 1024px om du bara planerar att anv\u00e4nda dessa standardbildstorlekar. Det g\u00f6r att dina bilder kan visas korrekt \u00e4ven vid den st\u00f6rsta storleken, vilket kanske inte \u00e4r m\u00f6jligt om din bild \u00e4r av mindre storlek \u00e4n den st\u00f6rsta storleken WordPress anv\u00e4nder (vilket \u00e4r 1024px som standard).<\/p>\n
Vad \u00e4r den perfekta bildstorleken i WordPress?<\/h2>\n
WordPress-bilder \u00e4r avg\u00f6rande f\u00f6r l\u00e4sarengagemanget. Ungef\u00e4r som omslaget till en bok kan en speciellt utvald bild erbjuda en f\u00f6rhandsvisning av vad som komma skall i inneh\u00e5llet.<\/p>\n
De visas oftast med WordPress-inl\u00e4gg, men de kan ocks\u00e5 inkluderas med sidor och anpassade inl\u00e4ggstyper. Och eftersom den utvalda bilden kan visas av s\u00f6kmotorer och sociala medie-sajter \u00e4r det viktigt att v\u00e4lja r\u00e4tt storlek.<\/p>\n
\u00c4ven om det finns olika \u00e5sikter om \u00e4mnet \u00e4r den allm\u00e4nna \u00e5sikten att den ideala storleken f\u00f6r utvalda bilder i WordPress ungef\u00e4r 1200 x 630 pixlar<\/strong>. En bild med dessa m\u00e5tt borde passa din webbplats bra oavsett hur stor eller liten dina l\u00e4sares sk\u00e4rmstorlekar \u00e4r.<\/p>\nDet \u00e4r ocks\u00e5 v\u00e4rt att notera att f\u00f6r att dina sidor ska passa Google Discover-fl\u00f6det<\/a> (en bra k\u00e4lla till ytterligare trafik fr\u00e5n Google) s\u00e4ger Google<\/a> att din WordPress-bildstorlek m\u00e5ste vara minst 1200 pixlar bred.<\/p>\nMen \u00e4r detta standardstorlek f\u00f6r\u00a0WordPress utvalda bild?<\/p>\n
Det kan komma som en \u00f6verraskning men WordPress inneh\u00e5ller faktiskt inte en utvald bild-storlek. Ist\u00e4llet kommer utvalda bilder som standard \u00e5terg\u00e5 till sin ursprungliga uppladdningsstorlek om de inte begr\u00e4nsas av webbplatsens design, eller om du inte v\u00e4ljer en av WordPress andra standardstorlekar (som ”Medium” eller ”Stor”).<\/p>\n
Men m\u00e5nga WordPress-teman<\/a> \u2013 inklusive WordPress standardtema, Twenty Twenty One<\/a> \u2013 st\u00e4ller in sina egna anpassade bildstorlekar f\u00f6r utvalda bilder, s\u00e5 var noga med att kontrollera ditt temas inst\u00e4llningar<\/a> f\u00f6rst.<\/p>\nVad \u00e4r den perfekta bildstorleken for en WordPress-header?<\/h2>\n
I likhet med utvalda bilder kan en header-bild ge dina l\u00e4sare en smygtitt p\u00e5 sidans tema och ton. \u00c4ven om de inte lika ofta delas \u00f6ver s\u00f6kresultatsidor eller sociala medier \u00e4r det fortfarande viktigt f\u00f6r webbplatsens hastighet<\/a> och integritet att de har r\u00e4tt storlek.<\/p>\nEftersom en header ofta \u00e4r beroende av webbplatsens design kan de variera mycket vad g\u00e4ller m\u00e5tt och storlek. Det finns inget som passar alla scenarier s\u00e5 det \u00e4r b\u00e4st att ta h\u00e4nsyn till webbplatsens design och responsivitet innan du v\u00e4ljer din header-storlek f\u00f6r WordPress.<\/p>\n
Temautvecklare rekommenderar dock att WordPress-headers borde h\u00e5lla sig till ett 16:9-f\u00f6rh\u00e5llande<\/strong>, till exempel:<\/p>\n\n- 1920 \u00d7 1080 pixlar<\/li>\n
- 1280 \u00d7 720 pixlar<\/li>\n
- 1152 \u00d7 648 pixlar<\/li>\n<\/ul>\n
Precis som med utvalda bilder st\u00e4ller WordPress inte in en standardstorlek f\u00f6r header-bilder. Ditt tema kan dock ha ett alternativ f\u00f6r att anpassa headerns storlek genom temainst\u00e4llningarna under menyn Utseende<\/strong><\/a>.<\/p>\n\n\n\n\n\n\n\nOm ditt valda tema inte ger dig m\u00f6jlighet att \u00e4ndra WordPress header-bildstorlek kan du \u00e4nd\u00e5 justera det sj\u00e4lv. Vi ska g\u00e5 igenom hur h\u00e4rn\u00e4st.”<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nS\u00e5 h\u00e4r \u00e4ndrar du standardbildstorlekar (och n\u00e4r du skulle beh\u00f6va g\u00f6ra det)<\/h2>\n
Medan WordPress standard-bildstorlekar fungerar bra f\u00f6r de flesta anv\u00e4ndare kan vissa s\u00e5 klart ha annorlunda krav. Du kanske f\u00f6redrar en n\u00e5got st\u00f6rre storlek f\u00f6r dina miniatyrer eller en mindre storlek f\u00f6r de stora bilderna.<\/p>\n
Att \u00e4ndra standardbildstorlekar i WordPress skulle vara meningsfullt om du ofta redigerar de flesta av de bilder du laddar upp eftersom WordPress standardbildstorlekar inte \u00e4r l\u00e4mpliga f\u00f6r dina syften.<\/p>\n
Innan du l\u00e4gger till nya anpassade bildstorlekar p\u00e5 standardbildstorlekarna, var medveten om att du kommer lagra m\u00e5nga fler bildfiler p\u00e5 din webbplats databas<\/a> \u00e4n du beh\u00f6ver. Det kan leda till prestandaproblem f\u00f6r din webbplats och f\u00f6rbrukar mer utrymme \u00e4n vad som beh\u00f6vs.<\/p>\nDetsamma g\u00e4ller f\u00f6r bildbaserade webbplatser som m\u00e5ste h\u00e5lla sig till specifika bildstorlekar. Fotografer<\/a>, designer och andra som visar tunga bilder vill ha konsekventa storlekar \u00f6verallt \u00f6ver hela webbplatsen f\u00f6r att skapa ett enhetligt intryck.<\/p>\nP\u00e5 samma s\u00e4tt kan vissa m\u00e5lsidor<\/a> ocks\u00e5 beh\u00f6va visa s\u00e4rskilda bildstorlekar, och WordPress standardstorlekar kanske inte \u00e4r l\u00e4mpliga d\u00e5. Och en e-butik<\/a> beh\u00f6ver vanligtvis anv\u00e4nda st\u00f6rre miniatyrer, som visar mer detaljer.<\/p>\nDet finns gott om andra orsaker till att \u00e4ndra standardbildstorlekar, men du fattar id\u00e9n.<\/p>\n
WordPress f\u00f6rst\u00e5r det ocks\u00e5, s\u00e5 de l\u00e5ter dig \u00e4ndra dessa standardv\u00e4rden.<\/p>\n
Steg f\u00f6r att \u00e4ndra WordPress standardbildstorlekar<\/h3>\n
H\u00e4r \u00e4r steg-f\u00f6r-steg-processen f\u00f6r att \u00e4ndra standardbildstorlekar i WordPress<\/a>.<\/p>\nSteg 1: <\/strong>H\u00e5ll musen \u00f6ver Inst\u00e4llningar<\/strong> och klicka p\u00e5 Media<\/strong>:<\/p>\n![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/Media-settings.png\")
WordPress Mediainst\u00e4llningar f\u00f6r att \u00e4ndra standardbildstorlekar.<\/figcaption><\/figure>\nSteg 2: <\/strong>\u00c4ndra storlekarna till vad du vill genom att redigera siffrorna som vi gjorde nedan:<\/p>\n![\"Exempel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/changed-image-sizes.png\")
Exempel p\u00e5 uppdaterade bildstorlekar i Medieinst\u00e4llningar.<\/figcaption><\/figure>\nSteg 3:<\/strong> Klicka p\u00e5 Spara \u00c4ndringar<\/strong> l\u00e4ngst ner.<\/p>\nNu borde alla bilder du laddar upp fr\u00e5n och med nu vara i dessa nya standardstorlekar.<\/p>\n
Vissa handledningar d\u00e4r ute kommer att f\u00f6resl\u00e5 att du matar in ”0” f\u00f6r standardbildstorlekar. Vi rekommenderar inte detta \u00e4ven om det kan hj\u00e4lpa dig att spara p\u00e5 utrymme.<\/p>\n
Om du \u00e4ndrar dessa v\u00e4rden till ”0”, kommer WordPress att anv\u00e4nda din fullstora (ursprungliga) bild p\u00e5 alla platser och \u00f6ver alla enheter, vilket skulle leda till en massiv \u00f6kning av bandbreddsanv\u00e4ndningen f\u00f6r din webbplats. Vidare skulle detta n\u00e4stan s\u00e4kert sakta ner sidladdningstiden f\u00f6r sektioner som visar m\u00e5nga av dessa bilder.<\/p>\n
S\u00e5 h\u00e4r l\u00e4gger du till anpassade bildstorlekar till WordPress<\/h2>\n
Om du beh\u00f6ver \u00e4ndra alla dina tidigare WordPress-bilder till dessa nya storlekar kan du anv\u00e4nda flera bra plugin, som vi kommer att g\u00e5 igenom i detalj nedan.<\/p>\n
F\u00f6r anv\u00e4ndare som brukar anv\u00e4nda m\u00e5nga olika typer av bilder kan det vara viktigt att ha fler bildstorlekar \u00e4n de tre standardstorlekar WordPress erbjuder.<\/p>\n
Standardbildstorlekarna kan r\u00e4cka f\u00f6r standardtyperna av bilder, men f\u00f6r n\u00e5got som popup-grafik, widgetar<\/a>, eller slider-bilder<\/a> kommer du f\u00f6rmodligen att beh\u00f6va fler bildstorlekar.<\/p>\nAnpassade bildstorlekar ger dig flexibiliteten att f\u00f6rb\u00e4ttra funktionaliteten av din WordPress-sajt och spara massor av tid p\u00e5 att \u00e4ndra storlek p\u00e5 dina bilder en efter en.<\/p>\n
Nu n\u00e4r vi har fastst\u00e4llt det som v\u00e5r baslinje, l\u00e5t oss ta en n\u00e4rmare titt p\u00e5 processen med att l\u00e4gga till dessa anpassade bildstorlekar till din WordPress-sajt.<\/p>\n
Det finns tv\u00e5 alternativ h\u00e4r. Det f\u00f6rsta \u00e4r att anv\u00e4nda ett plugin som hanterar allt f\u00f6r dig med bara n\u00e5gra klick. Det andra \u00e4r det manuella s\u00e4ttet att l\u00e4gga till de n\u00f6dv\u00e4ndiga kodstr\u00e4ngarna i webbplatsens filer.<\/p>\n
L\u00e5t oss ta plugin-metoden f\u00f6rst.<\/p>\n
L\u00e4gg till anpassade bildstorlekar med hj\u00e4lp av Image Regenerate & Select Crop<\/h3>\n
Pluginet Image Regenerate & Select Crop<\/a> g\u00f6r mer \u00e4n Regenerate Thumbnails<\/a> (vi diskuterar det nedan), vilket m\u00f6jligg\u00f6r mer anpassning och funktionalitet.<\/p>\nUt\u00f6ver att l\u00e5ta dig \u00e4ndra standardbildstorlekar g\u00f6r detta plugin det ocks\u00e5 m\u00f6jligt att regenerera alla befintliga bilder f\u00f6r att matcha dina f\u00f6redragna bildstorlekar, st\u00e4lla in standardbesk\u00e4rningsalternativ f\u00f6r bilder, och regenerera miniatyrer.<\/p>\n![\"Anpassade](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/image-regenerate-and-select-crop-settings.jpg\")
Anpassade bildstorleksalternativ via pluginet Image Regenerate & Select Crop.<\/figcaption><\/figure>\nN\u00e4r det \u00e4r installerat och aktiverat kan du skapa s\u00e5 m\u00e5nga nya anpassade bildstorlekar som du vill via WordPress vanliga Inst\u00e4llningar > Media-sida<\/strong>.<\/p>\nL\u00e4gg till anpassade bildstorlekar manuellt<\/h3>\n
\u00c4ven om det \u00e4r en relativt enkel process \u00e4r det allra f\u00f6rsta du b\u00f6r g\u00f6ra att skapa en s\u00e4kerhetskopia av din webbplats<\/a> om n\u00e5got g\u00e5r fel n\u00e4r du g\u00f6r dessa justeringar. N\u00e4r s\u00e4kerhetskopieringen \u00e4r klar, g\u00e5 \u00f6ver till adminpanelen f\u00f6r din WordPress-sajt.<\/p>\nD\u00e4r sv\u00e4var du med musen \u00f6ver Utseende<\/strong> i menyalternativen och v\u00e4lj Redigerare<\/strong> (detta kan heta Temaredigeraren<\/strong> i vissa fall).<\/p>\nHitta sedan functions.php-filen<\/strong> och kontrollera om f\u00f6ljande kod redan finns d\u00e4r (anv\u00e4nd s\u00f6kfunktionen f\u00f6r att hitta den snabbt). Om den redan finns d\u00e4r, beh\u00f6ver du inte g\u00f6ra n\u00e5gonting.<\/p>\nOm den inte finns d\u00e4r m\u00e5ste du l\u00e4gga till den h\u00e4r str\u00e4ngen i filen:<\/p>\n
add_theme_support( 'post-thumbnails' );<\/code><\/pre>\n![\"L\u00e4gg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/adding-custom-image-sizes-functions-php.jpg\")
L\u00e4gg till kroken f\u00f6r anpassade bildstorlekar till functions.php.<\/figcaption><\/figure>\nN\u00e4r du har lagt till den h\u00e4r koden klickar du p\u00e5 Uppdatera fil<\/strong> l\u00e4ngst ner f\u00f6r att aktivera funktionen som l\u00e5ter dig skapa anpassade bildstorlekar.<\/p>\nNu \u00e4r det dags att l\u00e4gga till koden f\u00f6r de specifika anpassade bildstorlekar du vill ha. Leta efter str\u00e4ngen ”add_image_size” i din functions.php-fil<\/strong> eftersom det \u00e4r d\u00e4r du m\u00e5ste g\u00f6ra dina \u00e4ndringar:<\/p>\nadd_image_size( 'my-custom-image-size', 800, 640 );<\/code><\/pre>\nSpecifikt b\u00f6r du uppdatera det som finns inuti de enkla citattecknen med det du vill kalla din nya anpassade bildstorlek. Vi f\u00f6resl\u00e5r att det h\u00e5lls enkelt och beskrivande (t.ex. ”main-post-image”).<\/p>\n
N\u00e4r du har tagit hand om namnet m\u00e5ste du deklarera sj\u00e4lva bildstorlekarna. Det f\u00f6rsta sifferv\u00e4rdet \u00e4r bildbredden, och den andra \u00e4r bildh\u00f6jden.<\/p>\n
H\u00e4r \u00e4r en sk\u00e4rmdump som visar v\u00e5r testkod som l\u00e4ggs till i functions.php-filen<\/strong>:<\/p>\n![\"L\u00e4gg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/add-custom-image-size-dimensions-functions-php.jpg\")
L\u00e4gg till anpassade bildstorleksdimensioner till functions.php.<\/figcaption><\/figure>\nAtt f\u00f6rst\u00e5 besk\u00e4rning<\/h3>\n
N\u00e4r en bild g\u00f6rs mindre utan besk\u00e4rning \u00e4r det bara en krympt version av originalet. Men n\u00e4r den \u00e4r ”beskuren” eller klippt tas den beskurna delen bort fr\u00e5n den f\u00e4rdiga bilden.<\/p>\n
Det \u00e4r precis som att fysiskt klippa upp en bild. Om du tar din sax till ett portr\u00e4tt och klipper bort allt under personens axlar, har du ”besk\u00e4rt” den bilden. Det fungerar p\u00e5 samma s\u00e4tt digitalt.<\/p>\n
Syftet \u00e4r att minska en bilds filstorlek, eftersom besk\u00e4rning inte \u00e4r r\u00e4tt val. Du skulle d\u00e5 ta bort element som du kanske vill beh\u00e5lla samtidigt som du fortfarande har en stor filstorlek. Med det sagt kan besk\u00e4rning vara bra f\u00f6r bildstorlekar som m\u00e5ste passa ett specifikt m\u00e5tt perfekt, som utvalda bilder eller profilbilder.<\/p>\n
Motiven kan bli f\u00f6r sm\u00e5 f\u00f6r n\u00e5got som utvalda bilder<\/a>. De borde fortfarande f\u00e5 den exponering de beh\u00f6ver n\u00e4r de \u00e4ndras utan besk\u00e4rning. S\u00e5 r\u00e4kna ut vad som fungerar b\u00e4st f\u00f6r de olika typerna av bilder du anv\u00e4nder och st\u00e4ll in besk\u00e4rningsfunktionen i enlighet d\u00e4rmed.<\/p>\nN\u00e4r du l\u00e4gger till anpassade bildstorlekar kan du f\u00e5 WordPress att automatiskt besk\u00e4ra bilderna baserat p\u00e5 den storlek du st\u00e4ller in och den ursprungliga storleken. Du m\u00e5ste l\u00e4gga till ”true” I slutet av koden.<\/p>\n
\u00c5terigen, h\u00e4r \u00e4r v\u00e5rt ovanst\u00e5ende exempel med besk\u00e4rningsfunktionen aktiverad.<\/p>\n
add_image_size( 'name-for-your-custom-image', 800, 640, true );<\/code><\/pre>\nMen om du inte vill besk\u00e4ra bilderna kan du antingen l\u00e4gga ”false” i st\u00e4llet f\u00f6r ”true” eller utel\u00e4mna b\u00e5da. Att inte st\u00e4lla in n\u00e5gon av dem g\u00f6r att koden automatiskt antar att alternativet \u00e4r ”false”. D\u00e4rmed kommer WordPress inte att besk\u00e4ra dina bilder.<\/p>\n
L\u00e4gga till en anpassad bildstorlek till ditt tema<\/h2>\n
N\u00e4r du har skapat de anpassade bildstorlekar du beh\u00f6ver, m\u00e5ste du ocks\u00e5 uppdatera koden i ditt tema. Att g\u00f6ra detta kommer att g\u00f6ra att ditt tema visar dessa anpassade bildstorlekar som du vill ha.<\/p>\n
Om du \u00e4r nyb\u00f6rjare p\u00e5 att redigera kod<\/a>, se till att skapa en s\u00e4kerhetskopia av din webbplats igen innan du utf\u00f6r detta.<\/p>\nNu m\u00e5ste du hitta din temafil i post loop och l\u00e4gga till f\u00f6ljande kod till den:<\/p>\n
the_post_thumbnail( 'your-specified-image-size' );<\/code><\/pre>\nF\u00f6r att hitta den h\u00e4r filen, klicka p\u00e5 Temaredigeraren<\/strong> under Utseende<\/strong>. Leta efter index.php-filen<\/strong> h\u00e4r – det h\u00e4r \u00e4r temafilen d\u00e4r den post loop finns som du beh\u00f6ver redigera.<\/p>\nN\u00e4r du har hittat den, l\u00e4gg till koden som n\u00e4mns ovan enligt bilden nedan:<\/p>\n![\"L\u00e4gg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/add-custom-image-size-function-index-php-1.jpg\")
L\u00e4gg till kroken f\u00f6r anpassade bildstorlekar till functions.php.<\/figcaption><\/figure>\n\u00c5terigen, det vore b\u00e4st om du ersatte den ”new-homepage-feature”-delen med namnet p\u00e5 den anpassade bildstorleken du har skapat.<\/p>\n
N\u00e4r du har lagt till den h\u00e4r koden och uppdaterat filen ser du den anpassade bildstorleken i mediebiblioteket. Ladda upp en ny bild f\u00f6r att prova.<\/p>\n
Uppdatera gamla miniatyrer<\/h2>\n
Att skapa och l\u00e4gga till anpassade bildstorlekar k\u00e4nns bra men det ger dig en till \u00f6ppen uppgift: hur \u00e4r det med alla gamla bilder du redan har laddat upp?<\/p>\n
Oroa dig inte f\u00f6r det \u2013 n\u00e5gra bra WordPressplugin<\/a> passar mycket bra f\u00f6r denna uppgift! L\u00e5t oss se hur de kan hj\u00e4lpa dig att ta hand om dina gamla miniatyrer.<\/p>\nPluginet Regenerate Thumbnails<\/h3>\n
Hur WordPress hanterar de bilder du laddar upp<\/h2>\n
Att ladda upp bilder till WordPress<\/a> \u00e4r ganska enkelt, men mycket p\u00e5g\u00e5r i WordPress backend n\u00e4r det hanterar dem.<\/p>\n Det f\u00f6rsta WordPress g\u00f6r n\u00e4r du laddar upp en bild \u00e4r att skapa tre olika storlekar av din bild. Det betyder att du f\u00e5r fyra bilder f\u00f6r var och en du laddar upp:<\/p>\n WordPress skapar alla dessa olika storlekar f\u00f6r att visa dina bilder i l\u00e4mpligast storlek f\u00f6r varje bes\u00f6kare. Din webbplats kommer alltid att visa r\u00e4tt bilder f\u00f6r dina l\u00e4sare baserat p\u00e5 enheten de anv\u00e4nder<\/a>, vilket snabbar upp och f\u00f6rb\u00e4ttrar deras upplevelse p\u00e5 din webbplats.<\/p>\n Du kan alltid redigera dina bilder manuellt f\u00f6r att skapa dessa ytterligare storlekar, men att g\u00f6ra det korrekt i ett verktyg som Photoshop \u00e4r inget litet projekt. Det kommer att inneb\u00e4ra en hel del tr\u00e5kigt arbete, vilket \u00e4r anledningen till att WordPress besparar dig besv\u00e4ret.<\/p>\n\n Innan vi g\u00e5r in p\u00e5 de mer tekniska aspekterna av WordPress bildstorlekar b\u00f6r du k\u00e4nna till ett par saker.<\/p>\n Vi har diskuterat hur WordPress skapar tre standardbildstorlekar f\u00f6r dig, men vad h\u00e4nder om du beh\u00f6ver en annan storlek \u00e4n WordPress-standarden? T\u00e4nk om du vill ha fler storlekar totalt?<\/p>\n Goda nyheter! Du kan g\u00f6ra det enkelt. WordPress l\u00e5ter dig \u00e4ndra standardbildstorlekar och l\u00e4gga till s\u00e5 m\u00e5nga ytterligare storlekar som du vill. Vi f\u00f6rklarar detta mer detaljerat om en liten stund.<\/p>\n Men innan vi kommer till det borde du veta att det finns specifika krav f\u00f6r att detta ska fungera som du vill.<\/p>\n Ett av dem \u00e4r att du borde prova att ladda upp dina bilder i den st\u00f6rsta storleken<\/a> du kommer att beh\u00f6va. Medan WordPress kommer att g\u00f6ra den mindre f\u00f6r mindre enheter, kommer det att anv\u00e4nda full storlek (originalstorlek) d\u00e4r bilden m\u00e5ste vara som st\u00f6rst.<\/p>\n Antag att du laddar upp en bild som \u00e4r mindre \u00e4n den st\u00f6rsta storleken du har definierat i WordPress. I s\u00e5 fall kommer WordPress inte att visa den speciella bilden i den st\u00f6rsta storleken korrekt. Dessutom kommer det att bli en m\u00e4rkbar kvalitetsf\u00f6rlust.<\/p>\n Med det sagt m\u00e5ste du ocks\u00e5 se till att du inte laddar upp bilder som \u00e4r st\u00f6rre \u00e4n vad den st\u00f6rsta storleken beh\u00f6ver vara. WordPress kommer aldrig att anv\u00e4nda s\u00e5dana bilder eftersom de \u00e4r f\u00f6r stora och kommer att \u00e4ta upp on\u00f6digt utrymme p\u00e5 din server<\/a>.<\/p>\n S\u00e5ledes b\u00f6r du kontrollera storleken p\u00e5 den bild du laddar upp och se till att det \u00e4r den st\u00f6rsta storleken den beh\u00f6ver vara innan du laddar upp den till WordPress, men inte st\u00f6rre \u00e4n s\u00e5.<\/p>\n N\u00e4r det g\u00e4ller din adminpanel lagrar WordPress dina uppladdade bilder i mediabiblioteket<\/a>. Du kan se alla dina uppladdade bilder genom att sv\u00e4va med musen \u00f6ver Media och klicka p\u00e5 Bibliotek.<\/p>\n Du kan sortera dem efter medietyp (bild, video, ljud, etc.) och datum. Observera dock att du bara kan sortera bilderna efter datum om du inte har inaktiverat den h\u00e4r funktionen under Inst\u00e4llningar<\/strong>.<\/p>\n Det finns ocks\u00e5 en s\u00f6kruta till h\u00f6ger f\u00f6r att hj\u00e4lpa dig att sp\u00e5ra upp din uppladdade bild. Skriv bara in ett ord som du anv\u00e4nde i titeln, bildtexten eller beskrivningen av din bild f\u00f6r att hitta den.<\/p>\n Dina bilder lagras i webbplatsens mappar f\u00f6r uppladdningar (wp-content\/uploads\/<\/strong>). F\u00f6r att komma \u00e5t den h\u00e4r mappen m\u00e5ste du anv\u00e4nda en FTP\/SFTP-klient<\/a>. Det kommer att finnas flera underkataloger i din webbplats uploads-mapp som lagrar dina bilder efter uppladdningsdatum (f\u00f6rutsatt att du har l\u00e4mnat m\u00f6jlighet att Sortera efter datum p\u00e5slagen i dina Inst\u00e4llningar<\/strong>).<\/p>\n Du kan ocks\u00e5 skapa egna mappar f\u00f6r dina mediafiler<\/a>, men vi rekommenderar att du bara g\u00f6r det om du anser dig vara en avancerad anv\u00e4ndare.<\/p>\n N\u00e4r det g\u00e4ller WordPress och bildstorlekar tittar vi alltid p\u00e5 fyra olika, med din ursprungliga bildfil och de tre olika storlekarna WordPress skapar som standard:<\/p>\n \u00c5terigen, som vi n\u00e4mnde tidigare, b\u00f6r du ladda upp dina bilder i 1024px om du bara planerar att anv\u00e4nda dessa standardbildstorlekar. Det g\u00f6r att dina bilder kan visas korrekt \u00e4ven vid den st\u00f6rsta storleken, vilket kanske inte \u00e4r m\u00f6jligt om din bild \u00e4r av mindre storlek \u00e4n den st\u00f6rsta storleken WordPress anv\u00e4nder (vilket \u00e4r 1024px som standard).<\/p>\n WordPress-bilder \u00e4r avg\u00f6rande f\u00f6r l\u00e4sarengagemanget. Ungef\u00e4r som omslaget till en bok kan en speciellt utvald bild erbjuda en f\u00f6rhandsvisning av vad som komma skall i inneh\u00e5llet.<\/p>\n De visas oftast med WordPress-inl\u00e4gg, men de kan ocks\u00e5 inkluderas med sidor och anpassade inl\u00e4ggstyper. Och eftersom den utvalda bilden kan visas av s\u00f6kmotorer och sociala medie-sajter \u00e4r det viktigt att v\u00e4lja r\u00e4tt storlek.<\/p>\n \u00c4ven om det finns olika \u00e5sikter om \u00e4mnet \u00e4r den allm\u00e4nna \u00e5sikten att den ideala storleken f\u00f6r utvalda bilder i WordPress ungef\u00e4r 1200 x 630 pixlar<\/strong>. En bild med dessa m\u00e5tt borde passa din webbplats bra oavsett hur stor eller liten dina l\u00e4sares sk\u00e4rmstorlekar \u00e4r.<\/p>\n Det \u00e4r ocks\u00e5 v\u00e4rt att notera att f\u00f6r att dina sidor ska passa Google Discover-fl\u00f6det<\/a> (en bra k\u00e4lla till ytterligare trafik fr\u00e5n Google) s\u00e4ger Google<\/a> att din WordPress-bildstorlek m\u00e5ste vara minst 1200 pixlar bred.<\/p>\n Men \u00e4r detta standardstorlek f\u00f6r\u00a0WordPress utvalda bild?<\/p>\n Det kan komma som en \u00f6verraskning men WordPress inneh\u00e5ller faktiskt inte en utvald bild-storlek. Ist\u00e4llet kommer utvalda bilder som standard \u00e5terg\u00e5 till sin ursprungliga uppladdningsstorlek om de inte begr\u00e4nsas av webbplatsens design, eller om du inte v\u00e4ljer en av WordPress andra standardstorlekar (som ”Medium” eller ”Stor”).<\/p>\n Men m\u00e5nga WordPress-teman<\/a> \u2013 inklusive WordPress standardtema, Twenty Twenty One<\/a> \u2013 st\u00e4ller in sina egna anpassade bildstorlekar f\u00f6r utvalda bilder, s\u00e5 var noga med att kontrollera ditt temas inst\u00e4llningar<\/a> f\u00f6rst.<\/p>\n I likhet med utvalda bilder kan en header-bild ge dina l\u00e4sare en smygtitt p\u00e5 sidans tema och ton. \u00c4ven om de inte lika ofta delas \u00f6ver s\u00f6kresultatsidor eller sociala medier \u00e4r det fortfarande viktigt f\u00f6r webbplatsens hastighet<\/a> och integritet att de har r\u00e4tt storlek.<\/p>\n Eftersom en header ofta \u00e4r beroende av webbplatsens design kan de variera mycket vad g\u00e4ller m\u00e5tt och storlek. Det finns inget som passar alla scenarier s\u00e5 det \u00e4r b\u00e4st att ta h\u00e4nsyn till webbplatsens design och responsivitet innan du v\u00e4ljer din header-storlek f\u00f6r WordPress.<\/p>\n Temautvecklare rekommenderar dock att WordPress-headers borde h\u00e5lla sig till ett 16:9-f\u00f6rh\u00e5llande<\/strong>, till exempel:<\/p>\n Precis som med utvalda bilder st\u00e4ller WordPress inte in en standardstorlek f\u00f6r header-bilder. Ditt tema kan dock ha ett alternativ f\u00f6r att anpassa headerns storlek genom temainst\u00e4llningarna under menyn Utseende<\/strong><\/a>.<\/p>\n Medan WordPress standard-bildstorlekar fungerar bra f\u00f6r de flesta anv\u00e4ndare kan vissa s\u00e5 klart ha annorlunda krav. Du kanske f\u00f6redrar en n\u00e5got st\u00f6rre storlek f\u00f6r dina miniatyrer eller en mindre storlek f\u00f6r de stora bilderna.<\/p>\n Att \u00e4ndra standardbildstorlekar i WordPress skulle vara meningsfullt om du ofta redigerar de flesta av de bilder du laddar upp eftersom WordPress standardbildstorlekar inte \u00e4r l\u00e4mpliga f\u00f6r dina syften.<\/p>\n Innan du l\u00e4gger till nya anpassade bildstorlekar p\u00e5 standardbildstorlekarna, var medveten om att du kommer lagra m\u00e5nga fler bildfiler p\u00e5 din webbplats databas<\/a> \u00e4n du beh\u00f6ver. Det kan leda till prestandaproblem f\u00f6r din webbplats och f\u00f6rbrukar mer utrymme \u00e4n vad som beh\u00f6vs.<\/p>\n Detsamma g\u00e4ller f\u00f6r bildbaserade webbplatser som m\u00e5ste h\u00e5lla sig till specifika bildstorlekar. Fotografer<\/a>, designer och andra som visar tunga bilder vill ha konsekventa storlekar \u00f6verallt \u00f6ver hela webbplatsen f\u00f6r att skapa ett enhetligt intryck.<\/p>\n P\u00e5 samma s\u00e4tt kan vissa m\u00e5lsidor<\/a> ocks\u00e5 beh\u00f6va visa s\u00e4rskilda bildstorlekar, och WordPress standardstorlekar kanske inte \u00e4r l\u00e4mpliga d\u00e5. Och en e-butik<\/a> beh\u00f6ver vanligtvis anv\u00e4nda st\u00f6rre miniatyrer, som visar mer detaljer.<\/p>\n Det finns gott om andra orsaker till att \u00e4ndra standardbildstorlekar, men du fattar id\u00e9n.<\/p>\n WordPress f\u00f6rst\u00e5r det ocks\u00e5, s\u00e5 de l\u00e5ter dig \u00e4ndra dessa standardv\u00e4rden.<\/p>\n H\u00e4r \u00e4r steg-f\u00f6r-steg-processen f\u00f6r att \u00e4ndra standardbildstorlekar i WordPress<\/a>.<\/p>\n Steg 1: <\/strong>H\u00e5ll musen \u00f6ver Inst\u00e4llningar<\/strong> och klicka p\u00e5 Media<\/strong>:<\/p>\n Steg 2: <\/strong>\u00c4ndra storlekarna till vad du vill genom att redigera siffrorna som vi gjorde nedan:<\/p>\n Steg 3:<\/strong> Klicka p\u00e5 Spara \u00c4ndringar<\/strong> l\u00e4ngst ner.<\/p>\n Nu borde alla bilder du laddar upp fr\u00e5n och med nu vara i dessa nya standardstorlekar.<\/p>\n Vissa handledningar d\u00e4r ute kommer att f\u00f6resl\u00e5 att du matar in ”0” f\u00f6r standardbildstorlekar. Vi rekommenderar inte detta \u00e4ven om det kan hj\u00e4lpa dig att spara p\u00e5 utrymme.<\/p>\n Om du \u00e4ndrar dessa v\u00e4rden till ”0”, kommer WordPress att anv\u00e4nda din fullstora (ursprungliga) bild p\u00e5 alla platser och \u00f6ver alla enheter, vilket skulle leda till en massiv \u00f6kning av bandbreddsanv\u00e4ndningen f\u00f6r din webbplats. Vidare skulle detta n\u00e4stan s\u00e4kert sakta ner sidladdningstiden f\u00f6r sektioner som visar m\u00e5nga av dessa bilder.<\/p>\n Om du beh\u00f6ver \u00e4ndra alla dina tidigare WordPress-bilder till dessa nya storlekar kan du anv\u00e4nda flera bra plugin, som vi kommer att g\u00e5 igenom i detalj nedan.<\/p>\n F\u00f6r anv\u00e4ndare som brukar anv\u00e4nda m\u00e5nga olika typer av bilder kan det vara viktigt att ha fler bildstorlekar \u00e4n de tre standardstorlekar WordPress erbjuder.<\/p>\n Standardbildstorlekarna kan r\u00e4cka f\u00f6r standardtyperna av bilder, men f\u00f6r n\u00e5got som popup-grafik, widgetar<\/a>, eller slider-bilder<\/a> kommer du f\u00f6rmodligen att beh\u00f6va fler bildstorlekar.<\/p>\n Anpassade bildstorlekar ger dig flexibiliteten att f\u00f6rb\u00e4ttra funktionaliteten av din WordPress-sajt och spara massor av tid p\u00e5 att \u00e4ndra storlek p\u00e5 dina bilder en efter en.<\/p>\n Nu n\u00e4r vi har fastst\u00e4llt det som v\u00e5r baslinje, l\u00e5t oss ta en n\u00e4rmare titt p\u00e5 processen med att l\u00e4gga till dessa anpassade bildstorlekar till din WordPress-sajt.<\/p>\n Det finns tv\u00e5 alternativ h\u00e4r. Det f\u00f6rsta \u00e4r att anv\u00e4nda ett plugin som hanterar allt f\u00f6r dig med bara n\u00e5gra klick. Det andra \u00e4r det manuella s\u00e4ttet att l\u00e4gga till de n\u00f6dv\u00e4ndiga kodstr\u00e4ngarna i webbplatsens filer.<\/p>\n L\u00e5t oss ta plugin-metoden f\u00f6rst.<\/p>\n Pluginet Image Regenerate & Select Crop<\/a> g\u00f6r mer \u00e4n Regenerate Thumbnails<\/a> (vi diskuterar det nedan), vilket m\u00f6jligg\u00f6r mer anpassning och funktionalitet.<\/p>\n Ut\u00f6ver att l\u00e5ta dig \u00e4ndra standardbildstorlekar g\u00f6r detta plugin det ocks\u00e5 m\u00f6jligt att regenerera alla befintliga bilder f\u00f6r att matcha dina f\u00f6redragna bildstorlekar, st\u00e4lla in standardbesk\u00e4rningsalternativ f\u00f6r bilder, och regenerera miniatyrer.<\/p>\n N\u00e4r det \u00e4r installerat och aktiverat kan du skapa s\u00e5 m\u00e5nga nya anpassade bildstorlekar som du vill via WordPress vanliga Inst\u00e4llningar > Media-sida<\/strong>.<\/p>\n \u00c4ven om det \u00e4r en relativt enkel process \u00e4r det allra f\u00f6rsta du b\u00f6r g\u00f6ra att skapa en s\u00e4kerhetskopia av din webbplats<\/a> om n\u00e5got g\u00e5r fel n\u00e4r du g\u00f6r dessa justeringar. N\u00e4r s\u00e4kerhetskopieringen \u00e4r klar, g\u00e5 \u00f6ver till adminpanelen f\u00f6r din WordPress-sajt.<\/p>\n D\u00e4r sv\u00e4var du med musen \u00f6ver Utseende<\/strong> i menyalternativen och v\u00e4lj Redigerare<\/strong> (detta kan heta Temaredigeraren<\/strong> i vissa fall).<\/p>\n Hitta sedan functions.php-filen<\/strong> och kontrollera om f\u00f6ljande kod redan finns d\u00e4r (anv\u00e4nd s\u00f6kfunktionen f\u00f6r att hitta den snabbt). Om den redan finns d\u00e4r, beh\u00f6ver du inte g\u00f6ra n\u00e5gonting.<\/p>\n Om den inte finns d\u00e4r m\u00e5ste du l\u00e4gga till den h\u00e4r str\u00e4ngen i filen:<\/p>\n N\u00e4r du har lagt till den h\u00e4r koden klickar du p\u00e5 Uppdatera fil<\/strong> l\u00e4ngst ner f\u00f6r att aktivera funktionen som l\u00e5ter dig skapa anpassade bildstorlekar.<\/p>\n Nu \u00e4r det dags att l\u00e4gga till koden f\u00f6r de specifika anpassade bildstorlekar du vill ha. Leta efter str\u00e4ngen ”add_image_size” i din functions.php-fil<\/strong> eftersom det \u00e4r d\u00e4r du m\u00e5ste g\u00f6ra dina \u00e4ndringar:<\/p>\n Specifikt b\u00f6r du uppdatera det som finns inuti de enkla citattecknen med det du vill kalla din nya anpassade bildstorlek. Vi f\u00f6resl\u00e5r att det h\u00e5lls enkelt och beskrivande (t.ex. ”main-post-image”).<\/p>\n N\u00e4r du har tagit hand om namnet m\u00e5ste du deklarera sj\u00e4lva bildstorlekarna. Det f\u00f6rsta sifferv\u00e4rdet \u00e4r bildbredden, och den andra \u00e4r bildh\u00f6jden.<\/p>\n H\u00e4r \u00e4r en sk\u00e4rmdump som visar v\u00e5r testkod som l\u00e4ggs till i functions.php-filen<\/strong>:<\/p>\n N\u00e4r en bild g\u00f6rs mindre utan besk\u00e4rning \u00e4r det bara en krympt version av originalet. Men n\u00e4r den \u00e4r ”beskuren” eller klippt tas den beskurna delen bort fr\u00e5n den f\u00e4rdiga bilden.<\/p>\n Det \u00e4r precis som att fysiskt klippa upp en bild. Om du tar din sax till ett portr\u00e4tt och klipper bort allt under personens axlar, har du ”besk\u00e4rt” den bilden. Det fungerar p\u00e5 samma s\u00e4tt digitalt.<\/p>\n Syftet \u00e4r att minska en bilds filstorlek, eftersom besk\u00e4rning inte \u00e4r r\u00e4tt val. Du skulle d\u00e5 ta bort element som du kanske vill beh\u00e5lla samtidigt som du fortfarande har en stor filstorlek. Med det sagt kan besk\u00e4rning vara bra f\u00f6r bildstorlekar som m\u00e5ste passa ett specifikt m\u00e5tt perfekt, som utvalda bilder eller profilbilder.<\/p>\n Motiven kan bli f\u00f6r sm\u00e5 f\u00f6r n\u00e5got som utvalda bilder<\/a>. De borde fortfarande f\u00e5 den exponering de beh\u00f6ver n\u00e4r de \u00e4ndras utan besk\u00e4rning. S\u00e5 r\u00e4kna ut vad som fungerar b\u00e4st f\u00f6r de olika typerna av bilder du anv\u00e4nder och st\u00e4ll in besk\u00e4rningsfunktionen i enlighet d\u00e4rmed.<\/p>\n N\u00e4r du l\u00e4gger till anpassade bildstorlekar kan du f\u00e5 WordPress att automatiskt besk\u00e4ra bilderna baserat p\u00e5 den storlek du st\u00e4ller in och den ursprungliga storleken. Du m\u00e5ste l\u00e4gga till ”true” I slutet av koden.<\/p>\n \u00c5terigen, h\u00e4r \u00e4r v\u00e5rt ovanst\u00e5ende exempel med besk\u00e4rningsfunktionen aktiverad.<\/p>\n Men om du inte vill besk\u00e4ra bilderna kan du antingen l\u00e4gga ”false” i st\u00e4llet f\u00f6r ”true” eller utel\u00e4mna b\u00e5da. Att inte st\u00e4lla in n\u00e5gon av dem g\u00f6r att koden automatiskt antar att alternativet \u00e4r ”false”. D\u00e4rmed kommer WordPress inte att besk\u00e4ra dina bilder.<\/p>\n N\u00e4r du har skapat de anpassade bildstorlekar du beh\u00f6ver, m\u00e5ste du ocks\u00e5 uppdatera koden i ditt tema. Att g\u00f6ra detta kommer att g\u00f6ra att ditt tema visar dessa anpassade bildstorlekar som du vill ha.<\/p>\n Om du \u00e4r nyb\u00f6rjare p\u00e5 att redigera kod<\/a>, se till att skapa en s\u00e4kerhetskopia av din webbplats igen innan du utf\u00f6r detta.<\/p>\n Nu m\u00e5ste du hitta din temafil i post loop och l\u00e4gga till f\u00f6ljande kod till den:<\/p>\n F\u00f6r att hitta den h\u00e4r filen, klicka p\u00e5 Temaredigeraren<\/strong> under Utseende<\/strong>. Leta efter index.php-filen<\/strong> h\u00e4r – det h\u00e4r \u00e4r temafilen d\u00e4r den post loop finns som du beh\u00f6ver redigera.<\/p>\n N\u00e4r du har hittat den, l\u00e4gg till koden som n\u00e4mns ovan enligt bilden nedan:<\/p>\n \u00c5terigen, det vore b\u00e4st om du ersatte den ”new-homepage-feature”-delen med namnet p\u00e5 den anpassade bildstorleken du har skapat.<\/p>\n N\u00e4r du har lagt till den h\u00e4r koden och uppdaterat filen ser du den anpassade bildstorleken i mediebiblioteket. Ladda upp en ny bild f\u00f6r att prova.<\/p>\n Att skapa och l\u00e4gga till anpassade bildstorlekar k\u00e4nns bra men det ger dig en till \u00f6ppen uppgift: hur \u00e4r det med alla gamla bilder du redan har laddat upp?<\/p>\n Oroa dig inte f\u00f6r det \u2013 n\u00e5gra bra WordPressplugin<\/a> passar mycket bra f\u00f6r denna uppgift! L\u00e5t oss se hur de kan hj\u00e4lpa dig att ta hand om dina gamla miniatyrer.<\/p>\n\n
WordPress bildstorlekar: viktiga saker att komma ih\u00e5g<\/h2>\n
Var och hur lagrar WordPress dina bilder?<\/h2>\n
Vilka \u00e4r WordPress standard-bildstorlekar?<\/h2>\n
\n
Vad \u00e4r den perfekta bildstorleken i WordPress?<\/h2>\n
Vad \u00e4r den perfekta bildstorleken for en WordPress-header?<\/h2>\n
\n
S\u00e5 h\u00e4r \u00e4ndrar du standardbildstorlekar (och n\u00e4r du skulle beh\u00f6va g\u00f6ra det)<\/h2>\n
Steg f\u00f6r att \u00e4ndra WordPress standardbildstorlekar<\/h3>\n
S\u00e5 h\u00e4r l\u00e4gger du till anpassade bildstorlekar till WordPress<\/h2>\n
L\u00e4gg till anpassade bildstorlekar med hj\u00e4lp av Image Regenerate & Select Crop<\/h3>\n
L\u00e4gg till anpassade bildstorlekar manuellt<\/h3>\n
add_theme_support( 'post-thumbnails' );<\/code><\/pre>\nadd_image_size( 'my-custom-image-size', 800, 640 );<\/code><\/pre>\nAtt f\u00f6rst\u00e5 besk\u00e4rning<\/h3>\n
add_image_size( 'name-for-your-custom-image', 800, 640, true );<\/code><\/pre>\nL\u00e4gga till en anpassad bildstorlek till ditt tema<\/h2>\n
the_post_thumbnail( 'your-specified-image-size' );<\/code><\/pre>\nUppdatera gamla miniatyrer<\/h2>\n
Pluginet Regenerate Thumbnails<\/h3>\n
![\"Installera](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/install-regenerate-thumbnails-plugin.jpg\")
![\"Inst\u00e4llningssidan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/image4.png\")