Standard WordPress Bildestørrelser Og hvordan du legger Til Egendefinerte Størrelser

Når Du laster opp et bilde, Gjør WordPress mye arbeid bak kulissene, slik At du kan betjene bildet til de besøkende. Du kan piggyback på denne prosessen og legge til egendefinerte bildestørrelser for å spare å måtte endre størrelsen på bildene manuelt.

i dette innlegget vil jeg forklare hvordan Og hvorfor WordPress skaper forskjellige bildestørrelser. Da skal jeg lære deg hvordan du legger til dine egne bildestørrelser ved å endre funksjonene.php fil, regenerere miniatyrbilder og legge til nye bildestørrelser Til Gutenberg bildeblokk og / eller WordPress loop.

WordPress Bildestørrelser Forklart

Hver gang du laster opp et bilde til WordPress mediebiblioteket, er disse de ekstra bildestørrelsesalternativene WordPress oppretter som standard:

• Thumbnail
• Medium
• Medium Large
• Stor

Hvis temaet angir flere bildestørrelser, Skaper WordPress dem også.

WordPress beholder også den opprinnelige størrelsen du laster opp og navngir Den Full som i full størrelse.

du kan se alle disse (med unntak av Medium_Large) i Gutenbergs bildeblokk Bildestørrelse når du setter inn et bilde i en side eller et innlegg.

Hvorfor Lager WordPress så mange bilder?

Bilder er som bukser. Du vil være sikker på at du får riktig størrelse. Bukser og bilder som er for små, ser dumme ut, og det er smertefullt åpenbart for deg og alle andre at de ikke passer riktig. For små bilder på nettstedet ditt vil se utstrakt eller pixellert.

derimot, hvis de er for store, er det super sløsing. Du ville ikke satt et par bukser laget for en mann på en baby, ikke sant? Det er så mye ekstra stoff som ikke engang er nødvendig. Den babyen kommer til å gå seg vill i et bukseben;)

Bildene er de samme. Hvis bildet ditt er for stort for beholderen, kaster du bort båndbredde og tid på å laste den ned for å tjene på siden din. Og for hva? For ingenting.

Ideelt sett bør bildene i full størrelse du laster opp, være store nok til å passe til den største bildebeholderen på nettstedet ditt, men ikke større. Så når du bruker bilder på nettstedet ditt, bør du bruke den eksakte størrelsen bildet du trenger.

Siden skalering av bilder for å skape riktig størrelse i Photoshop eller annen bilderedigerer tar verdifull tid, Tar WordPress på seg denne oppgaven og gjør det for deg. Takk, WordPress!

Alt du trenger å gjøre er å velge riktig størrelse når du setter inn et bilde på nettstedet ditt for å få ytelsesfordelene ved å bruke et bilde som er helt riktig.

Hvis WordPress standard bildestørrelser ikke er perfekt størrelse for temaet ditt, kan du justere standardene I Media > Innstillinger-delen eller legge til egendefinerte størrelser, slik at du får flere alternativer å velge mellom.

standard bildestørrelser er som følger:

• 150px firkant for miniatyrbilder
• 300px bredde for mellomstore bilder
• 768px maks bredde for medium_store bilder
• 1024px maks bredde for store bilder.

Medium_large ble lagt til for å dra nytte av responsiv bildestøtte, og derfor er Den ikke inkludert i innstillingssiden. Når vi snakker om responsive bilder…

Responsive Bilder

alle disse bildene i forskjellige størrelser tjener et annet formål, så du bør ikke sette standardene til null for å holde WordPress fra å lage dem, som noen opplæringsprogrammer foreslår.

WordPress lagt responsive bilder til core i versjon 4.4. I stedet for å fylle bilde src attributter med NETTADRESSEN for bare ett bilde, la WordPress også til srcset (sett med kilder) som er en liste Over Nettadresser med bilder av forskjellige størrelser.

Gjett hvilke bilder den bruker til å lage den listen? Yup, WordPress bruker de samme bildene i forskjellige størrelser det skaper når du laster opp et bilde.

den tilbyr denne listen til nettleseren, slik at den kan velge et bilde som passer for den besøkendes enhet. Hvis den besøkende bruker en mobil enhet, får de et mindre bilde i srcset. Hvis De besøker nettstedet ditt på en stasjonær Retina-enhet, mottar de Den Retina-klare bildefilen i full Størrelse du lastet opp. Igjen, dette er grunnen til at du bør laste opp et bilde som er stort nok til å fylle det behovet.

Når Du legger til en egendefinert bildestørrelse, Vil WordPress legge den til srcset så lenge Den har samme sideforhold. Hvis den egendefinerte bildestørrelsen beskjærer bildet til en annen form, blir den utelatt fra settet.

» Weboptimalisering «Større Bilder I WordPress

WordPress 5.3 introduserte en ny måte å administrere store bildefiler ved å oppdage og generere en» weboptimalisert maksimal størrelse » av dem.

hvordan fungerer det?

Når Et nytt bilde lastes opp, Vil WordPress oppdage om Det er et «stort» bilde basert på om høyden eller bredden er over big_image threshold.

