Når du installerer et nytt tema på WordPress, passer slideren nesten aldri til innholdsdimensjonene dine. Du har skjermbilder i 16:9, produktomslag, kvadratiske bilder, og temaet beskjærer dem til sine egne proporsjoner. Halve bildet kuttes, og nettstedets hovedvisning ser ut som om den ble satt sammen med lukkede øyne.

Men dette er ikke en temafeil. Dette er hardkodede innstillinger som ligger på tre steder: registrering av miniatyrstørrelse i functions.php, sliderens CSS-beholder og utdatamaler. Det fjerde laget er å regenerere allerede opplastede bilder til den nye størrelsen. Fiks alle fire, så justeres slideren perfekt.

Nedenfor følger en trinnvis gjennomgang med Classy-temaet fra WPExplorer som eksempel. Men logikken er universell: ethvert klassisk tema med en Nivo-slider eller egendefinert slider som bruker add_image_size, redigerer de samme filene.

💡 Rask oversikt:

• Endre add_image_size i functions.php, dette styrer beskjæring ved opplasting
• Rediger width og height på beholderen i style.css slik at layouten ikke kollapser
• Oppdater width- og height-attributter i nivo.php- og content.php-malene slik at nettleseren ikke strekker img-elementet
• Kjør Regenerate Thumbnails på mediebiblioteket ditt, gamle bilder gjenskapes til den nye størrelsen

Hele prosessen vises i denne videoen:

Steg 1. Endre miniatyrstørrelsen i functions.php

Når WordPress laster opp et bilde, prosesserer det bildet gjennom alle registrerte størrelser. Registrering skjer via funksjonen add_image_size. Temaet deklarerer en 980×400 slider, men du trenger 1200×500, så du må redigere her.

Åpne temaets functions.php. Sti: Utseende → Temafilredigering i administrasjonspanelet, eller via FTP på /wp-content/themes/theme-name/. I Classy ligger add_image_size-linjen for slideren rundt linje 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

Første parameter er bredde, andre er høyde, tredje (true) er hard beskjæring. Hvis du setter false, vil WordPress tilpasse bildet langs den minste siden uten beskjæring. Høres fristende ut, men slideren kan «flyte» i høyden fra bilde til bilde.

Sett inn dine verdier og lagre:

1
add_image_size( 'nivo-slider', 1200, 500, true );

Fra dette tidspunktet beskjæres alle nye opplastinger til din størrelse. Gamle er ikke klare ennå, vi kommer til dem i steg 4.

Steg 2. Fiks CSS-beholderen

Du har endret miniatyrstørrelsen. Men sliderbeholderen i layouten lever fortsatt med de gamle verdiene fra CSS. Bildet lastes riktig, men blokken beskjærer det eller etterlater tomrom rundt kantene.

I Classy er Nivo-sliderbeholderen beskrevet i style.css, linjene 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Endre width og height til dine verdier:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Viktig nyanse: dette redigerer spesifikt Nivo-slideren. Innholdsslideren i Classy justerer høyden automatisk basert på innhold, du trenger ikke å røre den. I andre temaer er logikken den samme: finn selektoren for den spesifikke slideren du endrer, og ikke rot med nærliggende.

Steg 3. Oppdater attributter i maler

add_image_size returnerer URL-en til riktig miniatyrbilde. Men sliderens HTML-markup inneholder hardkodede width="980" height="400". Behold de gamle verdiene, så vil nettleseren strekke eller komprimere bildet for å matche dem. Resultat: uskarpt eller sammentrykt bilde, selv om kildebildet er korrekt.

I Classy må to filer redigeres.

Nivo Image Slider, filen includes/sliders/nivo.php, linjene 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider for bildelysbilder, filen includes/sliders/content.php, linjene 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Rediger begge, lagre. Hvis temaet bruker background-image i CSS i stedet for <img>, ikke rør malene, steg 2 er nok.

Steg 4. Regenerer gamle bilder

I steg 1 endret vi add_image_size. Nye opplastinger får riktig beskjæring. Men alle bilder i mediebiblioteket som ble lastet opp før redigeringen, er lagret i den gamle størrelsen. Slideren ser på dem og får feil proporsjoner.

Løsning: utvidelsen Regenerate Thumbnails. Den går gjennom hele mediebiblioteket og gjenskaper miniatyrbilder til de gjeldende registrerte størrelsene. Standard installasjon: Utvidelser → Legg til ny → søk «Regenerate Thumbnails» → Installer → Aktiver.

Etter aktivering: Verktøy → Regenerate Thumbnails → «Regenerate All Thumbnails». For et stort bibliotek tar prosessen et par minutter, utvidelsen utløser regenerering av alle deklarerte størrelser på hvert bilde.

