Campo file ACF: Guide all’uso e alla visualizzazione

Il campo File è uno dei tanti tipi di campo ACF e consente di "aggiungere" allegati dalla Libreria multimediale a qualsiasi pagina.

A differenza del campo Immagine, che consente di selezionare solo immagini (.png, .jpg, . gif e simili) il campo File consente di scegliere un file con qualsiasi estensione dalla propria Libreria multimediale, compresi vari tipi di file, come .pdf e .doc

Inoltre, a differenza del campo Immagine, non fornisce un'anteprima del file selezionato, per cui è possibile vedere solo il nome e la dimensione del file. Di solito, gli sviluppatori utilizzano questo tipo di campo per creare un link di download o di "apertura" del file.

Il campo supporta diverse estensioni di file. L'elenco delle estensioni consentite per tutti i tipi di file è riportato nella pagina relativa a wordpress.org.

Il campo File ACF ha 3 opzioni nell'impostazione Tipo di ritorno: File Array, File URL e File ID. Questa impostazione non influisce sull'aspetto del campo per gli editor di amministrazione. Ma controlla il formato del valore che si ottiene nel codice quando si richiede il valore del campo dalla base dati.

Pertanto, suggerisco di utilizzare l'opzione 'ID file'. È la scelta migliore per le prestazioni e consente di ottenere qualsiasi dato aggiuntivo sull'allegato selezionato, come il nome del file o la data di caricamento. Evitate l'opzione "URL file", a meno che non vi serva per un obiettivo specifico. Non consente infatti di ottenere dati aggiuntivi sull'allegato.

Come abbiamo detto, il campo File funziona con la Libreria multimediale e consente di aggiungere ogni tipo di allegato alle pagine. Ma è necessario sapere che quando si "aggiunge" un file significa in realtà "allegare", non copiare. Il campo è solo l'intermediario tra una pagina e la Libreria multimediale e associa l'ID del file scelto a Post Meta della pagina corrente. Significa senza creare duplicati o copie fisiche del file.

Anche nel caso in cui si stia caricando un nuovo allegato attraverso la finestra di dialogo di caricamento del campo, il file verrà caricato nel Catalogo multimediale come un normale allegato, con il campo file che memorizza solo l'ID allegato. In questo modo, è possibile "allegare" un file a molte pagine senza creare copie.

È comunque necessario dare nomi chiari agli allegati e cercare di evitare di caricare lo stesso file più volte. Perché la Libreria multimediale non sa se l'allegato caricato è completamente nuovo o se esiste già. Quindi, se non siete sicuri, fate una rapida ricerca nel Catalogo multimediale prima di caricarlo. Altrimenti, con il passare del tempo si avranno molti grattacapi a causa di più copie della stessa cosa.

Inoltre, anche l'impostazione del formato di ritorno non influisce sul valore memorizzato. Si tratta sempre di un ID allegato. Se non si è selezionato il formato di ritorno "ID file", ogni volta che si richiede il campo il plugin ACF farà un lavoro supplementare per convertire l'ID allegato salvato in un altro formato; per questo motivo è meglio per le prestazioni usare l'opzione nativa "ID file".

Gli shortcode sono una delle funzioni di WordPress più potenti e facili da usare. Gli shortcode consentono di "chiamare" funzioni PHP direttamente nell'editor, come Gutenberg. In questo modo è possibile visualizzare contenuti dinamici.

Per creare uno shortcode è necessario scrivere del codice PHP. Ma oggi non lo faremo, useremo un plugin gratuito chiamato ACF Views. Questo farà tutto il lavoro per noi e vi permetterà di visualizzare qualsiasi campo ACF, utilizzando shortcode generati automaticamente. Leggete come visualizzare i campi ACF senza codifica per conoscere tutti i vantaggi dell'approccio shortcode.

Di seguito abbiamo allegato un video tutorial che mostra come visualizzare i campi ACF in una singola pagina utilizzando il metodo degli shortcode. Il video è comune a tutti i tipi di campi ACF. Altri video tutorial sono disponibili sul canale ufficiale di YouTube.

Ma non esitate a saltare il video perché qui di seguito vi forniamo una guida completa passo-passo esattamente per il campo del file ACF.

Se volete seguire la guida, dovete farlo:

1. installare il plugin ACF Views sul vostro sito WordPress. E non dimenticate di attivarlo. È un componente aggiuntivo di ACF, quindi dovrete anche
2. Installare il plugin gratuito Advanced Custom Fields (ACF) e attivarlo.

Dopo aver attivato il plugin ACF Views, si vedrà una nuova voce nel menu di amministrazione, chiamata "ACF Views".

Questa voce ha un sottomenu con diverse voci, ma a noi servirà solo quella chiamata "ACF Views".

Fare clic sul pulsante "Aggiungi nuovo" per creare una vista .

Nota: il termine "View" è il nome dato al tipo di post speciale fornito dal plugin. Ogni Vista è un elenco di campi ACF da visualizzare, quindi si possono avere molte diverse Viste per visualizzare diversi campi (o insiemi di campi) per diversi post/pagine.

Dare quindi un nome alla vista si può usare qualsiasi cosa che descriva la vista. Questo nome verrà visualizzato solo nell'elenco delle viste , rendendone più facile la ricerca. Ho chiamato la mia vista "Catalogo pagine".

