När du installerar ett nytt tema på WordPress passar bildspelet nästan aldrig dina innehållsmått. Du har skärmdumpar i 16:9, produktomslag, kvadratiska bilder, och temat beskär dem till sina egna proportioner. Halva bilden kapas, och sajtens främsta visningsyta ser ut som om den satts ihop med förbundna ögon.

Men det här är ingen temabugg. Det handlar om hårdkodade inställningar som finns på tre ställen: registrering av miniatyrstorlekar i functions.php, bildspelets CSS-behållare och utdataramar. Det fjärde lagret är att återskapa redan uppladdade bilder i den nya storleken. Åtgärda alla fyra, så hamnar bildspelet perfekt i linje.

Här följer en steg-för-steg-genomgång med temat Classy från WPExplorer som exempel. Men logiken är universell: alla klassiska teman med ett Nivo-bildspel eller ett anpassat bildspel som använder add_image_size redigerar samma filer.

💡 Snabb översikt:

• Ändra add_image_size i functions.php, den styr beskärning vid uppladdning
• Redigera width och height för behållaren i style.css så att layouten inte kollapsar
• Uppdatera attributen width och height i mallarna nivo.php och content.php så att webbläsaren inte sträcker ut img
• Kör Regenerate Thumbnails på ditt mediebibliotek, gamla bilder återskapas i den nya storleken

Hela processen visas i den här videon:

Steg 1. Ändra miniatyrstorleken i functions.php

När WordPress laddar upp en bild bearbetas den genom alla registrerade storlekar. Registreringen sker via funktionen add_image_size. Temat deklarerar ett bildspel på 980×400, men du behöver 1200×500, så du måste redigera här.

Öppna temats functions.php. Sökväg: Appearance → Theme File Editor i adminpanelen, eller via FTP på /wp-content/themes/theme-name/. I Classy ligger raden add_image_size för bildspelet runt rad 122:

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

Första parametern är bredd, andra är höjd, tredje (true) är hård beskärning. Om du anger false kommer WordPress att anpassa bilden längs den mindre sidan utan beskärning. Låter lockande, men bildspelet kan "flyta" i höjd från bild till bild.

Sätt in dina värden och spara:

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

Från och med nu beskärs alla nya uppladdningar till din storlek. Gamla bilder är det inte än, vi tar itu med dem i steg 4.

Steg 2. Åtgärda CSS-behållaren

Du har ändrat miniatyrstorleken. Men bildspelets behållare i layouten lever fortfarande kvar med de gamla värdena från CSS. Bilden laddas korrekt, men blocket beskär den antingen eller lämnar tomt utrymme runt kanterna.

I Classy beskrivs Nivo-bildspelets behållare i style.css, raderna 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
}

Ändra width och height till dina värden:

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 nyans: detta redigerar specifikt Nivo-bildspelet. Content Slider i Classy justerar höjden automatiskt baserat på innehåll, du behöver inte röra den. I andra teman är logiken densamma: hitta selektorn för det specifika bildspel du ändrar, och rör inte de intilliggande.

Steg 3. Uppdatera attribut i mallar

add_image_size returnerar URL:en till rätt miniatyr. Men bildspelets HTML-uppmärkning innehåller hårdkodade width="980" height="400". Lämnar du de gamla värdena kommer webbläsaren att sträcka ut eller trycka ihop bilden för att matcha dem. Resultat: suddig eller ihoptryckt bild, trots att källan är korrekt.

I Classy behöver två filer redigeras.

Nivo Image Slider, filen includes/sliders/nivo.php, raderna 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 för bildslides, filen includes/sliders/content.php, raderna 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>

Redigera båda, spara. Om temat använder background-image i CSS istället för <img>, rör inte mallarna, steg 2 räcker.

Steg 4. Återskapa gamla bilder

I steg 1 ändrade vi add_image_size. Nya uppladdningar får korrekt beskärning. Men alla bilder i mediebiblioteket som laddats upp före redigeringen är lagrade i den gamla storleken. Bildspelet tittar på dem och får fel proportioner.

Lösning: tillägget Regenerate Thumbnails. Det går igenom hela mediebiblioteket och återskapar miniatyrer till de aktuella registrerade storlekarna. Standardinstallation: Plugins → Add New → sök "Regenerate Thumbnails" → Install → Activate.

Efter aktivering: Tools → Regenerate Thumbnails → "Regenerate All Thumbnails". För ett stort bibliotek tar processen ett par minuter, tillägget utlöser återskapande av alla deklarerade storlekar för varje bild.