standard terskelverdi er 2560px(dette kan endres ved hjelp av det nye big_image_size_threshold filteret).

hvis et bildes høyde eller bredde er over denne terskelen, skaleres den ned – der terskelen brukes som maks høyde og maks bredde.

det nedskalerte bildet vil bli brukt som den største tilgjengelige størrelsen.

Vil du deaktivere skaleringen?

skaleringen styres av filteret big_image_size_threshold.

Retur false fra filteret tilbakeringing vil deaktivere den (som nedenfor):

add_filter( 'big_image_size_threshold', '__return_false' );

WordPress Thumbnails And Featured Image Size

Vi har nå nådd den delen av vår tutorial der vi vil løse hele thumbnail / featured image mess. I utgangspunktet koker problemet ned til dette; Fordi WordPress opprettholder bakoverkompatibilitet når Det utvikler seg, endres navnene på ting, men funksjonene refererer fortsatt til ting ved sine gamle navn.

WordPress Thumbnails bildestørrelse ble introdusert i versjon 2.9, men ble raskt endret Til Utvalgte Bilder i versjon 3.0, men akk, navnet stakk. Så du vil ofte høre utvalgte bilder referert til som miniatyrbilder i opplæringsprogrammer og til og med i funksjonsnavnene.

her er noen eksempler:

• hvis temaet ditt ikke har utvalgte bilder, og du vil aktivere funksjonen, legger du til add_theme_support( 'post-thumbnails' ); i funksjonsfilen.
• for å vise WordPress-kjennetegnet bildestørrelse i et tema, bruker du the_post_thumbnail() – funksjonen.

Miniatyrbilder og utvalgte bilder deler en standardstørrelse på 150 x 150 x x. Hvis du bruker the_post_thumbnail() – funksjonen uten et argument for å angi størrelsen, vil den bruke standard 150px firkantet størrelse.

For å gjøre dette mindre forvirrende for deg selv, slik at du faktisk kan bruke riktig størrelse, foreslår jeg å lage en tilpasset bildestørrelse og navngi den kjennetegnet-stor eller noe lignende. Deretter, når du vil bruke det bildet i you ‘ re the loop, bruker du the_post_thumbnail('featured-large').

før Du Begynner Å Lage Egendefinerte Bildestørrelser I WordPress

når du begynner å lage egendefinerte bildestørrelser, unngå å gå overbord og lage bilder for alle tenkelige formål. Ellers vil du brenne gjennom plass på din hosting, og hvis du bruker en bildeoptimaliseringstjeneste som belaster deg per bilde, kommer du til å gå gjennom bildegodtgjørelsen mye raskere.

hvis planen din lar deg optimalisere 100 bilder, men hver opplasting genererer 9 ekstra størrelser som også må optimaliseres, når du laster opp 10 bilder. Vær oppmerksom på dette når du legger til egendefinerte størrelser og velger planer for bildeoptimalisering.

Smush Pro har ikke bildeoptimaliseringsgrenser og leveres med EN CDN, slik at du kan holde serverlagringsplassen klar. Du kan legge til flere egendefinerte bildestørrelser enn du normalt ville. Tenk på det som tilsvarer å sette flowy MC Hammer bukser i stedet for små skinny jeans på de babyene fordi stoffet er billig:)

Prøv Smush Pro gratis i 7 dager.

Slik Legger Du Til Egendefinerte Bildestørrelser I WordPress

her er koden vi skal legge til i funksjonsfilen vår for å legge til bildestørrelser:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

denne funksjonen godtar 4 parametere i denne rekkefølgen:

1. navnet du gir den egendefinerte bildestørrelsen
2. bildebredden i piksler
3. bildehøyden i piksler
4. skal bildet beskjæres slik at det passer til bredden og høyden du angav ovenfor

Beskjæring

beskjæringsparameteren er en boolsk, så du bruker sann eller usann. Hvis du forlater det helt, vil det som standard være falsk.

hvis du setter beskjæringsparameteren til true, vil WordPress beskjære bildet ditt slik at det passer til dimensjonene du angir når det oppretter det egendefinerte bildet.

for eksempel, hvis den egendefinerte bildestørrelsen er en 600px x 600px firkant og du setter beskjæring til true, så hvis du laster opp et 600px x 800px rektangulært bilde, vil 200px bli kappet av for å gjøre bildet firkantet.

add_image_size( 'custom-image-square', 600, 600, true );

Innstilling av beskjæringsparameteren til true er nyttig for bildestørrelser som må være nøyaktige, for eksempel utvalgte bilder eller postarkivbilder som må passe perfekt til en bestemt dimensjon.

for bilder som kan ha mer slingringsmonn, for Eksempel WordPress post bildestørrelse og bilder på sider som har en tendens til å ha variable høyder og bredder, så kan du sette beskjæring til false. Dette vil endre størrelsen på bildene, men det vil ikke endre formen på bildet eller kutte av noen piksler.

ta en titt på vår image SEO guide hvis du prøver å drive trafikk til nettstedene dine med bildene dine.

Regenererende Miniatyrbilder

En av de viktigste trinnene når enten:

1. endre WordPress standard bildestørrelser
2. legge til egendefinerte bildestørrelser eller
3. bytte over til et nytt tema som har forskjellige egendefinerte størrelser

regenererer miniatyrbilder.

i denne sammenheng refererer miniatyrbilder til alle de ekstra bildene WordPress lager, inkludert de egendefinerte bildestørrelsene som er inkludert i temaet ditt og de du lager via funksjonsfilen din.

Når Du gjør en endring I Måten WordPress lager flere bilder på, vil Det bare påvirke bildene du laster opp fremover. Det oppdaterer ikke bildene som allerede er i mediebiblioteket.

for å endre bildene du allerede har lastet opp, må du bruke Den populære Regenerere Thumbnails plugin.

etter at du har installert det, finner du det i Verktøy-delen.

når du regenererer miniatyrbildene dine i de nye størrelsene, har du muligheten til å slette gamle ubrukte bildestørrelser for å frigjøre serverplass.

Slik Legger Du Til Egendefinerte Bildestørrelser i Rullegardinmenyen I Gutenberg-bildeblokken

du trenger bare å legge til koden nedenfor i funksjonsfilen din hvis du vil at de egendefinerte bildestørrelsene skal vises i rullegardinmenyen I Gutenberg – bildeblokken. Hvis du har opprettet en egendefinert bildestørrelse for å bruke bak kulissene for temaet, kan du hoppe over dette trinnet.

vi skal hekte på image_size_names_choose – filteret.

i arrayet legger jeg til navnet på den egendefinerte størrelsen jeg angav i funksjonen add_image_size og navnet jeg vil vises i rullegardinmenyen i parentesene.

som jeg lærte når jeg gjorde denne opplæringen, må du regenerere miniatyrbilder før bildet vises i rullegardinlisten.

WordPress Legg Til Bildestørrelse Full Kodebit

Deretter kombinerer vi alt vi lærte i en kodeblokk med et eksempel fra den virkelige verden.

la oss si at du vil legge til egendefinerte bildestørrelser på bloggen din.

her er bildestørrelsene du vil legge til:

• et 1600px ved 400px utvalgt bilde
• en 800px størrelse som spenner over bredden på bloggens innholdsseksjon

siden temaet vårt for øyeblikket ikke støtter utvalgte bilder, begynner vi med det.

du vil da se mine egendefinerte størrelser. Legg merke til at jeg ikke beskjærer bildene som kommer til å strekke bredden på blogginnholdet. Jeg vil hardt beskjære mine utvalgte bilder siden jeg vil at de skal stille opp akkurat.

det eneste bildet jeg vil legge Til I Gutenberg-rullegardinmenyen er bloggbildet siden Jeg skal bruke WordPress-bildestørrelsen i temaet mitt.

Etter at jeg har lagt til denne koden i min functions.php – fil, er neste trinn å regenerere miniatyrbilder.

hvis du vil bruke mitt tilpassede bilde for innleggene mine i løkken, legger jeg til følgende i single.php eller index.php

Se hvordan jeg la til 'featured-large' i the_post_thumbnail() – funksjonen? Det vil vise mitt utvalgte bilde under blogginnleggene mine, over innholdet mitt.

Tilpassede Bildestørrelser Beste Praksis

Her er noen flere tips, slik at du ikke får problemer med å lage egendefinerte bilder I WordPress.

1. last alltid opp den største filen du kan. Hvis bildestørrelsen din er for liten, Vil WordPress ikke kunne lage alle størrelsene den trenger for å betjene bildene dine riktig på en rekke enheter.
2. hvis du må endre størrelsen på medium_large-standardstørrelsen, bruker du funksjonen update_option(). Du kan bruke denne samme funksjonen til å oppdatere alle Andre WordPress standard bildestørrelse.
3. hvis Du er utenfor WordPress-sløyfen, kan du bruke funksjonen get_the_post_thumbnail() for å bruke et av dine egendefinerte bilder.
4. her er mer om myk beskjæring og hard beskjæring når du lager egendefinerte bildestørrelser hvis du får problemer.

Det Er Alt Som Er å Legge Til Egendefinerte Bildestørrelser

når du forstår hvordan egendefinerte bildestørrelser i WordPress fungerer, kan du endre dem for å passe dine behov og spare mye tid. Å få bildestørrelser riktig hjelper deg også med å forbedre nettstedets ytelse og søkemotorrangeringer, så det er viktig å få riktig.

hvis du virkelig vil ta bildeoptimaliseringen til et annet nivå, sjekk Ut Smush. Vi har lagt til en fantastisk CDN Til Smush Pro som har automatisk bildestørrelse, noe som vil hjelpe deg å unngå å håndtere å endre funksjonsfilen din for å legge til egendefinerte bildestørrelser.

Det er også andre flotte bildeoptimaliseringsfunksjoner som kommer innebygd, som lat lasting og konvertering av bilder til neste generasjons formater. Prøv Smush pro gratis i 7 dager og se hvordan bildeoptimaliseringsfunksjonene kan forbedre nettstedet ditt.

Etiketter:

• kode
• bilder