Ora è necessario assegnare un nuovo campo alla vista . Fare clic sul pulsante 'Aggiungi campo' e selezionare il 'Gruppo' dall'elenco a discesa. Nel mio caso, il gruppo ha il nome "Campi pagina". Quindi continuare a selezionare il campo di destinazione dall'elenco, io ho selezionato "Catalogo (file)".

Nota: il tipo di campo è indicato tra le parentesi dopo il nome del file. In questo modo è possibile identificare facilmente il tipo di qualsiasi campo nel menu a tendina.

Si dovrebbe vedere anche il tipo come "file". Definire una "Etichetta di collegamento" per il nostro futuro collegamento. Oppure lasciatela vuota, se volete che il plugin la prenda dall'allegato selezionato.

In generale, ogni vista può avere un numero illimitato di campi ACF, ma nel nostro caso ne useremo solo uno.

Fare clic sul pulsante "Pubblica" per salvare e pubblicare la vista . Appena pubblicata, si noterà che gli shortcode sono stati generati in un blocco sul lato destro della schermata di modifica della vista. Ogni Vista ha il suo shortcode con un ID unico (la struttura dello shortcode è la stessa per tutte le Viste, ma gli argomenti sono unici).

[acf_views view-id="xxxx" name="x"]

Ora dobbiamo copiare lo shortcode. Per questo obiettivo, fare clic sul pulsante "Copia negli appunti" sul primo shortcode.

Ora che abbiamo preparato tutto siamo pronti a visualizzare il campo File.

Visitate la vostra pagina di destinazione, dove troverete il campo file. Ricordatevi di controllare che ci sia un allegato nel campo File e incollate lo shortcode in qualsiasi punto del contenuto della pagina.

Per incollare lo shortcode con l'editor di Gutenberg, basta cliccare sul pulsante più nella barra superiore e scegliere il blocco "Shortcode" dall'elenco. Incollare quindi lo shortcode nel blocco e fare clic sul pulsante "Aggiorna" per salvare il post/pagina.

Visitate la pagina per vedere il risultato. Se si è fatto tutto correttamente, si dovrebbe vedere il file selezionato visualizzato nel contenuto come un link, con l'etichetta definita. Oppure con il nome del file allegato, nel caso in cui sia stato lasciato vuoto.

Se non si vede il link, tornare indietro e modificare la pagina. Assicuratevi di aver allegato un file al campo del file ACF, perché se il campo è vuoto non verrà visualizzato nulla.

Nella maggior parte dei casi, dovremmo trasformare il campo File in un link da mostrare agli utenti. In questo modo, quando cercheranno di scaricare l'allegato o di aprirlo in una nuova scheda del browser, sarà facile per loro. Per farlo, è necessario ottenere l'URL del file (e probabilmente anche il nome) e poi creare l'HTML per il collegamento.

Il codice sarà diverso a seconda del tipo di ritorno selezionato. Di seguito sono riportati alcuni esempi.

1. Codice PHP per visualizzare il campo File con il formato di ritorno "ID":

<?php

// don't forget to replace 'file' with your field name
$fileID = get_field('file');
if ($fileID) {
   // $fileID is an ID (integer) of a Post with the Attachment type. 
   // we need to use the built-in WP functions to get necessary data
    $url = wp_get_attachment_url($fileID);
    $name = get_post($fileID)->post_title ?? '';
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", esc_attr($url), esc_attr($name), esc_html($name));
}

2. Codice PHP per visualizzare il campo File con "Array" Formato di ritorno:

<?php

// don't forget to replace 'file' with your field name
$fileData = get_field('file');
if ($fileData) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", 
     esc_attr($fileData['url']), esc_attr($fileData['filename']), esc_html($fileData['filename']));
}

3. Codice PHP per visualizzare il campo File con "URL" Formato di ritorno:

<?php

// don't forget to replace 'file' with your field name
$fileUrl = get_field('file');
if ($fileUrl) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='prices.pdf'>Prices.pdf</a>", esc_attr($fileUrl));
}

Abbiamo usato l'attributo download (read more) per far sapere al browser del client che questo file, invece di essere aperto, deve essere scaricato. Il valore dell'attributo sarà usato come nome del file da scaricare. Rimuovere l'attributo se si desidera che il file venga aperto anziché scaricato.

Con il formato di ritorno "URL" dobbiamo codificare il nome del file. Non c'è modo di usare questo codice per file diversi o di modificarlo senza modificare il codice. Per questo motivo è meglio scegliere sempre il formato di ritorno "ID".

Per ulteriori informazioni, guardate il video qui sotto e leggete l'articolo ufficiale dell'ACF.

Abbiamo dato un'occhiata più da vicino al campo File ACF e a come utilizzarlo e visualizzarlo. Sono stati illustrati gli aspetti importanti da ricordare quando si utilizza questo tipo di campo.

È utile sapere che è possibile avere più campi (anche di gruppi diversi) in una singola Vista e che è possibile stilizzare l'output dei campi utilizzando il campo del codice CSS (vedere la scheda Avanzate della Vista). Il plugin aggiungerà il CSS solo alle pagine in cui si utilizza lo shortcode. Non è quindi necessario cercare un posto dove inserirlo.

Visitate il sito ufficiale di ACF Views per ottenere maggiori informazioni sul plugin, potete anche trovare i link al canale YouTube del plugin che contiene video tutorial e la documentazione del plugin. Queste risorse vi aiuteranno a familiarizzare più rapidamente con il plugin.