Hvordan lage WordPress Images Responsive
WordPress er en veldig kraftig plattform. Å lage et responsivt tema og integrere det er ganske enkelt når du vet det grunnleggende om temaet. Responsive bilder, derimot, er ikke noe WordPress avtaler med ut av boksen. Du kan gå ned i ruten for å manuelt generere hver bildestørrelse, og i HTML-editoren kan du manuelt skrive inn bilde-taggen, srcset- attributter og hvert bilde. Dette vil ikke bare ta tid, men kan være et problem for alle admin brukere som ikke er HTML-literate.
Heldigvis er det en måte å få WordPress til å gjøre alt tungt løft. Det kan generere alle bildestørrelsene fra en enkelt bildeopplasting, og gjennom et plugin implementerer du bildetaket og srcset- attributter hvor som helst forfatteren velger å sette inn et bilde.
Trinn 1: Modifiser functions.php for å generere flere bildestørrelser
Hver gang du laster opp et bilde, lagrer WordPress det ved sin innfødte størrelse. Det genererer også automatisk 3 størrelser i størrelse i disse standardstørrelsene (enten høyde eller bredde kan endres basert på bildeforhold):
- Miniatyrbilde (150 × 150)
- Medium (300 × 300)
- Stort (1024 × 1024)
Dette er en veldig kraftig funksjon som det kan tilpasses for å lage hvilken som helst bildestørrelse. Dette betyr at du ikke trenger å lage flere kopier av et bilde i forskjellige størrelser. Du laster bare opp et enkelt bilde, og WordPress lager de endrede kopiene.
Dette gjøres ved å endre funksjonsfilen. For å legge til nye bildestørrelser må du legge til anrop i add_image_size- funksjonen. Her er et eksempel som legger til fire nye bildestørrelser:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Hver samtale til funksjonen inneholder et navn (så WordPress kan identifisere størrelsen) og en bredde. De nye størrelsene vil være 300, 600, 1200 og 2400 piksler bredt. Det er mulig med add_image_size funksjonen for å få WordPress til å sette høyden eller beskjære bildet, men eksemplet ovenfor vil beholde det opprinnelige bildet aspektforholdet. (Mer kan bli funnet ut om add_image_size funksjonen i WordPress Codex .)
Eksemplet ovenfor viser bare at fire nye bildestørrelser blir lagt til, men du vil kanskje legge til mer eller mindre ... dette vil være basert på temaet ditt. Nå når et bilde lastes opp til WordPress, vil det generere de nye bildestørrelsene. Det neste trinnet er å inkludere dem i HTML-koden.
Trinn 2: installer RICG Responsive Images plugin
For at WordPress skal kunne sende ut alle bildestørrelsene, må det installeres et nytt plugin: RICG Responsive Images plugg inn. Når den er installert og aktivert, vil alle bildestørrelsene bli inkludert i bildemerket via srcset-attributtet.
Vanligvis når et bilde er lagt til på en side i WordPress, ser utdata HTML ut slik:
Det er et enkelt bilde i src-attributtet.
Når plugin er installert, ser HTML ut slik:
Alle de nye bildestørrelsene er lagt til via srcset- attributtet.
Pluggen inneholder også Picturefill.js , en responsiv bilde polyfill som legger til støtte for både bildeelementet og de nye responsive attributter for img-elementet. Dette, sammen med srcset- attributter som nå er inkludert i bildeetiketten, er det som gjør bildene dine følsomme.
Bildene dine er nå lydhør
Nå vil bildene på nettstedet ditt være responsive - nettleseren vil velge det mest hensiktsmessige bildet som skal lastes ned.
Brukere på enheter med mindre skjermer får de mindre bildene. Nettstedet ditt lastes raskere da disse bildene lastes ned raskere, de trenger mindre av brukerens båndbredde. Brukere på enheter med større skjermer får de større bildene. De vises ikke pixelert eller av mindre kvalitet.
Det er bare ett potensielt problem med denne metoden: Den vil bare fungere med bilder lastet opp til WordPress etter at RICG Responsive Images-pluginet er installert. Hvis det er et helt nytt nettsted du jobber med, kan dette ikke være et problem, men hvis det er et eksisterende nettsted med eksisterende innhold, vil de nye bildestørrelsene du har lagt til i functions.php ikke blitt generert. Heldigvis trenger du ikke å legge til alle bildene igjen - det er et plugin som kan hjelpe.
Trinn 3: Installer plugin for å generere bildestørrelser (valgfritt)
De Regenerere miniatyrbilder plugin vil gå gjennom alle eksisterende bildevedlegg og generere de nye bildestørrelsene basert på de nye som er opprettet i functions.php - det er en sanntidsbeskytter og krever bare et enkelt klikk.
Når du er installert, går du til Verktøy -> Regen. Miniatyrbilder klikker du på "Regenerere alle miniatyrbilder" -knappen. En statuslinje vises, og du vil se informasjonen om hvor mange bilder som har blitt endret.
Nå vil alle eksisterende bilder på nettstedet ditt bli lagt ut riktig ved hjelp av bilde-taggen via srcset- attributtet.
Utvalgte bildebruk enhetsbilde og mobil enhet bilde via Shutterstock.