Hvordan lage flere bildestørrelser i WordPress

I forrige måned var det en stor sårbarhet som ble oppdaget i et kjent bilde som endret størrelse på størrelse, kjent som TimThumb. Siden har samfunnet samarbeidet og løst problemene. Selv om TimThumb er et levedyktig alternativ, mener vi at WordPress-temautviklere bør fokusere på å bruke kjernefunksjonene i stedet for å stole på tredjepartsskript. I denne artikkelen vil vi vise deg hvordan du legger til flere bildestørrelser i WordPress.


WordPress har en innebygd funksjon Post Thumbnails aka Featured Images. Det er også en innebygd funksjon add_image_size () som lar deg spesifisere bildestørrelser og gi deg muligheten til å beskjære. Å bruke disse kjernefunksjonene i temaet ditt kan i det vesentlige eliminere behovet for et tredjepartsskript som TimThumb i de fleste tilfeller.

Registrer flere bildestørrelser for ditt tema

Du må starte med å legge til støtte for miniatyrbilder ved å plassere følgende kode i temaets funksjoner.php-fil:

add_theme_support (‘post-miniatyrbilder’);

Når du har aktivert støtten for postminiatyrbilder, kan du nå bruke funksjonaliteten til å registrere flere bildestørrelser med funksjonen add_image_size (). Bruken av add_image_size-funksjonen er slik: add_image_size (‘navn-på-størrelse’, bredde, høyde, beskjæringsmodus);

Eksempelkode kan se slik ut:

add_image_size (‘sidefelt-tommel’, 120, 120, sant); // Hard Crop Mode
add_image_size (‘hjemmeside-tommel’, 220, 180); // Soft Crop Mode
add_image_size (‘singlepost-thumb’, 590, 9999); // Ubegrenset høyde-modus

Nå hvis du legger merke til det, har vi spesifisert tre forskjellige slags bildestørrelser. Hver av dem har forskjellige modus som hard beskjæring, myk avling og ubegrenset høyde. La oss dekke hvert eksempel og hvordan du kan bruke dem til fordelene dine.

Hard Crop Mode – Som du legger merke til, er det en verdi “sann” lagt til etter høyden. Den sanne verdien er å fortelle WordPress å beskjære bildet til størrelsen som vi har definert (i dette tilfellet 120 x 120 px). Dette er metoden vi bruker mye i temautformingene våre for å sikre at alt står i proporsjoner og at designen vår ikke bryter. Denne funksjonen beskjærer bildet automatisk fra sidene eller fra toppen og bunnen avhengig av størrelsen. Ulempen med hard beskjæring er at du ikke kan kontrollere hvilken del av bildet som vises.

Rettelse av Mike Little – Når du har lastet opp et bilde og før du setter inn i posten, kan du klikke på ‘rediger bilde’ og derfra endre miniatyrbildet eller hele bildet, skalere, rotere eller vende bildet, og for miniatyrbildet Velg den nøyaktige delen av bildet du ønsker.

Myk beskjæringsmodus – Som standard er myk beskjæringsmodus slått på. Dette er grunnen til at du ikke ser noen tilleggsverdi lagt til etter høyden. Denne metoden endrer størrelsen på bildet proporsjonalt uten å forvrenge det. Så du får kanskje ikke de dimensjonene du ønsket. Vanligvis samsvarer det med breddedimensjonen og høydene er forskjellige basert på andel av hvert bilde. Et eksempel på displayet vil se slik ut:

Soft Crop-eksempel

Ubegrenset høyde-modus – Det er tider når du har superlange bilder som du vil bruke i designen din, men du vil forsikre deg om at bredden er begrenset. Den viktigste bruken vi finner for denne typen bildestørrelse er på infografiske innlegg. Infografikk har en tendens til å være veldig lang og full av informasjon. Det å ikke beskjære et slikt bilde på en enkelt innleggsside er ikke en god idé. Men av natur er infografikken bredere enn innholdsbredden. Så det du kan gjøre er å spesifisere en bredde som ikke vil ødelegge designen din mens du lar høyden være ubegrenset, slik at all infographic kan vises uten forvrengning. Et eksempel på displayet vil se slik ut:

Eksempel på ubegrenset høyde

Viser flere bildestørrelser i WordPress-temaet

Nå som du har lagt til funksjonaliteten for de ønskede bildestørrelsene, kan vi se på dem i WordPress-temaet. Åpne temafilen der du vil vise bildet og lim inn følgende kode:

<?php the_post_tattnail (‘din-spesifiserte-bildestørrelse’); ?>

Merk: Denne biten kode må limes inn i stolpen.

Det er alt du virkelig trenger å gjøre for å vise de ekstra bildestørrelsene i WordPress-temaet. Du bør sannsynligvis bryte det rundt med stylingen som passer ditt behov.

Regenerere flere bildestørrelser

Hvis du ikke gjør dette på et helt nytt nettsted, må du sannsynligvis gjenopprette miniatyrbilder. Slik funksjonen add_image_size () fungerer, er at den bare genererer størrelsene fra det punktet den ble lagt til i temaet. Så alle innleggsbilder som ble lagt til før inkluderingen av denne funksjonen, vil ikke ha den nye størrelsen. Så hva vi trenger å gjøre er å regenerere den nye bildestørrelsen for eldre innlegg. Dette gjøres enkelt av plugin-en som heter Regenerate Thumbnails. Når du installerer og aktiverer denne plugin, legges et nytt alternativ til under menyen: Verktøy »Regen. miniatyrbilder

Regenerere miniatyrplugin-skjermbildet

Klikk på Regenerere miniatyrikon og la plugin gjøre jobben sin.

En annen plugin som kan gjøre denne jobben er Simple Image Sizes.

Aktivere flere bildestørrelser for innholdet ditt

Selv om du har aktivert bildestørrelser i temaet ditt, er bruken bare begrenset til temaet ditt som ikke gir noen mening. Alle bildestørrelser blir generert uansett, så hvorfor ikke gjøre det tilgjengelig for innleggsforfatteren å bruke det innenfor innleggets innhold. Du kan gjøre dette ved å bruke en plugin som heter Simple Image Sizes.

Når du installerer og aktiverer denne plugin, vil nye alternativer bli lagt til på Innstillinger-mediasiden. Du vil se en liste over størrelser som du definerte i temaet ditt. Alt du trenger å gjøre er å merke av i boksen der det står “Vis i innleggets innlegg”.

Innlegg for innlegg for ytterligere bildestørrelser

Når du har merket av i denne boksen, vil flere størrelser være tilgjengelige for forfatteren å bruke i innlegget.

Flere bildestørrelser for innlegg

Legg merke til på bildet over, vi har alle bildestørrelsene som vi definerte i vårt tema tilgjengelig for forfatterne våre til å bruke i innlegget hvis de ønsker.

Simple Image Størrelser-plugin lar deg også lage tilpassede bildestørrelser direkte fra WordPress-dashbordet.

Vi mener at denne metoden bør legges til under beste praksis for alle WordPress-temautviklere. Hva er dine tanker?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map