Un’immagine può valere più di 1.000 parole, ma una frase o due di testo che accompagnano un’immagine come didascalia possono spesso aiutare a far capire il concetto. Studi di eyetracking hanno dimostrato che gli utenti di un sito web spesso si concentrano su immagini convincenti e pertinenti e poi leggono il testo correlato nelle didascalie adiacenti.

Ma se il vostro compito è quello di disporre le immagini e le didascalie su una pagina web, far sì che questi elementi appaiano insieme in modo coerente può essere difficile. Per questo motivo, in questa guida scopriremo come aggiungere didascalie alle immagini su WordPress.

Come Creare Didascalie per le Immagini su WordPress

La relazione tra un’immagine e la sua didascalia può iniziare non appena la caricate su WordPress. Esistono due approcci comuni per mettere insieme immagini e didascalie:

  1. Creare didascalie nella libreria media di WordPress.
  2. Creare le didascalie nell’editor di WordPress “al volo”.

Li analizzeremo entrambi.

Come Creare Didascalie di Immagini Partendo dalla Libreria Media

Le immagini che aggiungi alla Libreria Media di solito finiscono in cartelle sul vostro server web, mentre le informazioni sulle immagini, comprese le didascalie, vengono memorizzate nel database di WordPress.

Per accedere alla Libreria Media:

  • Selezionate Media > Libreria dalla bacheca di WordPress.
  • Fate clic sul pulsante Aggiungi nuovo per caricare l’immagine di destinazione.
Schermata dell’admin WordPress per aggiungere una nuova immagine alla libreria Media di WordPress.
Aggiungere una nuova immagine alla Libreria Media.

Facendo clic sulla miniatura dell’immagine si apre la finestra Dettagli allegato, dove potete aggiungere la didascalia dell’immagine.

Schermata dell’editor WordPress, schermata Dettagli Allegato, in cui è evidenziato il box Didascalia e la descrizione dell’immagine: femmina di colibrì dalla gola color rubino
Testo della didascalia aggiunto nella finestra Dettagli Allegato.

Aggiungete il testo che preferite nel campo “Didascalia” e, voilà, la didascalia dell’immagine è stata aggiunta. Vi farà piacere sapere che, quando modificate i dettagli dell’immagine, WordPress salva automaticamente il vostro lavoro mentre lo scrivete.

Potete anche passare direttamente al caricamento di un media selezionando Media > Aggiungi nuovo dalla bacheca di WordPress:

  • Selezionate (o trascinate) l’immagine da caricare.
  • Poi fate clic sul link Modifica accanto alla miniatura dell’immagine.
Schermata Caricamento nuovo file media: in basso è evidenziato il tasto Modifica.
Aggiunta di un’immagine dopo aver selezionato Media > Aggiungi nuovo.

Facendo clic su Modifica si apre la finestra che include il campo della didascalia dell’immagine:

Schermata dell’editor file media in WordPress: è evidenziato il box Descrizione dove si aggiunge il testo della didascalia dopo il caricamento di una nuova immagine.
Aggiunta di una didascalia dopo aver avviato un caricamento con Media > Aggiungi nuovo.

Qui potrete aggiungere la didascalia che preferite. Questa volta, però, dovrete salvare le vostre modifiche scorrendo verso il basso fino a fare clic sul pulsante Aggiorna:

Schermata dell’editor file media in WordPress: in basso, sotto i dettagli dell’immagine, c’è il pulsante Aggiorna per salvare le modifiche
Salvate il vostro lavoro dopo aver aggiunto una didascalia all’immagine.

Ora che le didascalie sono state salvate insieme alle immagini nella Libreria Media, potete facilmente inserirle in una pagina web o in un articolo del blog.

Vediamo come fare utilizzando l’editor a blocchi e l’editor classico.

Come Aggiungere un’Immagine con Didascalia nell’Editor a Blocchi

Per aggiungere un’immagine nell’editor a blocchi:

  • Fate clic sull’icona [+] per visualizzare il pannello dei blocchi.
  • Fate clic sull’icona Immagine.
Schermata dell’editor a blocchi di WordPress con il box dei blocchi disponibili.
La finestra modale con i blocchi disponibili.
  • Fate clic sul pulsante Libreria Media.
Schermata dell’editor a blocchi di WordPress da cui scegliere la libreria media come fonte dell’immagine
Scegliere la fonte di un’immagine.
  • Quindi selezionate l’immagine desiderata.
Schermata della libreria media di WordPress da cui selezionare un'immagine.
Sfogliate la Libreria Media.

L’immagine e la sua didascalia vengono aggiunte al vostro layout.

Un esempio di didascalia di un'immagine visualizzata nell'editor di blocchi di WordPress.
Un esempio di didascalia di un’immagine visualizzata nell’editor di blocchi di WordPress.

Come Aggiungere una Didascalia all’Immagine nell’Editor Classico

Nell’Editor classico, potete aggiungere un’immagine e la sua didascalia facendo clic sul pulsante Aggiungi Media:

Schermata dell’editor classico di WordPress: il pulsante Aggiungi Media è evidenziato.
Aggiungere un media nell’Editor classico di WordPress.

A questo punto, vedrete sulla destra il campo della didascalia che potete modificare. Quando il testo vi soddisfa, fate clic sul pulsante Inserisci nell’articolo.

Se state modificando una pagina di WordPress invece di un articolo, il pulsante sarà denominato Inserisci nella pagina.

Schermata della libreria media nell’editor classico WordPress: la foto della libreria è selezionata e il box della descrizione è compilato. Il pulsante Inserisci nell’articolo è selezionato.
Inserimento di un’immagine con didascalia nell’Editor classico di WordPress.

L’immagine e la didascalia saranno visualizzate nell’editor.

Schermata del Classic Editor WordPress con un’immagine caricata dentro l’area dell’articolo e, sotto, la didascalia
Immagine e didascalia visualizzate nell’editor classico di WordPress.

Come Creare Didascalie Direttamente dall’Editor di WordPress

Il bello del software è che di solito ci sono più modi per ottenere lo stesso risultato. WordPress e le didascalie delle immagini non fanno eccezione.

Come Caricare un’Immagine e Aggiungere una Didascalia nell’Editor a Blocchi

Nell’editor a blocchi, fate clic sull’icona [+] e scegliete l’opzione Blocco immagine:

Schermata dell’editor a blocchi di WordPress con la finestra modale dei blocchi e una freccia che indica il blocco immagine.
Il pannello dei blocchi disponibili.

Successivamente, fate clic sul pulsante Carica.

Schermata dell’editor a blocchi di WordPress e del blocco immagine: una freccia indica il pulsante Carica.
Caricare un’immagine dall’editor a blocchi.

Una volta selezionata (o trascinata) la vostra immagine, WordPress la posizionerà all’interno dell’editor. Vedrete il testo “Aggiungi didascalia” sotto di essa.

Schermata di un’immagine caricata nell’editor a blocchi di WordPress: sotto compare il campo Didascalia vuoto.
Inserire un’immagine senza una didascalia preesistente.

Per aggiungere la vostra didascalia all’immagine, sostituite semplicemente il testo “Aggiungi didascalia” con le vostre parole.

Quando usate questo approccio nell’editor a blocchi, la didascalia creata non viene salvata nella Libreria Media.

Come Caricare un’Immagine e Aggiungere una Didascalia nell’Editor Classico

Se state usando l’Editor classico, caricate la vostra immagine facendo clic sul pulsante Aggiungi media:

Schermata dell’editor classico WordPress: Selezione del pulsante Aggiungi media.
Inizio del caricamento di un’immagine nell’Editor classico di WordPress.

Successivamente, fate clic su Carica file nella finestra Aggiungi media per selezionare (o trascinare) la vostra immagine.

Selezionate la scheda Carica file nella finestra di dialogo Aggiungi media dell'Editor classico.
Scegliere di caricare un’immagine nella finestra Aggiungi Media.

La nuova immagine verrà caricata nella Libreria Media e visualizzata come selezionata con un segno di spunta. Aggiungietela didascalia dell’immagine nel campo Didascalia disponibile nel pannello Dettagli allegato.

Aggiunta di una didascalia durante il caricamento di un'immagine nell'editor classico di WordPress.
Aggiunta di una didascalia nel pannello Dettagli allegato.

Dopo aver scritto la didascalia, fate clic sul pulsante Inserisci nell’articolo (o Inserisci nella pagina).

La didascalia verrà salvata insieme ad altri dettagli nella Libreria Media e apparirà insieme all’immagine nell’Editor classico.

Schermata della didascalia visualizzata dopo il caricamento di un'immagine nell'editor classico di WordPress.
Una didascalia visualizzata dopo aver caricato un’immagine nell’Editor classico di WordPress.

Come Modificare la Didascalia di un’Immagine Esistente su WordPress

E se avete bisogno di modificare o aggiornare le didascalie già aggiunte a un’immagine? Potete farlo in pochi passi. Ecco come fare.

Come Modificare una Didascalia Esistente nell’editor a Blocchi di WordPress

L’editor a blocchi tratta una didascalia come qualsiasi altro testo. Per modificare una didascalia, basta cliccare sul testo e apportare le modifiche.

Schermata dell’editor a blocchi da cui si può modificare una didascalia esistente come qualsiasi altro testo.
Modifica di una didascalia esistente nell’editor a blocchi di WordPress.

Tenete presente che le didascalie modificate in questo modo nell’editor a blocchi non vengono salvate insieme ai dettagli dell’immagine nella Libreria Media.

Come Modificare una Didascalia Esistente nell’Editor Classico di WordPress

Se invece usate l’Editor classico, fate clic sull’immagine per visualizzare la barra degli strumenti delle opzioni delle immagini.

Schermata della barra degli strumenti dei controlli delle immagini nell'editor classico di WordPress.
Barra degli strumenti dei controlli delle immagini visualizzata per l’immagine selezionata.

Ora fate clic sull’icona della matita per modificare i dettagli dell’immagine.

Schermata Dettagli immagine da cui modificare il testo della didascalia esistente.
Modifica di una didascalia nella finestra di dialogo Dettagli immagine.

Inserite il nuovo testo nel campo Didascalia e poi fate clic sul pulsante Aggiorna. Questa operazione salverà la nuova didascalia dell’immagine nella Libreria Media e vi riporterà all’editor.

Schermata dell’editor classico di WordPress con un’immagine caricate: potete modificare la didascalia esistente come un normale testo.
Modifica di una didascalia esistente come un normale testo.

Suggerimento: Anche l’Editor classico vi permette di modificare le didascalie come il resto del testo di una pagina web. Ricordate però che le didascalie aggiornate in questo modo non vengono salvate insieme ai dettagli dell’immagine nella Libreria Media.

Come Aggiungere Didascalie in una Galleria di Immagini di WordPress

Potete usare metodi simili per aggiungere didascalie alle immagini nelle gallerie di WordPress.

Aggiungere Didascalie a una Galleria WordPress Usando l’Editor a Blocchi

L’editor a blocchi offre il blocco Galleria come opzione dopo aver cliccato sull’icona [+]:

Schermata dell’editor a blocchi di WordPress da cui selezionare l'opzione Galleria.
Creazione di una nuova galleria di immagini in WordPress.

In questo scenario, supponiamo che il sito WordPress sia provvisto di immagini e didascalie salvate, quindi farete clic sul pulsante Libreria Media.

Selezione di una fonte per le immagini della galleria nell'editor di blocchi di WordPress.
Selezionare Upload e aggiungere manualmente le didascalie è un’altra opzione.

Nella Libreria Media, fate clic sulle miniature delle immagini che volete inserire nella galleria. I segni di spunta indicano le vostre selezioni.

Schermata della libreria media da cui scegliere le immagini per una galleria nell'editor di blocchi di WordPress.
Selezione delle immagini per una nuova galleria fotografica.

Fate clic sul pulsante Crea una nuova galleria per continuare.

Come ultimo passo prima di inserire la galleria negli articoli/pagine del blog, la finestra di dialogo Modifica galleria vi permette di trascinare e rilasciare le immagini per cambiare l’ordine in cui appariranno e per aggiungere o rimuovere immagini dalla vostra selezione.

Schermata della libreria media nell’editor a blocchi da cui selezionare l'ordine delle immagini della galleria.
Riordinare le immagini scelte per la galleria.

Quando i risultati vi soddisfano, fate clic sul pulsante Inserisci galleria.

Il tema WordPress Twenty Twenty utilizzato per questo esempio sovrappone il testo della didascalia all’immagine associata.

Una galleria inserita con le didascalie delle immagini nell'editor a blocchi di WordPress.
Un esempio di galleria di immagini con didascalie nell’editor a blocchi.

Aggiungere Didascalie a una Galleria WordPress Utilizzando l’Editor Classico

Ecco come aggiungere una galleria di immagini con didascalie utilizzando l’editor classico di WordPress.

Posizionate il cursore nel punto in cui volete inserire la galleria, poi:

  • Fate clic su Aggiungi media.
  • Scegliete Crea galleria dalla barra laterale di sinistra.
Schermata Crea Galleria: Selezione dell'opzione Crea galleria nell'editor classico di WordPress per selezionare le immagini.
Le immagini selezionate saranno evidenziate con dei segni di spunta.

Potete sfogliare le immagini disponibili nella vostra galleria nella scheda Libreria Media.

  • Selezionate le immagini che volete usare nella vostra galleria (indicate dai segni di spunta).
  • Fate clic su Crea una nuova galleria.

Le immagini selezionate appariranno nella finestra Modifica galleria. Lì potrete modificare il testo della didascalia per ciascuna di esse e, se necessario, potrete cambiare l’ordine di visualizzazione delle immagini.

Schermata Crea Galleria della libreria media: potete trascinare le miniature delle immagini disponibili
Trascinare le miniature per cambiare l’ordine delle immagini nella galleria.

Quando il contenuto della galleria e le didascalie delle immagini vi soddisfano, fate clic su Inserisci galleria.

Le immagini e le didascalie saranno visualizzate nell’editor.

Schermata dell’editor classico con la barra degli strumenti Modifica galleria aperta: così potete modificare le didascalie delle immagini.
Per modificare le didascalie dovete modificare nuovamente la galleria.

Le didascalie non possono essere modificate in questa visualizzazione. Per farlo:

  • Fate clic su un punto qualsiasi della galleria per evidenziare il gruppo.
  • E poi clic sull’icona della matita.

Tornerete alla finestra di dialogo Modifica galleria vista nel passo precedente, dove potrete nuovamente modificare le didascalie.

Cambiare l’Aspetto delle Didascalie delle Gallerie di WordPress Usando un Plugin

Per impostazione predefinita, WordPress usa solo il campo Didascalia memorizzato nella Libreria Media quando applica automaticamente le didascalie delle immagini. Tuttavia, il plugin Gallery Image Captions (GIC) fornisce un hook per il codice PHP personalizzato che può creare didascalie da qualsiasi campo della libreria, compresi i campi personalizzati.

GIC si affida agli shortcode di WordPress, in particolare allo shortcode [gallery], per attivare l’esecuzione del codice PHP personalizzato che scrivete. Il codice identifica quali campi dettagliati della libreria media faranno parte di una didascalia e può anche includere l’HTML per aiutare a formattare il layout della didascalia.

Quando create una galleria con l’Editor classico, lo shortcode [gallery] viene inserito dietro le quinte. Potete vederlo facendo clic sulla scheda Testo per visualizzare il codice:

Schermata dell’editor classico WordPress: rivelazione dello shortcode della galleria di immagini.
Per impostazione predefinita, l’Editor Classic genera shortcode per le gallerie di immagini.

Nella sua forma più semplice, lo shortcode [gallery] include i numeri ID delle immagini selezionate per la visualizzazione.

Per impostazione predefinita, l’editor a blocchi genera immediatamente l’HTML di una galleria quando inserite un gruppo di immagini in una pagina web, ma potete comunque scegliere l’approccio shortcode:

  • Fate clic sull’icona [+] nell’editor.

In questo modo verrà visualizzato il pannello dei blocchi disponibili.

  • Iniziate a digitare “shortcode” nel campo di ricerca.
  • Fate clic sull’icona [/] (shortcode) quando appare.
Richiesta di un blocco shortcode.

Potete quindi inserire lo shortcode nel nuovo blocco.

Modifica di un blocco shortcode nell'editor a blocchi di WordPress: nella finestra modale dei blocchi compare il blocco shortcode e un codice relativo alla galleria
Aggiunta di uno shortcode nell’editor a blocchi.

Per usare il plugin GIC dovete modificare il codice di WordPress all’interno del vostre tema. Potete aggiungere il vostro codice PHP personalizzato per le didascalie modificando il file functions.php del tema. Poiché questo file può essere sostituito quando un tema viene aggiornato, è buona norma creare un tema figlio prima di apportare modifiche ai file chiave di WordPress. Inoltre, per sicurezza, un rapido backup non fa mai male.

Un approccio alternativo è quello di usare un plugin come Code Snippets, che vi permette di inserire PHP nel codice del vostro sito senza modificare functions.php.

Sia che modifichiate direttamente il file functions.php sia che usiate un plugin come Code Snippets, il vostro codice avrà un aspetto simile a questo:

Un editor di codice con del codice PHP con evidenziata una funzione creata dal plugin WordPress GIC gallery.
Una funzione PHP che può essere attivata dallo shortcode per le gallerie di immagini.

La personalizzazione più importante avviene nelle righe 17 e 18, dove il contenuto del titolo e della didascalia della libreria media viene inserito all’interno di un markup HTML di base per modificare l’aspetto delle didascalie.

Nella Libreria Media, le potenziali immagini della galleria richiederanno un testo in questi campi:

Con il plugin GIC installato e il codice PHP personalizzato, le didascalie delle immagini nella galleria hanno ora il seguente aspetto:

Una galleria di immagini in WordPress con didascalie migliorate dal plugin GIC.
Didascalie estese generate dal plugin GIC e dal codice PHP personalizzato.

Come Aggiungere Didascalie alle Immagini in Primo Piano

Nella maggior parte dei temi WordPress le immagini in primo piano sono prive di didascalia.

Due schermate dell’editor classico con la stessa immagine in primo piano di un uccello: nella Libreria Media l’immagine ha una didascalia che non viene invece visualizzata quando l’immagine è usata come immagine in primo piano per un articolo.
Immagine in primo piano su una pagina (sfondo) e nella Libreria Media (primo piano).

Per esempio, l’immagine qui sopra viene mostrata nella Libreria Media con una didascalia, ma appare senza didascalia quando viene utilizzata come immagine in primo piano.

Se volete inserire una didascalia, il plugin FSM Custom Featured Image Caption può aiutarvi.

Dopo aver installato il plugin, le sue impostazioni vi permettono di specificare la classe del foglio di stile che volete assegnare alle didascalie o di aggiungere un CSS personalizzato.

Schermata della finestra di dialogo delle impostazioni per il plugin FSM Custom Featured Image Caption.
La finestra di dialogo delle impostazioni del plugin.

Per impostazione predefinita, il plugin Custom Featured Image Caption visualizza la didascalia memorizzata con l’immagine nella Media Library, ma non nell’editor.

Un'immagine in primo piano di un post visualizzata con una didascalia.
Immagine in primo piano visualizzata con la didascalia memorizzata nella Libreria Media.

Il plugin Custom Featured Image Caption modifica anche la finestra dell’immagine in primo piano sia nell’editor a blocchi che nell’editor classico in modo che possa accettare una didascalia alternativa, sovrascrivendo qualsiasi didascalia memorizzata nella Libreria Media.

Schermata con i campi extra aggiunti dal plugin FSM Custom Featured Image Caption.
Campi dell’immagine in primo piano aggiunti dal plugin, inclusa una didascalia alternativa.

Potete nascondere la didascalia e l’immagine in primo piano usando le opzioni della casella di controllo nella parte inferiore del pannello.

Riepilogo

WordPress garantisce un’ampia flessibilità per quanto riguarda l’aggiunta e la modifica delle didascalie delle singole immagini e delle immagini all’interno delle gallerie. E se le opzioni integrate non sono sufficienti, potete usare plugin di terze parti per estendere le sue funzionalità principali.

Ed ecco un consiglio: se i vostri progetti web sono ad alta intensità di immagini, assicuratevi di dare un’occhiata alla nostra guida su come ottimizzare le immagini per il web e le prestazioni.