Utvidelsen kan også slette ubrukte miniatyrstørrelser, noe som frigjør serverplass. Etter å ha kjørt den én gang, trenger du den ikke lenger: alle fremtidige opplastinger vil gå gjennom den nye add_image_size-verdien.

Hvis du har konsolltilgang til serveren, er WP-CLI raskere:

1
wp media regenerate --yes

Ingen overhead fra HTTP-forespørsler, og den går ikke i timeout på store biblioteker.

Hva du gjør hvis slideren fortsatt er ødelagt

Noen ganger har du fullført alle fire stegene, men slideren oppfører seg merkelig. Gå gjennom denne sjekklisten:

• CSS-spesifisitet: din nye width/height overstyres av en mer spesifikk selektor i temaet. Åpne nettleserinspektøren og se hvilken regel som faktisk brukes på elementet.
• Cache: tøm nettlesercache (Ctrl+F5). Hvis du har en server-cachingutvidelse som WP Rocket eller LiteSpeed Cache, tøm den også.
• Child theme: å redigere hovedtemaet direkte betyr at endringer forsvinner ved neste oppdatering. Opprett et child theme og flytt redigeringene dine dit.
• Responsivt: er beholderbredden større enn nettstedets bredde? På mobil flyter slideren over kanten. Legg til max-width: 100% og height: auto i en media query for mobil.

Temaoppdatering ødela alt: hvordan beskytte deg

Hovedproblemet med å redigere hovedtemaet: oppdateringer overskriver filer, og endringene dine forsvinner. Slideren går stille tilbake til fabrikkinnstillingene.

Riktig tilnærming er et child theme. Flytt tre ting dit:

• Overstyr add_image_size i child-temaets functions.php via after_setup_theme-hooken;
• Overstyr CSS, child-temaets style.css lastes etter hovedtemaet, dine regler vinner ved kaskade;
• Slider-maler, kopier nivo.php og content.php inn i child-temaet med samme mappestruktur (includes/sliders/). WordPress plukker automatisk opp versjonen fra child-temaet.

Etter dette utgjør oppdateringer av hovedtemaet ingen trussel mot størrelsene dine.

⁉️🤔 Ofte stilte spørsmål

Må jeg redigere alle tre filene: functions.php, style.css og maler?

Ja, ellers blir resultatet ufullstendig. Endret du bare add_image_size uten CSS, vil beholderen beskjære det nye bildet. Uten maler vil nettleseren strekke bildet til gammel width/height, og det blir uskarpt. Tre redigeringer gir konsistent størrelse på tvers av alle lag: miniatyrregistrering → beholder → HTML-attributter.

Trenger jeg å røre content.php hvis jeg bare bruker Nivo-slideren?

Nei. content.php er for innholdsslideren, den som henter tekst og bilder fra innlegg. Hvis innholdsslideren ikke brukes på nettstedet, kan du hoppe over filen. Men ved tvil tar redigeringen et minutt, bedre å gjøre begge.

Vil Regenerate Thumbnails-utvidelsen slette originalene mine?

Nei. Det originale bildet i full størrelse forblir urørt. Utvidelsen gjenskaper kun miniatyrbilder: størrelsene registrert via add_image_size og Innstillinger → Media. Alternativet for å slette ubrukte størrelser rører heller ikke originalen, det rydder opp i «foreldreløse» miniatyrbilder som ikke er deklarert i temaet eller utvidelser.

Hva hvis add_image_size ikke er i temaet og slideren fungerer annerledes?

Noen moderne temaer bruker ikke add_image_size for slideren. I stedet laster de originalbildet og styrer størrelsen gjennom CSS: object-fit: cover eller background-size: cover. I så fall er steg 2 nok, rediger kun CSS-beholderen. Sjekk i nettleserinspektøren hvilken URL som faktisk lastes i slideren: hvis det er image.jpg uten et -980x400-suffiks, trenger du ikke steg 1 og 4.

Trenger jeg en sikkerhetskopi før jeg redigerer functions.php?

Absolutt. Én skrivefeil i functions.php, og nettstedet krasjer til en White Screen of Death. Før redigering, last ned filen via FTP eller kopier innholdet til et tekstredigeringsprogram. Hvis nettstedet krasjer, last opp den originale functions.php igjen, så gjenopplives nettstedet umiddelbart.

Egendefinert slider: endelig oppsummering

Algoritmen er universell for ethvert klassisk WordPress-tema: størrelsesregistrering → CSS-beholder → HTML-maler → regenerer gamle bilder. Fire steg, så fungerer slideren i dine proporsjoner uten beskjæring eller uskarphet.

Hovedsaken er å ikke redigere hovedtemaet direkte. Flytt endringer til et child theme rett etter at du har bekreftet at størrelsene passer. Da vil ingen oppdatering rulle slideren tilbake til fabrikkinnstillingene.