Tillägget kan också radera oanvända miniatyrstorlekar, vilket frigör serverutrymme. Efter att ha kört det en gång behöver du det inte längre: alla framtida uppladdningar kommer att gå genom det nya add_image_size-värdet.

Om du har konsollåtkomst till servern är WP-CLI snabbare:

1
wp media regenerate --yes

Ingen overhead från HTTP-förfrågningar, och det drabbas inte av timeout vid stora bibliotek.

Vad du ska göra om bildspelet fortfarande krånglar

Ibland har du genomfört alla fyra stegen, men bildspelet beter sig konstigt. Gå igenom den här checklistan:

• CSS-specificitet: din nya width/height skrivs över av en mer specifik selektor i temat. Öppna webbläsarens inspector och se vilken regel som faktiskt tillämpas på elementet.
• Cache: rensa webbläsarens cache (Ctrl+F5). Om du har ett servercachingtillägg som WP Rocket eller LiteSpeed Cache, rensa det också.
• Child theme: att redigera föräldratemat direkt innebär att ändringar raderas vid nästa uppdatering. Skapa ett child theme och flytta dina redigeringar dit.
• Responsiv: är behållarens bredd större än sajtens bredd? På mobil rinner bildspelet över kanten. Lägg till max-width: 100% och height: auto i en media query för mobil.

Temauppdatering förstörde allt: hur du skyddar dig

Den största smärtan med att redigera föräldratemat: uppdateringar skriver över filer, och dina ändringar försvinner. Bildspelet återgår tyst till fabriksinställningarna.

Rätt tillvägagångssätt är ett child theme. Flytta tre saker dit:

• Åsidosätt add_image_size i child-temats functions.php via hooken after_setup_theme;
• Åsidosätt CSS, child-temats style.css laddas efter förälderns, dina regler vinner genom kaskaden;
• Bildspelsmallar, kopiera nivo.php och content.php till child-temat med samma mappstruktur (includes/sliders/). WordPress hämtar automatiskt versionen från child-temat.

Efter detta utgör uppdateringar av föräldratemat inget hot mot dina storlekar.

⁉️🤔 Vanliga frågor

Måste jag redigera alla tre filerna: functions.php, style.css och mallar?

Ja, annars blir resultatet ofullständigt. Ändrade du bara add_image_size utan CSS beskär behållaren den nya bilden. Utan mallar sträcker webbläsaren bilden till de gamla width/height, och den blir suddig. Tre redigeringar ger konsekvent storlek över alla lager: miniatyrregistrering → behållare → HTML-attribut.

Behöver jag röra content.php om jag bara använder Nivo-bildspelet?

Nej. content.php är för innehållsbildspelet, det som hämtar text och bilder från inlägg. Om innehållsbildspelet inte används på sajten kan du hoppa över filen. Men vid tvekan tar redigeringen en minut, bättre att göra båda.

Kommer tillägget Regenerate Thumbnails att radera mina original?

Nej. Den ursprungliga bilden i full storlek förblir orörd. Tillägget återskapar bara miniatyrer: de storlekar som registrerats via add_image_size och Settings → Media. Alternativet att radera oanvända storlekar rör inte heller originalet, det rensar upp "föräldralösa" miniatyrer som inte deklarerats i temat eller tillägg.

Vad gör jag om add_image_size inte finns i temat och bildspelet fungerar annorlunda?

Vissa moderna teman använder inte add_image_size för bildspelet. Istället laddar de originalbilden och styr storleken via CSS: object-fit: cover eller background-size: cover. I så fall räcker steg 2, redigera bara CSS-behållaren. Kontrollera i webbläsarens inspector vilken URL som faktiskt laddas i bildspelet: om det är image.jpg utan suffixet -980x400 behöver du inte steg 1 och 4.

Behöver jag en backup innan jag redigerar functions.php?

Absolut. Ett enda skrivfel i functions.php, och sajten kraschar till en White Screen of Death. Innan du redigerar, ladda ner filen via FTP eller kopiera innehållet till en textredigerare. Om sajten kraschar, ladda upp den ursprungliga functions.php igen, sajten återuppstår omedelbart.

Anpassat bildspel: slutlig sammanfattning

Algoritmen är universell för alla klassiska WordPress-teman: storleksregistrering → CSS-behållare → HTML-mallar → återskapa gamla bilder. Fyra steg, och bildspelet fungerar i dina proportioner utan beskärning eller suddighet.

Huvudsaken är att inte redigera föräldratemat direkt. Flytta ändringar till ett child theme direkt efter att du bekräftat att storlekarna passar. Då kommer ingen uppdatering att rulla tillbaka bildspelet till fabriksinställningarna.