Immagini e altri file multimediali sono una parte importante di qualsiasi sito WordPress. Per utilizzarli nel modo migliore, è utile avere una conoscenza approfondita del funzionamento della libreria media di WordPress.

Questa pratica funzionalità di WordPress consente di memorizzare e gestire nel tempo le immagini e gli altri media. Con un po’ di esperienza e qualche semplice trucco, potrete migliorare molto il vostro sito grazie alla Libreria Media.

In questa guida approfondita vi diremo tutto quello che c’è da sapere sulla Libreria Media di WordPress. Vedremo anche come importare e scaricare i contenuti. Tratteremo anche l’editing delle immagini, la gestione dei file a lungo termine e vi offriremo quattro hack per aggiungere funzionalità avanzate.

Cominciamo!

Introduzione alla Libreria Media WordPress

Al suo core, la Libreria Media di WordPress è esattamente ciò che il suo nome lascia intendere: un catalogo di tutti i file multimediali che avete caricato sul vostro sito:

La Libreria Media di WordPress

La Libreria Media di WordPress

WordPress supporta una varietà di tipi di media, tra cui:

Ha anche alcune limitate capacità di photo-editing, permettendovi di effettuare le regolazioni necessarie direttamente dalla bacheca.

Per accedere alla vostra Libreria Media, vi basta cliccare su Media nella barra laterale del pannello di amministrazione:

Accedere alla Libreria Media di WordPress

Accedere alla Libreria Media di WordPress

Qui sono disponibili alcune opzioni di base.

Per prima cosa, potete stabilire se vedere i vostri file in una lista o in una griglia cliccando sulle rispettive icone:

Opzioni di visualizzazione della Libreria Media di WordPress

Opzioni di visualizzazione della Libreria Media di WordPress

Potete anche filtrare i file utilizzando i menu a tendina:

Filtrare i file della Libreria Media di WordPress

Filtrare i file della Libreria Media di WordPress

Il primo menu vi permette di visualizzare i vostri media per tipo, mentre il secondo filtrerà i contenuti della libreria in base alla data in cui sono stati caricati.

Potete anche utilizzare la barra di ricerca per cercare file specifici in base al nome:

Barra di ricerca della libreria media di WordPress

Barra di ricerca della libreria media di WordPress

Infine, c’è anche un pulsante Selezione multipla. Questa funzione consente di eliminare dall’installazione di WordPress più file in una volta:

Opzione Selezione multipla nella Libreria Media di WordPress

Opzione Selezione multipla nella Libreria Media di WordPress

Questo è tutto sulle funzionalità native disponibili nella schermata della libreria media di WordPress.

Come vedremo più avanti, potete fare molte modifiche per migliorarla. Prima, però, dobbiamo vedere come aggiungere file a WordPress.

✨ Le immagini sono uno strumento potente per vendere e coinvolgere gli utenti. Ecco tutto quello che c'è da sapere sulla Libreria Media di WordPress 📸Click to Tweet

Come Aggiungere File alla Libreria Media di WordPress

Ci sono diversi metodi per aggiungere file alla Libreria Media di WordPress. Il primo è quello di navigare su Media > Aggiungi nuovo:

Accedere all'uploader dei media di WordPress

Accedere all’uploader dei media di WordPress

Qui potete caricare i file che avete salvato sul computer o su un altro dispositivo:

WordPress Media Uploader

WordPress Media Uploader

Potete anche aggiungere i media direttamente dall’editor di WordPress. Nell’Editor a Blocchi, iniziare aggiungendo il blocco corrispondente al tipo di supporto che volete incorporare:

Blocchi multimediali WordPress

Blocchi multimediali di WordPress

Nel segnaposto che vi appare, selezionate Carica e scegliete un file dal computer:

Caricare i media

Caricare i media dall’Editor a Blocchi

In alternativa, potete semplicemente trascinare il file dal desktop nel blocco corrispondente.

Nell’Editor Classico è necessario cliccare sul pulsante Aggiungi Media:

Pulsante Aggiungi Media del Classic Editor

Pulsante Aggiungi Media dell’Editor Classico

Quindi navigate fino alla scheda Carica e selezionate un file dal computer:

Caricare i media

Caricare i media dall’Editor Classico

È inoltre possibile trascinare e rilasciare i file dal desktop direttamente nell’editor.

In alcuni casi, potrebbe essere necessario caricare manualmente i file multimediali sul vostro sito WordPress via FTP. Potete farlo utilizzando un client come FileZilla.

Una volta connessi al server, navigate su wp-content > uploads:

Caricare i file nella directory della Libreria Media di WordPress tramite FileZilla

