Quando installi un tema nuovo su WordPress, lo slider quasi mai si adatta alle dimensioni dei tuoi contenuti. Hai screenshot in 16:9, copertine di prodotti, immagini quadrate, e il tema le ritaglia secondo le sue proporzioni. Metà dell'inquadratura viene tagliata via e la vetrina principale del tuo sito sembra assemblata a occhi chiusi.

Ma non è un bug del tema. Si tratta di impostazioni cablate che risiedono in tre punti: la registrazione delle dimensioni delle miniature in functions.php, il contenitore CSS dello slider e i template di output. Il quarto livello è la rigenerazione delle immagini già caricate con la nuova dimensione. Sistema tutti e quattro e lo slider si allinea perfettamente.

Qui sotto trovi una guida passo passo usando il tema Classy di WPExplorer come esempio. Ma la logica è universale: qualsiasi tema classico con uno slider Nivo o uno slider personalizzato che usa add_image_size modifica gli stessi file.

💡 Panoramica rapida:

• Modifica add_image_size in functions.php, questo controlla il ritaglio al momento del caricamento
• Modifica width e height del contenitore in style.css così che il layout non collassi
• Aggiorna gli attributi width e height nei template nivo.php e content.php così che il browser non stiri l'img
• Esegui Regenerate Thumbnails sulla tua libreria media, le vecchie immagini vengono ricreate con la nuova dimensione

L'intero processo è mostrato in questo video:

Step 1. Modificare la dimensione della miniatura in functions.php

Quando WordPress carica un'immagine, la elabora attraverso tutte le dimensioni registrate. La registrazione avviene tramite la funzione add_image_size. Il tema dichiara uno slider 980×400, ma tu hai bisogno di 1200×500, quindi devi modificare qui.

Apri il file functions.php del tema. Percorso: Aspetto → Editor file del tema nel pannello di amministrazione, oppure via FTP in /wp-content/themes/theme-name/. In Classy, la riga add_image_size per lo slider è intorno alla riga 122:

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

Il primo parametro è la larghezza, il secondo l'altezza, il terzo (true) è il ritaglio forzato. Se imposti false, WordPress adatterà l'immagine lungo il lato più corto senza ritagliare. Sembra allettante, ma lo slider può "fluttuare" in altezza da un'immagine all'altra.

Sostituisci i tuoi valori e salva:

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

Da questo momento in poi, tutti i nuovi caricamenti vengono ritagliati alla tua dimensione. Quelli vecchi non ancora, ci arriveremo allo step 4.

Step 2. Correggere il contenitore CSS

Hai cambiato la dimensione della miniatura. Ma il contenitore dello slider nel layout vive ancora con i vecchi valori del CSS. L'immagine si carica correttamente, ma il blocco la ritaglia o lascia spazio vuoto intorno ai bordi.

In Classy, il contenitore dello slider Nivo è descritto in style.css, righe 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
}

Modifica width e height con i tuoi valori:

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
}

Sfumatura importante: questo modifica specificamente lo slider Nivo. Il Content Slider in Classy regola l'altezza automaticamente in base al contenuto, non devi toccarlo. In altri temi la logica è la stessa: trova il selettore per lo slider specifico che stai modificando e non pasticciare con quelli vicini.

Step 3. Aggiornare gli attributi nei template

add_image_size restituisce l'URL della miniatura corretta. Ma il markup HTML dello slider contiene width="980" height="400" cablati. Lascia i vecchi valori e il browser stirerà o comprimerà l'immagine per adattarli. Risultato: immagine sfocata o schiacciata, anche se la sorgente è corretta.

In Classy, due file necessitano di modifica.

Nivo Image Slider, file includes/sliders/nivo.php, righe 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 per slide con immagine, file includes/sliders/content.php, righe 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>

Modifica entrambi, salva. Se il tema usa background-image nel CSS invece di <img>, non toccare i template, lo step 2 è sufficiente.

Step 4. Rigenerare le vecchie immagini

Nello step 1 abbiamo modificato add_image_size. I nuovi caricamenti vanno con il ritaglio corretto. Ma tutte le immagini nella libreria media caricate prima della modifica sono memorizzate alla vecchia dimensione. Lo slider le guarda e ottiene le proporzioni sbagliate.

Soluzione: il plugin Regenerate Thumbnails. Scorre l'intera libreria media e ricrea le miniature secondo le dimensioni attualmente registrate. Installazione standard: Plugin → Aggiungi nuovo → cerca "Regenerate Thumbnails" → Installa → Attiva.

Dopo l'attivazione: Strumenti → Regenerate Thumbnails → "Regenerate All Thumbnails". Per una libreria grande, il processo richiede un paio di minuti, il plugin attiva la rigenerazione di tutte le dimensioni dichiarate su ogni immagine.

Il plugin può anche eliminare le dimensioni delle miniature inutilizzate, liberando spazio sul server. Dopo averlo eseguito una volta, non ti servirà più: tutti i caricamenti futuri passeranno attraverso il nuovo valore di add_image_size.

Se hai accesso alla console del server, WP-CLI è più veloce:

1
wp media regenerate --yes

Nessun overhead di richieste HTTP e non va in timeout su librerie grandi.

Cosa fare se lo slider continua a non funzionare

A volte hai completato tutti e quattro gli step, ma lo slider si comporta in modo strano. Ripercorri questa checklist:

• Specificità CSS: i tuoi nuovi width/height vengono sovrascritti da un selettore più specifico nel tema. Apri l'ispettore del browser e guarda quale regola viene effettivamente applicata all'elemento.
• Cache: svuota la cache del browser (Ctrl+F5). Se hai un plugin di caching lato server come WP Rocket o LiteSpeed Cache, svuota anche quella.
• Tema child: modificare direttamente il tema parent significa che le modifiche vengono cancellate al prossimo aggiornamento. Crea un tema child e sposta lì le tue modifiche.
• Responsive: la larghezza del contenitore è maggiore della larghezza del sito? Su mobile, lo slider fuoriesce dal bordo. Aggiungi max-width: 100% e height: auto in una media query per il mobile.

L'aggiornamento del tema ha rotto tutto: come proteggersi

Il principale problema della modifica del tema parent: gli aggiornamenti sovrascrivono i file e le tue modifiche spariscono. Lo slider torna silenziosamente alle impostazioni di fabbrica.

L'approccio corretto è un tema child. Sposta lì tre cose:

• Sovrascrivi add_image_size nel functions.php del tema child tramite l'hook after_setup_theme;
• Sovrascrivi il CSS, il style.css child si carica dopo il parent, le tue regole vincono per cascata;
• Template dello slider, copia nivo.php e content.php nel tema child con la stessa struttura di cartelle (includes/sliders/). WordPress rileva automaticamente la versione dal child.

Dopo questo, gli aggiornamenti del tema parent non rappresentano una minaccia per le tue dimensioni.

⁉️🤔 Domande frequenti

Devo modificare tutti e tre i file: functions.php, style.css e template?

Sì, altrimenti il risultato sarà incompleto. Modificato solo add_image_size senza CSS, e il contenitore ritaglia la nuova immagine. Senza i template, il browser stira l'immagine ai vecchi width/height e diventa sfocata. Tre modifiche danno un dimensionamento coerente su tutti i livelli: registrazione miniatura → contenitore → attributi HTML.

Devo toccare content.php se uso solo lo slider Nivo?

No. content.php è per il content slider, quello che preleva testo e immagini dai post. Se il content slider non è usato sul sito, puoi saltare il file. Ma nel dubbio, la modifica richiede un minuto, meglio farle entrambe.

Il plugin Regenerate Thumbnails cancellerà i miei originali?

No. L'immagine originale a piena risoluzione rimane intatta. Il plugin ricrea solo le miniature: le dimensioni registrate via add_image_size e Impostazioni → Media. Anche l'opzione per eliminare le dimensioni inutilizzate non tocca l'originale, pulisce le miniature "orfane" non dichiarate nel tema o nei plugin.

Cosa succede se add_image_size non è nel tema e lo slider funziona diversamente?

Alcuni temi moderni non usano add_image_size per lo slider. Invece, caricano l'immagine originale e controllano la dimensione tramite CSS: object-fit: cover o background-size: cover. In questo caso, lo step 2 è sufficiente, modifica solo il contenitore CSS. Controlla nell'ispettore del browser quale URL viene effettivamente caricato nello slider: se è image.jpg senza un suffisso -980x400, non ti servono gli step 1 e 4.

Devo fare un backup prima di modificare functions.php?

Assolutamente sì. Un errore di battitura in functions.php e il sito va in crash con una Schermata Bianca della Morte. Prima di modificare, scarica il file via FTP o copia il contenuto in un editor di testo. Se il sito va in crash, ricarica il functions.php originale, il sito rinasce all'istante.

Slider personalizzato: riepilogo finale

L'algoritmo è universale per qualsiasi tema WordPress classico: registrazione dimensione → contenitore CSS → template HTML → rigenera vecchie immagini. Quattro step e lo slider funziona con le tue proporzioni senza ritagli o sfocature.

La cosa principale è non modificare direttamente il tema parent. Sposta le modifiche in un tema child subito dopo aver confermato che le dimensioni vanno bene. Così nessun aggiornamento riporterà lo slider alle impostazioni di fabbrica.