Skip to content

Tutto per WordPress, lo sviluppo web — e non solo

🖼 Immagini in evidenza di WordPress: configurazione, installazione automatica e messa a punto

🖼 Immagini in evidenza di WordPress: configurazione, installazione automatica e messa a punto

Un muro di testo senza immagini è il modo più sicuro per perdere lettori nei primi cinque secondi. L’immagine in evidenza funziona come copertina del post: è ciò che le persone vedono nel feed, nei widget e nelle anteprime sui social media. Vende il clic prima ancora che qualcuno legga il titolo.

Il problema è che WordPress non obbliga gli autori a impostare una miniatura. Un post spicca con una foto enorme, un altro si riduce a un quadratino minuscolo, un terzo non ha alcuna immagine. La home page diventa un caos visivo e Facebook e Telegram recuperano un logo a caso invece di un’anteprima sensata.

Ecco una guida completa sul funzionamento dell’immagine in evidenza: da come aggiungere la prima miniatura ai controlli obbligatori prima della pubblicazione. Con codice funzionante, un plugin specifico e istruzioni passo passo.

💡 Panoramica rapida:

  • Aggiungere un’immagine in evidenza dalla barra laterale dell’editor
  • Capire le dimensioni: cosa fa WordPress dietro le quinte e come riconfigurarlo
  • Installare Simple Image Sizes e regolare le dimensioni per il tuo tema
  • Automatizzare l’impostazione della miniatura con codice in functions.php
  • Gestire gli autori distratti: senza immagine, il post va in bozza

Come funzionano le immagini in evidenza

L’immagine in evidenza (o miniatura del post) è un meta campo che il tema utilizza per l’output in tre punti chiave:

  • Home page e archivi. Un’anteprima con immagine ottiene esponenzialmente più clic di un semplice link testuale.
  • L’intestazione del post stesso. Il tema mostra la miniatura sopra o appena sotto il titolo, spesso a tutta larghezza del contenuto.
  • Social network. Facebook, X e Telegram recuperano l’immagine in evidenza tramite Open Graph. Se manca, il network usa la prima immagine che trova.

Questa funzione è da tempo uno standard di WordPress. Oggi è impossibile trovare un tema decente che non la supporti. Ma la qualità dell’implementazione varia ancora da sviluppatore a sviluppatore: un tema mostra la miniatura come un banner pulito, un altro allarga un quadratino minuscolo a tutta larghezza.

Aggiungere un’immagine in evidenza: meccanica di base

Nell’editor dei post (Gutenberg o Classic), c’è un pannello «Immagine in evidenza» sulla destra. Clicca su «Imposta immagine in evidenza», carica un file o scegli dalla libreria media, clicca su «Imposta». Fatto.

Una sfumatura: WordPress non obbliga l’autore a impostare un’immagine. Se la dimentica, la pubblicazione finisce nel feed con uno spazio vuoto. Affronteremo la soluzione a questo problema nella sezione sui controlli obbligatori.

Dimensioni delle immagini: cosa fa WordPress dietro le quinte

Ogni installazione di WordPress include quattro dimensioni predefinite:

  • Originale, il file originale non modificato
  • Miniatura, un quadrato (di default 150×150 px secondo le impostazioni media di WordPress), ritagliato dal centro
  • Media, scalata a una larghezza massima data, senza ritaglio
  • Grande, come sopra ma con un limite più alto
Impostazioni predefinite delle dimensioni dei media nella bacheca di WordPress

Le impostazioni si trovano in «Impostazioni → Media». Quando carica una nuova immagine su WordPress, WordPress genera tutte e quattro le versioni più le dimensioni aggiuntive registrate dal tema attivo. Ogni versione finisce in wp-content/uploads/ come file separato.

Perché così tante copie? Senza, un designer dovrebbe ridimensionare manualmente ogni formato per una specifica posizione di output. Con queste, il tema richiede semplicemente la variante necessaria tramite the_post_thumbnail('medium') o wp_get_attachment_image_src(). Per approfondire l’architettura del sottosistema media, consulta la documentazione ufficiale di WordPress.

La miniatura è l’unica dimensione che viene ritagliata forzatamente. Le altre vengono scalate mantenendo le proporzioni.

Modificare la dimensione dell’immagine in evidenza