Caricare i file nella directory della Libreria Media di WordPress tramite FileZilla

Caricate i file in questa directory per aggiungerli alla vostra Libreria Media.

Scaricare Contenuti dalla Libreria Media di WordPress

In alcune circostanze, potrebbe essere necessario scaricare i file dalla Libreria Media sul vostro computer. WordPress consente di farlo nativamente navigando su Strumenti > Esporta:

Strumento di esportazione WordPress

Strumento di esportazione di WordPress

Quindi selezionate l’opzione Media. Se avete bisogno solo di file che sono stati caricati entro un determinato periodo di tempo, potete utilizzare i menu a tendina per specificare la vostra richiesta:

Esportare i media in WordPress

Esportare i media in WordPress

Infine, fate clic sul pulsante Scarica il file di esportazione. In questo modo saranno scaricati sul vostro computer i relativi file multimediali.

Come Modificare le Immagini Nella Libreria Media di WordPress

Come abbiamo accennato in precedenza, WordPress dispone di alcune funzioni native di editing delle immagini. Per accedervi, navigate nella vostra Libreria Media e selezionate il file che desiderate modificare. Quindi, fate clic sul pulsante Modifica immagine:

Pulsante Modifica immagine in WordPress

Pulsante Modifica immagine in WordPress

Questo aprirà l’editor delle immagini:

Editor immagini WordPress

Editor immagini di WordPress

Potete fare cinque modifiche di base:

Il ritaglio consente di tagliare sezioni dell’immagine:

Ritaglio immagini in WordPress

Ritaglio immagini in WordPress

Ruotando l’immagine si può ruotare l’immagine di 90 gradi in senso orario o antiorario:

Rotazione del'immagine a sinistra in WordPress

Rotazione del’immagine a sinistra in WordPress

Capovolgendo l’immagine la si rifletterà sia verticalmente che orizzontalmente:

Immagine capovolta orizzontalmente in WordPress

Immagine capovolta orizzontalmente in WordPress

Le altre tre impostazioni sono nella barra laterale. La prima consente di modificare le dimensioni dell’immagine ridimensionandola. Basta inserire l’altezza o la larghezza desiderata e l’altro campo si auto-completa. Poi fate clic sul pulsante Scala:

Scalare un'immagine in WordPress

Scalare un’immagine in WordPress

È importante ricordare che il ridimensionamento delle immagini in WordPress può talvolta influire negativamente sulla qualità.

Inoltre, potete prendere solo immagini di grandi dimensioni e ridurne le dimensioni. Non è possibile scalare le immagini a dimensioni maggiori!

Per ritagliare l’immagine in modo che abbia un rapporto dimensioni o dimensioni specifiche, potete utilizzare i campi Rapporto dimensioni e Selezione nella sezione Ritaglia Immagine:

Impostazione delle dimensioni di selezione del ritaglio dell'immagine in WordPress

Impostazione delle dimensioni di selezione del ritaglio dell’immagine in WordPress

Infine, se volete conservare la miniatura dell’immagine esistente, potete farlo utilizzando le impostazioni delle miniature. Basta selezionare il pulsante di opzione per stabilire la versione dell’immagine a cui desiderate applicare le modifiche:

Impostazioni delle miniature nell'editor di immagini di WordPress

Impostazioni delle miniature nell’editor di immagini di WordPress

L’editing predefinito delle immagini di WordPress è utile ma è limitato. Non può sostituire un qualsiasi software che potreste utilizzare per modifiche più estese, specialmente se gestite un sito di fotografia o un fotoblog.

Comprendere gli Errori della Libreria Media di WordPress

Purtroppo ci sono gli errori di WordPress. E la Libreria Media di WordPress non fa eccezione.

Un problema che si presenta di frequente è un “errore HTTP” non specificato, che può apparire quando si carica un nuovo file dall’interno dell’editor:

Errore HTTP al caricamento dei media

Errore HTTP al caricamento dei media

Di solito, vi basta semplicemente aspettare che questo errore scompaia e provare di nuovo il caricamento dopo pochi minuti. Se l’errore HTTP si ripresenta, è possibile che la sessione di WordPress sia scaduta. Dovrete effettuare nuovamente il login e poi riprovare il caricamento.

Un altro problema che alcuni utenti si trovano ad affrontare è il mancato caricamento da parte della Libreria Media. Questo è spesso dovuto a un conflitto con i plugin e/o con il tema. Per risolvere questo errore, provate a disattivare tutti i plugin e passare a un tema predefinito di WordPress.

Se la vostra libreria media si carica di nuovo correttamente, dovrete comunque eliminare il conflitto del plugin per risolvere il problema in modo definitivo.

Gestione a Lungo Termine della Libreria Media

Per quanto riguarda la Libreria Media, finora ci siamo concentrati esclusivamente sulle funzionalità native di WordPress. Tuttavia, se si utilizza regolarmente questa funzionalità, nel tempo è probabile che si verifichino dei problemi che richiedono l’ausilio di soluzioni esterne.

Ad esempio, più file si aggiungono, più la vostra Libreria Media diventerà disorganizzata. A parte le opzioni di ricerca e di filtro descritte all’inizio di questo post, WordPress non è di grande aiuto per gestire volumi di media disorganizzati.

Esistono tuttavia alcuni plugin che consentono di organizzare i file multimediali in cartelle.

Il plugin WordPress Media Library Folders è la soluzione più popolare:

Il plugin WordPress Media Library Folders

Il plugin WordPress Media Library Folders

Oltre a consentire la creazione di cartelle di file multimediali, questo plugin si integra con MaxGalleria per consentire di creare gallerie di immagini direttamente dalla Libreria Media:

Il plugin WordPress Gallery MaxGalleria

Il plugin WordPress Gallery MaxGalleria

L’upgrade a WordPress Media Library Folders Pro offre un’integrazione aggiuntiva con i plugin NextGEN Gallery e Advanced Custom Fields. Consente anche di creare categorie e tag per organizzare i file in modo ancora più avanzato.

Un’altra funzionalità che manca a WordPress è la possibilità di sostituire i file multimediali con nuove versioni. Dato che questi tipi di file possono essere abbastanza grandi, non basta semplicemente continuare ad aggiungerne di nuovi ogni volta che si ha bisogno di aggiornare i contenuti.

Ciò significa che, dopo aver caricato un nuovo file, sarà necessario individuare la vecchia versione e cancellarla. Potete risparmiare tempo sostituendo direttamente le vecchie immagini con Enable Media Replace by ShortPixel:

Il plugin WordPress Enable Media Replace

Il plugin WordPress Enable Media Replace

Con questo plugin potrete anche sostituire tutti i link che puntano al vecchio file. Questo è utile per evitare la rottura dei link ai media in tutto il sito.

4 Pratici Hack per la Libreria Media di WordPress

La Libreria Media di WordPress è in grado di gestire la maggior parte delle normali necessità dell’amministratore del sito. Tuttavia, WordPress fornisce una serie di funzioni e di hook che consentono agli utenti di migliorare le funzionalità specifiche della Libreria Media, senza ricorrere a plugin di terze parti. Scopriamo queste funzioni e hook con quattro esempi pratici.

1. Aggiungere Metadati Custom ai Tipi di Post Attachment

Ogni volta che caricate un file multimediale, WordPress genera un tipo di post attachment.

Come ogni altro tipo di post, gli attachment sono memorizzati nella tabella wp_posts, e i rispettivi metadati si trovano nella tabella wp_postmeta del vostro database:

Pannello predefinito dei dati degli attachment

Pannello predefinito dei dati degli attachment

La tabella wp_posts memorizza dati tra cui post_content (descrizione dell’allegato), post_excerpt (didascalia dell’allegato), post_author, post_title, post_status e post_mime_type.

La tabella wp_postmeta memorizza qualsiasi tipo di metadati, come l’URL del file allegato, le dimensioni dell’immagine e i mime type, nonché i metadati in formato EXIF (Exchangeable Image File format) e IPTC (International Press Telecommunications Council).

Stanco di problemi con WordPress e di un hosting lento? Forniamo un supporto di livello internazionale da parte di esperti WordPress disponibili 24/7 e server incredibilmente veloci. Dai un’occhiata ai nostri piani

Occasionalmente potrebbe essere necessario aggiungere metadati personalizzati agli allegati, come il nome dell’autore di un documento, un URL associato o il luogo in cui è stata scattata una foto. Aggiungere campi meta agli allegati è un po’ diverso dall’aggiungere campi meta ai post e richiede il ricorso a hook e funzioni specifiche.

Per prima cosa, è necessario aggiungere alla schermata Edit Media tutti i custom field necessari. Potete farlo filtrando i campi attachment disponibili attraverso il filtro attachment_fields_to_edit presente in wp-admin/includes/media.php:

function media_hacks_field_to_edit( $form_fields, $post ){

	// https://codex.wordpress.org/Function_Reference/wp_get_metadata
	$media_author = get_post_meta( $post->ID, 'media_author', true );
    
	$form_fields['media_author'] = array(
		'value' => $media_author ? $media_author : '',
		'label' => __( 'Author' )
	); 
	return $form_fields;
}
add_filter( 'fields_to_edit', 'media_hacks_field_to_edit', 10, 2 );