I temi usano dimensioni diverse. Quando si cambia tema o per una nuova esigenza, la dimensione dell’immagine in evidenza potrebbe richiedere una regolazione.

Per prima cosa controlla le impostazioni del tema: «Aspetto → Personalizza». I temi moderni spesso offrono uno slider o un menu a tendina per larghezza e altezza della miniatura. Se lo trovi, modificalo in due clic.

Se non lo trovi, nessun problema. Il plugin Simple Image Sizes risolve il problema senza scrivere una sola riga di codice.

Simple Image Sizes: lo strumento giusto per le dimensioni

Plugin Simple Image Sizes nell'elenco dei plugin installati di WordPress

Plugin gratuito di Nicolas Juen, attivamente mantenuto (versione corrente 3.2.5, richiede PHP 8.0+). Dopo l’installazione, vai su «Impostazioni → Media» e vedrai tutte le dimensioni registrate, incluse quelle che il tema ha aggiunto ma nascosto alla vista.

Pagina delle impostazioni delle dimensioni delle immagini con il plugin Simple Image Sizes

Per ogni dimensione, imposta larghezza e altezza. Per l’immagine in evidenza, orientati su come il tema la visualizza. Banner a tutta larghezza del contenuto, usa 1200×630 px (ottimale per i social network secondo le raccomandazioni Facebook Open Graph). Miniatura quadrata in una griglia, 400×400 o 600×600 px.

Vantaggi:

  • Vede tutte le dimensioni, incluse quelle nascoste dal tema
  • Permette di abilitare e disabilitare la visualizzazione delle dimensioni nel menu a tendina di inserimento media
  • Genera codice PHP add_image_size() già pronto per il trasferimento nel tema

Svantaggi:

  • Richiede PHP 8.0+, non funziona su hosting francamente obsoleti
  • Interfaccia minimalista, nessun suggerimento visivo

Prezzo: gratuito, nessuna versione Pro.

🔗 Simple Image Sizes su WordPress.org

Cosa fare con le immagini vecchie

WordPress applica le nuove dimensioni solo ai caricamenti successivi. Tutto ciò che hai caricato prima resta con le dimensioni originali.

Funzione di rigenerazione delle miniature nel plugin Simple Image Sizes

Anche Simple Image Sizes copre questa esigenza. Nella pagina «Impostazioni → Media», scorri fino al blocco di rigenerazione. Seleziona la dimensione desiderata, specifica il tipo di contenuto e avvia la ricostruzione. Il plugin esaminerà tutte le immagini esistenti e creerà nuove copie con le dimensioni aggiornate.

Attenzione: sui siti con decine di migliaia di file, la rigenerazione consuma spazio sul server. WordPress non elimina le vecchie miniature, che restano nella cartella come peso morto. Prima di una rigenerazione massiva, assicurati di avere spazio su disco.

Impostazione automatica dell'immagine in evidenza

Quando un articolo contiene immagini ma l'immagine in evidenza è vuota, WordPress può prendere la prima immagine dal contenuto e assegnarla come miniatura. Comodo per gli autori che dimenticano regolarmente questo passaggio e per i blog con pubblicazione in flusso.

Il meccanismo è semplice: se l'immagine in evidenza non è impostata manualmente, la funzione trova la prima immagine allegata tramite get_children e la imposta con set_post_thumbnail().

Il codice va aggiunto al functions.php del tema attivo. Consiglio vivamente di farlo tramite il plugin WPCode: un errore di battitura nel functions.php senza questo accorgimento manda in crash l'intero sito:

1function autoset_featured() {
2 global $post;
3 $already_has_thumb = has_post_thumbnail( $post->ID );
4 if ( ! $already_has_thumb ) {
5 $attached_image = get_children( array(
6 'post_parent' => $post->ID,
7 'post_type' => 'attachment',
8 'post_mime_type' => 'image',
9 'numberposts' => 1,
10 ) );
11 if ( $attached_image ) {
12 foreach ( $attached_image as $attachment_id => $attachment ) {
13 set_post_thumbnail( $post->ID, $attachment_id );
14 }
15 }
16 }
17}
18
19add_action( 'the_post', 'autoset_featured' );
20add_action( 'save_post', 'autoset_featured' );
21add_action( 'draft_to_publish', 'autoset_featured' );
22add_action( 'new_to_publish', 'autoset_featured' );
23add_action( 'pending_to_publish', 'autoset_featured' );
24add_action( 'future_to_publish', 'autoset_featured' );

La funzione si attiva su sei hook: the_post, save_post e tutte le transizioni di stato *_to_publish. Dopo l'assegnazione, la miniatura rimane anche se rimuovi l'immagine dal corpo dell'articolo.

Svantaggio: se l'autore non ha inserito nemmeno un'immagine nel testo, non ci sarà alcuna miniatura. Per questo scenario, vedi la sezione successiva.

Controllo obbligatorio: nessuna miniatura, nessuna pubblicazione

Metodo semplice e rigido: l'autore clicca su «Pubblica» e WordPress salva l'articolo come bozza mostrando un avviso. Senza immagine in evidenza, la pubblicazione non va a buon fine.

Due frammenti di codice nel functions.php:

Parte 1, controllo al salvataggio (solo per il tipo post):

1add_action( 'save_post', 'pu_validate_thumbnail' );
2
3function pu_validate_thumbnail( $post_id ) {
4 if ( get_post_type( $post_id ) != 'post' ) {
5 return;
6 }
7
8 if ( ! has_post_thumbnail( $post_id ) ) {
9 set_transient( 'pu_validate_thumbnail_failed', 'true' );
10 remove_action( 'save_post', 'pu_validate_thumbnail' );
11 wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12 add_action( 'save_post', 'pu_validate_thumbnail' );
13 } else {
14 delete_transient( 'pu_validate_thumbnail_failed' );
15 }
16}

Parte 2, messaggio di errore in amministrazione:

1add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
3function pu_validate_thumbnail_error() {
4 if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5 echo '<div class="notice notice-error"><p><strong>You must set a featured image before publishing.</strong></p></div>';
6 delete_transient( 'pu_validate_thumbnail_failed' );
7 }
8}

Il testo del messaggio è completamente personalizzabile: sostituisci la stringa dentro <p><strong>...</strong></p> con la tua.

Anteprima della miniatura nell'elenco articoli

La tabella standard «Articoli → Tutti gli articoli» mostra titolo, autore, categorie, tag e data. L'immagine in evidenza non c'è. Per verificare quali articoli sono senza miniatura, devi aprirli uno per uno. Con più di 50 pubblicazioni, è una scocciatura.

Colonna di anteprima dell'immagine in evidenza nella tabella degli articoli di WordPress

Il codice qui sotto aggiunge una colonna Thumbs alla tabella degli articoli e delle pagine:

1add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
4add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
7function posts_columns( $defaults ) {
8 $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9 return $defaults;
10}
11
12function posts_custom_columns( $column_name, $id ) {
13 if ( $column_name === 'riv_post_thumbs' ) {
14 if ( has_post_thumbnail() ) {
15 echo the_post_thumbnail( array( 100, 100 ) );
16 } else {
17 _e( 'No Thumbnail For Post' );
18 }
19 echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20 }
21}

La dimensione dell'anteprima è impostata a 100×100 px, sufficiente per un rapido controllo visivo. Se ti serve più grande, sostituisci array(100, 100) con array(200, 200). Maggiori dettagli sui parametri nella documentazione di the_post_thumbnail.

Per le pagine, aggiungi queste due righe all'inizio del frammento:

1add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Ora anche nella sezione «Pagine → Tutte le pagine» puoi vedere dove c'è una miniatura e dove no.

Rendere cliccabile la miniatura

Un buon tema avvolge automaticamente l’immagine in evidenza in un link al post. Uno scadente restituisce un’immagine statica che non porta da nessuna parte. Il visitatore clicca sull’anteprima in home page e non succede nulla.

Si risolve con un filtro in functions.php:

1function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2 $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3 return $html;
4}
5add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

Il filtro post_thumbnail_html intercetta l’HTML della miniatura e lo racchiude in un link con get_permalink(). Il titolo del post finisce nell’attributo title tramite esc_attr(), sicuro e informativo.

Cambiare il testo «Imposta immagine in evidenza»

Quando il sito ha l’impostazione automatica delle miniature dal contenuto, l’etichetta standard «Imposta immagine in evidenza» trae in inganno gli autori. Sembra che l’immagine vada impostata a mano, anche se il sistema lo farà da solo.

Pulsante standard Imposta immagine in evidenza nella barra laterale dell'editor di WordPress

Modifica il testo con qualcosa di più informativo:

1function change_featured_image_text( $content ) {
2 return $content = str_replace(
3 __( 'Set featured image' ),
4 __( 'Thumbnail will be set automatically from the first image in the post' ),
5 $content
6 );
7}
8add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

Il filtro admin_post_thumbnail_html gestisce il blocco HTML dell’immagine in evidenza nella sidebar dell’editor. Sostituisci il testo dentro __( ... ) nel secondo argomento di str_replace.

Video: come funziona tutto in pratica

Se preferisci una dimostrazione visiva, ecco una guida completa di WPBeginner: da come aggiungere la prima miniatura fino alla regolazione fine di dimensioni e automazione.

⁉️🤔 Domande frequenti

Perché l’immagine in evidenza non compare sul sito?

Molto probabilmente il tema non supporta la funzione post-thumbnails. Controlla functions.php: deve esserci la riga add_theme_support( 'post-thumbnails' ). Se non c’è, aggiungila. Secondo motivo: nelle impostazioni del tema la visualizzazione dell’immagine in evidenza è disattivata per un tipo di contenuto specifico. Terzo: un plugin di caching sta servendo una vecchia versione della pagina, svuota la cache.

Che differenza c’è tra immagine in evidenza e immagine di copertina?

L’immagine in evidenza è un meta campo del post che il tema usa per le anteprime nei feed, negli archivi e in Open Graph. L’immagine di copertina è un blocco dentro il contenuto (comparso con Gutenberg) che si visualizza solo nel corpo del post e non incide sui social network. Puoi usarle entrambe contemporaneamente: la copertina come ingresso visivo all’articolo, l’immagine in evidenza per tutto il resto.

Che dimensione devo usare per le immagini in evidenza?

Per i social network il formato ottimale è 1200×630 px (proporzioni 1,91:1) secondo la documentazione per sviluppatori di Facebook. Per la griglia dei post in home page, regolati su quanto impostato nelle opzioni del tema. Se il tema usa miniature quadrate, 600×600 o 800×800 px. Prima di caricare, comprimi l’immagine a 100-150 KB con TinyPNG o ShortPixel.

È obbligatorio impostare un’immagine in evidenza per ogni post?

Tecnicamente no. Ma senza, la home page e i social network appaiono disordinati e la percentuale di clic cala di 2-3 volte. Se temi di dimenticarla, usa il codice di controllo obbligatorio della sezione precedente oppure il plugin Quick Featured Images, che sostituisce una miniatura predefinita per i post senza immagine.

Come rimuovo o sostituisco un’immagine in evidenza?

Nell’editor del post, clicca sull’immagine in evidenza corrente nella sidebar. Si aprirà la libreria media, clicca «Rimuovi immagine in evidenza». Dopodiché il pulsante tornerà a essere «Imposta immagine in evidenza». Caricane una nuova.

Posso usare la stessa immagine come immagine in evidenza per più post?

Sì, WordPress non impone restrizioni. Seleziona lo stesso file dalla libreria media per post diversi. Ma se l’immagine si ripete nel feed, sembra un bug o una svista. Per varietà visiva è meglio scegliere miniature uniche.

Cosa fare con le immagini in evidenza adesso

L’immagine in evidenza non è un elemento «opzionale», ma una parte obbligatoria di ogni post. Senza, i social network recuperano contenuti a caso, la home page perde struttura visiva e la percentuale di clic cala in modo esponenziale.

Segui la checklist in dieci minuti:

  • Apri un post qualsiasi e verifica che l’immagine in evidenza sia impostata.
  • Controlla come appare in home page e sui social network (Facebook Sharing Debugger ti aiuta).
  • Se le dimensioni non corrispondono alle aspettative, installa Simple Image Sizes e regola le misure.
  • Se lavori con un team di autori, aggiungi il codice di controllo obbligatorio così che la pubblicazione senza miniatura finisca in bozza.

Questi dieci minuti ti faranno risparmiare ore di modifiche manuali e decine di lettori persi. Fallo adesso.