La funzione ha due argomenti: l’array $form_fields dei campi del form e l’oggetto $post. Per prima cosa, get_post_meta recupera il valore “media_author” esistente, poi un elemento “media_author” viene aggiunto all’array $form_fields.

Infine, la callback restituisce i campi $form_fields (vedi il codice su Gist).

Nella pagina Modifica media viene visualizzato un nuovo campo, al quale si può accedere selezionando la relativa immagine dalla propria Libreria Media e cliccando sul link Modifica i dettagli aggiuntivi:

Accedere alla pagina Modifica Media di WordPress

Accedere alla pagina Modifica Media di WordPress

Nella schermata risultante, vedrete il vostro nuovo campo di metadati personalizzati in basso:

Nuovo campo metadati

Nuovo campo metadati “autore”

Il passaggio successivo è il salvataggio dell’input dell’utente. Per questo è necessario agganciare una nuova funzione all’azione edit_attachment:

function media_hacks_edit_attachment( $id ){
	if ( isset( $_REQUEST['attachments'][$id]['media_author'] ) ) {
    
		$media_author = $_REQUEST['attachments'][$id]['media_author'];
    
		update_post_meta( $id, 'media_author', $media_author );
	}
}
add_action( 'edit_attachment', 'media_hacks_edit_attachment' );

Questa funzione prende un solo argomento: l’$attachment_id del file multimediale corrente. Per prima cosa, la funzione verifica se è stato inviato un valore valido per il metacampo personalizzato. Poi registra il valore grazie alla funzione update_post_meta (si veda il codice su Gist).

Ora è possibile recuperare il valore ‘media_author’ grazie alla funzione get_post_meta:

$media_author = get_post_meta( $post->ID, 'media_author', true );

Dopo di che, potrete visualizzarlo in qualsiasi punto del frontend.

2. Visualizzare i Metadati EXIF e IPTC nella Schermata Modifica Media

WordPress memorizza automaticamente i metadati estesi per i mime type JPEG e TIFF. Ora che sapete come aggiungere campi alla schermata Modifica Media via media.php, potete visualizzare questi dati.

Per farlo, è necessario modificare la prima funzione di callback come segue:

function media_hacks_fields_to_edit( $form_fields, $post ){

	// get post mime type
	$type = get_post_mime_type( $post->ID );

	// get the attachment path
	$path = get_attached_file( $post->ID );

	// get image metadata
	$metadata = wp_read_image_metadata( $path );

	if( 'image/jpeg' == $type ){

		if( $metadata ) {

			$exif_data = array(
				'aperture'          => 'Aperture', 
				'camera'            => 'Camera', 
				'created_timestamp' => 'Timestamp',
				'focal_length'      => 'Focal Length', 
				'iso'               => 'ISO', 
				'shutter_speed'     => 'Exposure Time', 
				'orientation'       => 'Orientation' );

			foreach ( $exif_data as $key => $value ) {

				$exif = $metadata[$key];
				$form_fields[$key] = array(
					'value' => $exif ? $exif : '',
					'label' => __( $value ),
					'input' => 'html',
					'html'  => "ID][$exif]' value='" . $exif . "' />
				);
			}
		}
	}
	return $form_fields;
}
add_filter( 'fields_to_edit', 'media_hacks_fields_to_edit', 10, 2 );

Questo frammento utilizza le seguenti funzioni di WordPress:

Se il mime type dell’immagine è “image/jpeg”, e se i metadati esistono, allora viene dichiarato un array di metadati obbligatori e viene creato un campo del form per ogni elemento dell’array:

metadati EXIF e IPTC

Campi di metadati EXIF e IPTC nei dettagli degli allegati di WordPress


I campi del form di questo esempio sono un po’ più complessi perché stiamo impostando un valore per l’elemento ‘html’ del form (si veda il codice su Gist). Non è necessario salvare i metadati EXIF e IPCT, perché WordPress li memorizza automaticamente nella tabella wp_postmeta nel momento in cui si caricano le immagini.

3. Mostrare i Metadati Estesi sul Frontend

Avere tutte queste informazioni per voi stessi sul back-end è utile. Ma, se volete mostrare i metadati estesi dei vostri file multimediali anche sul frontend, dovrete fare un po’ più di ritocchi.

Potete aggiungere queste informazioni alla descrizione dell’allegato utilizzando il filtro the_content in wp-admin/includes/post.php, in questo modo:

function media_hacks_the_content( $content ){
	global $post;

	if( is_attachment() && 'image/jpeg' == get_post_mime_type( $post->ID ) ) {

		$fields = wp_get_attachment_metadata( $post->ID );
		$meta = $fields['image_meta'];

		if( ! empty( $meta['camera'] ) ){
			$custom_content = "
			<ul>
				<li>Camera: {$meta['camera']}</li>
				<li>Created timestamp: {$meta['created_timestamp']}</li>
				<li>Aperture: {$meta['aperture']}</li>
				<li>Focal length: {$meta['focal_length']}</li>
				<li>ISO: {$meta['iso']}</li>
				<li>Shutter speed: {$meta['shutter_speed']}</li>
				<li>Orientation: {$meta['orientation']}</li>
			</ul>";
			$content .= $custom_content; 
		}
	}
	return $content;
}
add_filter( 'the_content', 'media_hacks_the_content' );

Qui viene chiamata la funzione wp_get_attachment_metadata. Se il tipo di post corrente è “attachment”, e se il mime type corrente è “image/jpeg”, allora i metadati immagine disponibili vengono recuperati e utilizzati per costruire un elenco non ordinato di campi, che viene quindi aggiunto in fondo al contenuto del post.

La funzione di callback restituisce $content (questo codice è anche disponibile su Gist):

Metadati EXIF e IPTC visualizzati sulla pagina di un allegato

Metadati EXIF e IPTC visualizzati sulla pagina di un allegato

Qui sopra potete vedere il nuovo post di tipo attachment con i metadati aggiunti alla descrizione.

4. Pubblicare un Archivio di Foto

WordPress non visualizza gli archivi degli allegati. Questo perché l’opzione has_archive del tipo di post attachment è impostata su false.

Inoltre, mentre il parametro predefinito post_status dell’oggetto $query è impostato su “publish”, il post_status predefinito degli allegati è impostato su “inherit”. Questo significa che nessun allegato sarà mostrato negli archivi a meno che non si imposti esplicitamente il post_status della query su “inherit” o “any” (si veda WP_Query Type Parameters per ulteriori informazioni).

Detto questo, per mostrare gli archivi di immagini, bisogna definire due funzioni. La prima funzione filtra gli argomenti di un tipo di post specificato, e imposta la proprietà has_archive dell’allegato al valore true:

function media_hacks_register_post_type_args( $args, $post_type ){
	if( $post_type == 'attachment' ){
		$args['has_archive'] = true;
	}
	return $args;
}
add_filter( 'register_post_type_args', 'media_hacks_register_post_type_args', 10, 2 );

La seconda funzione imposta valori personalizzati per le variabili della query post_mime_type e post_status:

function media_hacks_pre_get_posts( $query ){
	if ( !is_admin() && $query->is_main_query() ) {

		if( is_post_type_archive('attachment') ){
			$query->set('post_mime_type', 'image/jpeg');
			$query->set( 'post_status', 'inherit' );
		}
	}
}
add_action( 'pre_get_posts', 'media_hacks_pre_get_posts' );

La funzione è agganciata all’action hook pre_get_posts, che viene attivato dopo che la query è stata creata, ma prima che venga eseguita. L’oggetto $query viene passato per riferimento, non per valore, il che significa che qualsiasi modifica all’istanza corrente di $query influenzerà l’oggetto $query originale.

Per questo motivo, è importante verificare quale query si intende modificare (si veda questo codice su Gist). Ora, se inserite https://yourdomain.com/?post_type=attachment nel vostro browser, dovreste vedere un archivio di immagini JPEG:

Archivio media WordPress

Archivio media WordPress

Il codice completo di tutti questi hack è disponibile come plugin in un Gist pubblico, al quale abbiamo fatto rinvio in diversi punti di questa sezione. Potete scaricarlo come file .zip e caricarlo sul vostro sito WordPress per implementare tutti e quattro questi hack, senza dover modificare manualmente i vostri file.

Un'immagine vale più di 1.000 parole... ma solo se sai come importarla, modificarla e gestirla nel tuo sito WordPress. 🖼 Clicca per scoprire di più in questa guida approfondita 📸Click to Tweet

Riepilogo

Immagini, video, file audio e documenti possono essere estremamente preziosi per gli utenti del vostro sito. La Libreria Media di WordPress è essenziale per caricare, pubblicare e persino modificare questi file e soddisfare le necessità dei vostri contenuti.

Avete domande sulla Libreria Media di WordPress? Fatecelo sapere nella sezione commenti qui sotto!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani