Tutorial su Advanced Custom Fields: La Vostra Guida Definitiva

I campi personalizzati (custom field) di WordPress sono una parte importante di ciò che rende WordPress un sistema di gestione dei contenuti flessibile piuttosto che “una semplice piattaforma per i blog”.

Quando si tratta di campi personalizzati di WordPress, il plugin freemium Advanced Custom Fields è uno dei nomi più noti. È un plugin che rende più facile lavorare sotto tutti gli aspetti con i campi personalizzati, ed è anche l’argomento del nostro articolo di oggi.

In particolare, spiegheremo perché Advanced Custom Fields è uno strumento prezioso e vi mostreremo passo dopo passo come utilizzarlo sul vostro sito WordPress.

Ecco tutto ciò che troverete in questo articolo:

C’è molto di cui parlare, per cui iniziamo subito!

Cosa Sono i Campi Personalizzati di WordPress? Cosa Vi Permettono di Fare?

I custom field (o campi personalizzati) di WordPress consentono di aggiungere, archiviare e visualizzare informazioni aggiuntive su un contenuto in WordPress. A livello più tecnico, i custom field consentono di archiviare metadati.

Anche se non avete familiarità con questo termine, i custom field potenziano gran parte delle funzionalità dei vostri plugin e temi preferiti.

Per esempio, WooCommerce, il plugin più popolare per creare un negozio di ecommerce, utilizza i campi personalizzati per memorizzare informazioni aggiuntive su un prodotto come:

• Prezzo
• Peso
• Colore

Oppure, se usate un plugin WordPress per la gestione del calendario eventi, questo utilizzerà i campi personalizzati per memorizzare informazioni aggiuntive su un evento come:

• Posizione
• Inizio/ora di fine
• Prezzo

Potete anche creare campi personalizzati per memorizzare informazioni in base alle vostre esigenze specifiche, cosa di cui parleremo in questo articolo.

Quando Dovreste Utilizzare i Campi Personalizzati?

Ora vi starete chiedendo perché dovreste aver bisogno dei campi personalizzati.

Ad esempio, se desiderate pubblicare un evento sul vostro sito, non potreste semplicemente inserire nell’editor di WordPress tutte queste informazioni come se fossero un normale testo?

Beh, sì, potreste. Tuttavia, l’utilizzo di campi personalizzati è un approccio migliore per una serie di motivi:

• Inserimento più semplice — invece che digitare le informazioni da zero, un gruppo di custom field ben strutturato renderà molto più semplice l’inserimento dei dati. Per esempio, invece di digitare una data potrete semplicemente selezionarla da un selettore di date.
• Coerenza — le informazioni inserite nei custom field verranno sempre visualizzate in base alla vostra configurazione, il che significa che rimarranno coerenti in tutto il sito.
• Semplicità di aggiornamento e di manutenzione — se in futuro vorrete cambiare qualcosa relativamente alla visualizzazione di quelle informazioni, potrete semplicemente aggiornare un campo solo invece che modificare ogni post individualmente.

WordPress Include una Funzionalità Integrata per i Campi Personalizzati

Effettivamente WordPress include già una funzionalità integrata per aggiungere i campi personalizzati al vostro contenuto. Nell’editor classico TinyMCE, è possibile abilitarli dalla sezione Opzioni schermo. Nel nuovo editor a blocchi, invece, si possono abilitare dalla sezione Opzioni:

Potete quindi inserire i dati dei campi personalizzati utilizzando delle coppie chiave/valore:

Questa funzionalità nativa per campi personalizzati funziona perfettamente, ma di sicuro non è il modo più user-friendly per usarli, motivo per cui molte persone si affidano invece al plugin Advanced Custom Fields.

Advanced Custom Fields Rende Tutto Più Facile

Per farla breve, Advanced Custom Fields rende molto più semplice lavorare con i campi personalizzati in WordPress…praticamente sotto ogni aspetto.

Il plugin semplifica l’interfaccia per l’aggiunta e la gestione di campi personalizzati nella dashboard di WordPress, ma anche il processo di visualizzazione delle informazioni dai campi personalizzati nel frontend del vostro sito. Questo fatto da solo già spiega perché il plugin sia attivo su oltre 1 milione di siti web con una valutazione di 4,9 stelle su oltre 1.000 recensioni.

Nel backend, invece, vi consentirà di creare metabox intuitive che includono tipologie preselezionate di campi. Quindi, invece che la generica interfaccia di coppia chiave-valore (come quelle che abbiamo visto sopra), sarete in grado di utilizzare selettori di date, caselle di spunta e altre cose come queste:

Nel complesso, Advanced Custom Fields offre oltre 30 tipi di campi diversi che potete aggiungere a qualsiasi area della dashboard, inclusi post, utenti, tassonomie, contenuti multimediali, commenti e persino pagine di opzioni personalizzate.

Trovate informazioni dettagliate su ciascuna tipologia di campo qui.

Advanced Custom Fields rende anche molto più semplice la visualizzazione di tali informazioni, grazie a funzioni ben documentate, shortcode, blocchi di Gutenberg e molto altro.

In alternativa, potete trovare integrazioni con altri strumenti, come alcuni page builder drag-and-drop per WordPress.

Advanced Custom Fields Gratis vs Pro: Quale Vi Serve?

Advanced Custom Fields è disponibile sia in versione gratuita che in versione premium a un prezzo accessibile.
Per la maggior parte dei casi, la versione gratuita va benissimo. Vi dà accesso a quasi tutti i tipi di campo, nonché a tutte le funzioni descritte sopra che fanno risparmiare tempo e sono di facile utilizzo.
Se vi interessa solo archiviare alcune informazioni extra sui vostri contenuti, la versione gratuita è tutto ciò di cui avrete bisogno.

Detto questo, la versione Pro include alcune funzionalità convenienti che aiutano a utilizzare Advanced Custom Fields in modi più interessanti:

• Campi ripetuti — questi vi consentono di ripetere determinati campi o gruppi di campi post dopo post. Ad esempio, se aveste bisogno di aggiungere informazioni sull’oratore a un evento, un campo ripetuto vi aiuterebbe a gestire il caso in cui fosse presente più di un oratore (potreste semplicemente “ripetere” il campo (o i campi) relativo all’oratore tutte le volte necessarie, cosa che consentirebbe di gestire casi limite in cui sono presenti più oratori).
• Blocchi ACF — mostra i campi come un blocco Gutenberg, invece che come una metabox. Quest’opzione è particolarmente utile se state costruendo un sito per un cliente e volete dare loro un modo semplice per inserire e visualizzare dati di campo personalizzati.
• Campo dal contenuto flessibile — consente di creare layout partendo da altri campi. Assomiglia un po’ a un page builder ultraleggero basato sulle informazioni del campo personalizzato.
• Campo Galleria — carica più immagini in un singolo campo.

Ci sono anche alcune altre differenze, come le pagine delle opzioni, la possibilità di clonare campi o di migliorare i campi di relazione e altri piccoli dettagli.

Potete vedere tutte le funzionalità di ACF PRO qui.

Il prezzo di ACF PRO parte da $25 per una durata d’uso illimitata su un singolo sito. In alternativa, potete pagare $100 per un uso a vita su siti illimitati.

Se avete dubbi, meglio iniziare con la versione gratuita fino a capire esattamente quali funzionalità vi sono necessarie. Potete sempre fare un upgrade in seguito, se necessario.

Tutorial su Advanced Custom Fields: Come Aggiungere i Campi

Entriamo ora nel vivo del tutorial su Advanced Custom Fields: vi mostrerò come creare e visualizzare il vostro primo set di campi personalizzati.

Per questo esempio, diciamo che avete un blog sulla corsa. Vi piace davvero correre e volete condividere i vostri allenamenti quotidiani con i vostri lettori. In particolare, con ogni post del blog, volete condividere questi dati sulla vostra corsa:

• Scopo — supponiamo di avere due diversi tipi di corsa: “velocità” e “condizionamento”.
• Distanza — lunghezza della corsa.
• Ora di inizio — quando avete iniziato la corsa.
• Ora di fine — quando avete terminato la corsa.
• Posizione — dove si è svolta la corsa.

Per raccogliere queste informazioni, dovrete aggiungere cinque campi personalizzati.
È importante notare che le istruzioni che apprenderete durante questo tutorial su Advanced Custom Fields si applicano a qualsiasi caso. Stiamo solo scegliendo un esempio specifico perché aiuta ad avere un caso concreto come punto di riferimento.

Suddivideremo questo tutorial in due parti:

1. Come aggiungere e gestire i campi personalizzati nel backend.
2. Come visualizzare le informazioni sul campo personalizzato nel frontend del vostro sito.

1. Creare un Nuovo Gruppo di Campi

Dopo aver installato e attivato la versione gratuita di Advanced Custom Fields da WordPress.org, andate su Custom Fields > Add New per creare il vostro primo Gruppo di Campi.
Come suggerisce il nome stesso, un “Gruppo di Campi” è un gruppo di uno o più campi personalizzati che vengono visualizzati insieme nella vostra dashboard WordPress.

Per questo esempio, creerete un gruppo di campi che contiene cinque campi personalizzati.
Date un nome al vostro gruppo di campi, quindi scegliete la sua Location. Per questo esempio, vogliamo visualizzare questi campi personalizzati per i normali articoli del blog WordPress, per cui potete lasciare l’opzione predefinita Post.
Tuttavia, se desiderate visualizzare i campi personalizzati altrove, come per esempio accanto a custom post type o con una tassonomia, potreste voler cambiare la posizione. Potete anche impostare più regole per visualizzare i vostri campi in posizioni molteplici:

2. Aggiungere i Campi Personalizzati

Successivamente, fate clic sul pulsante + Add Field per aggiungere il vostro primo campo personalizzato:

Questa azione aprirà diverse opzioni, ma non è necessario compilare tutto.
Le due scelte più importanti sono::

• Field Label — questo è ciò che apparirà nell’editor. Verrà inoltre utilizzato per generare il Nome Campo, che è lo stesso che userete nel codice. Non è necessario modificare il nome del campo (anche se è possibile farlo, se necessario).
• Field Type — questo è il tipo di informazioni che desiderate raccogliere. Ad esempio, avreste bisogno di un campo Number per raccogliere informazioni sul numero o di un campo Email per raccogliere indirizzi email.

Per questo primo campo, scegliamo il Field Type Radio Button:

Più in basso, potrete inserire i valori da selezionare nel Radio Button nella sezione Choices:

Ci sono anche diverse altre opzioni fra cui scegliere, ad esempio se un campo è obbligatorio o meno, oppure se inserire un valore predefinito. Avete la libertà di configurare tutto in base alle vostre esigenze.

Diamo ora un’occhiata a un altro esempio: un campo personalizzato per raccogliere informazioni sulla lunghezza della corsa. Questa volta, vogliamo usare il tipo di campo Number:

Potreste anche rendere il tutto più user-friendly aggiungendo l’unità di distanza nel campo Append. Se lo desiderate, potete anche aggiungere la convalida con un valore minimo, Minimum Value, e un valore massimo, Maximum Value. Per esempio, probabilmente non state affrontando corse da 1600 km (e se lo state facendo…wow, siete il prossimo Forrest Gump)!

Ora basta ripetere la procedura per tutti gli altri campi personalizzati che vi servono. Alla fine, dovreste ottenere qualcosa di simile a questo:

3. Configurare le Impostazioni e Pubblicare

Per finire, scorrete verso il basso fino alla sezione Settings . Qui potete controllare come vengono visualizzati i vostri campi nell’Editor WordPress.

La maggior parte delle volte, potete lasciare queste opzioni come predefinite, ma sentitevi liberi di cambiare quello che volete. Ad esempio, potete scegliere di visualizzare i campi personalizzati in cima al normale editor WordPress:

Dopo aver fatto le vostre scelte, pubblicate il gruppo di campi per renderlo attivo, facendo clic su Publish.

4. Aggiungere Informazioni nell’Editor WordPress

Dopo aver pubblicato il vostro gruppo di campi, li vedrete apparire quando andrete a creare un nuovo post.

Per impostazione predefinita, appariranno insieme sotto l’editor sia nel classico editor TinyMCE che nel nuovo editor a blocchi:

Le informazioni che inserite qui verranno archiviate nel Database WordPress del vostro sito, così sarà più facile recuperarle (come vedrete nella prossima parte del nostro tutorial su Advanced Custom Fields).

Esplorando la Logica Condizionale

Prima di andare avanti, facciamo una piccola parentesi.

Vedete, fra i motivi per cui Advanced Custom Fields ci sono le interessanti implementazioni che consente di creare.
Un’opzione potente è la possibilità di usare la logica condizionale (Conditional Logic), che vi consente di mostrare o nascondere i campi in base alla risposta data in un campo precedente.

Vediamo con un rapido esempio come funziona.

Diciamo che ora volete scrivere sul vostro blog di cibo, dei vostri viaggi o di qualsiasi altro argomento diverso dalla corsa. Quando scrivete di un argomento che non riguarda la corsa, non ha molto senso visualizzare i campi personalizzati con informazioni relative alla corsa, giusto?

E se, invece che visualizzare automaticamente tutti i campi personalizzati appena creati, fosse possibile aggiungere un campo personalizzato che chiede “Qui si parla di corsa?”:

Se selezionate quella casella, verranno visualizzati automaticamente i campi di informazioni relative alle corsa. Se la lasciate deselezionata, i campi rimangono nascosti:

Ecco cosa consente di fare la logica condizionale!

Per impostare questa opzione, dovete modificare il gruppo di campi e aggiungere un nuovo campo Vero/Falso (True / False) per l’etichetta “Qui si parla di corsa?”:

Quindi, dovreste modificare i campi esistenti e attivare la logica condizionale (Conditional Logic) per visualizzare ciascun campo solo quando è selezionato il campo “Qui si parla di corsa?”:

Come Visualizzare Advanced Custom Fields nel Frontend

Ok, siamo a metà del nostro viaggio con Advanced Custom Fields. Ora sapete come aggiungere informazioni ai vostri campi personalizzati, associarli con la tipologia di post pertinente e archiviarli nel vostro database.

Tuttavia, c’è ancora un potenziale problema: le informazioni dei vostri campi personalizzati non appaiono da nessuna parte nel frontend!

Cioè, anche se avete aggiunto alcuni campi personalizzati all’editor per i vostri articoli del blog, il vostro articolo appare ancora come un normale post nel frontend:

Risolviamo il problema.

Esistono diversi modi per visualizzare i dati di Advanced Custom Fields nel frontend del vostro sito. Il metodo che sceglierete dipenderà dalle vostre esigenze e dal vostro livello di conoscenze tecniche. Ecco tre modi diversi per farlo:

1. Il file del template del vostro tema — opzione che richiede un po’ di conoscenze tecniche, ma nella maggior parte dei casi è l’approccio migliore, specialmente se vi sentite a vostro agio lavorando coi file del template del vostro tema.
2. Con uno shortcode — questa è un’opzione semplicissima e conveniente se volete semplicemente inserire i dati dei campi personalizzati volta per volta. Tuttavia, richiede molto più lavoro manuale perché dovrete aggiungere degli shortcode per ogni post.
3. Con Elementor Pro — opzione fantastica perché elimina del tutto la necessità di lavorare con il PHP, ma si tratta anche di un prodotto premium e significa che dovrete usare Elementor Pro anche per il vostro template.

Potete ora fare clic nei link sopra per passare direttamente a un metodo specifico, oppure leggerli tutti. A voi la scelta.

Come Aggiungere Advanced Custom Field nei File del Template del Tema

Il primo metodo per visualizzare le informazioni dei campi personalizzati è aggiungere le funzioni PHP di Advanced Custom Fields direttamente nei file del template del vostro tema figlio.

Si tratta di una tecnica un po’ avanzata perché richiede di lavorare nei file del template del tema, ma garantisce che i campi personalizzati vengano automaticamente visualizzati ogni volta nello stesso punto.

In particolare, dovrete modificare il template single per il tipo di post in questione.
Per un normale articolo del blog, si tratta del file single.php. Alcuni temi suddividono tutto in porzioni diverse di template. Ad esempio, per il Tema Twenty Nineteen, dovrete modificare la parte di template chiamata content-single.php.

Se a questo punto vi sentite già un po’ persi, sarebbe meglio passare a un altro metodo.

Una volta trovato il file del template del tema per il vostro singolo post, potete usare la funzione the_field () di Advanced Custom Fields per visualizzare le informazioni di un campo. Per esempio,

<?php the_field('FIELD_NAME'); ?>

Per saperne di più leggete qui.

Ad esempio, per visualizzare il campo “Purpose”, dovreste usare

<?php the_field('purpose'); ?>

Potete trovare il nome del campo quando modificate un gruppo di campi:

Quindi, combinando un po’ di markup HTML con il PHP, potreste ottenere qualcosa del genere per visualizzare tutti i campi:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Per aggiungere questo in cima al normale contenuto del post, dovreste aggiungerlo al file del template del tema, sopra the_content ():

Ora, dopo aver aggiornato l’articolo del blog, potete vedere i dati dei campi personalizzati in cima al normale contenuto di WordPress:

Per saperne di più, consultate la documentazione completa di Advanced Custom Fields.

Come Visualizzare i Dati di Advanced Custom Fields con uno Shortcode

Un modo molto più semplice per visualizzare i dati di Advanced Custom Fields è attraverso gli shortcode. Il rovescio della medaglia, però, è che dovrete aggiungere lo shortcode ogni volta che vorrete visualizzare un campo personalizzato. Non esiste un modo semplice per automatizzare questa azione.

Lo shortcode è questo:

[acf field="FIELD_NAME"]

Ad esempio, se lo avete inserito nell’editor di WordPress:

Il frontend del vostro sito si vedrebbe esattamente allo stesso modo che con il metodo del template del tema che abbiamo visto in precedenza:

Come Visualizzare Advanced Custom Fields con Elementor Pro

Elementor è uno dei page builder per WordPress più famosi. Vi consente di disegnare i vostri progetti web grazie all’editing visivo di tipo drag-and-drop. Oltretutto, Elementor è anche uno dei partner ufficiali di Kinsta.

Con Elementor Pro, che è un add-on a pagamento, potete anche creare dei file di template per il vostro tema, includendo un’opzione per inserire dati di campi personalizzati dinamici di Advanced Custom Fields direttamente nei vostri progetti.

Questa è un’ottima opzione se volete la flessibilità di includere automaticamente i dati dei campi personalizzati nei vostri template, ma non vi sentite a vostro agio apportando modifiche dirette al codice dei file del template del vostro tema.

Per iniziare, andate su Templates > Theme Builder e create un nuovo template Single per il vostro post:

Potete aggiungere i normali widget di Elementor per il titolo del post (Post Title) e per il suo contenuto (Post Content). Quindi, per visualizzare i dati dei campi personalizzati, potete aggiungere i normali widget per il Text Editor. L’unica differenza qui è che, invece di modificare il testo, selezionerete l’opzione Dynamic:

Dopo questo, potete selezionare ACF Field dal menu a discesa:

Da lì, sarà possibile selezionare il campo specifico che avrete aggiunto con Advanced Custom Fields:

Potete anche utilizzare la scheda Advanced per anteporre o aggiungere informazioni, così da poter aggiungere etichette e unità:

Facile, non è vero? Ora non vi rimane che ripetere il procedimento per gli altri campi personalizzati!

Riepilogo

Con Advanced Custom Fields potete arricchire le vostre pagine e gli articoli del blog con più dati e informazioni grazie a uno strumento di facile utilizzo. In più potete iniziare a raccogliere informazioni aggiuntive per qualsiasi contenuto del vostro sito e poi mostrarlo ai vostri utenti nel frontend.

Per farlo, avete 3 opzioni:

• Tramite i file del template del vostro tema
• Con uno shortcode
• Con Elementor Pro

Le conoscenze acquisite con questo tutorial vi permetteranno di scoprire le potenzialità più profonde di WordPress per costruire siti personalizzati al 100% e che vanno ben oltre le sue origini di piattaforma per i blog.

L’unica domanda che ci rimane è questa:

Cosa creerete con Advanced Custom Fields? Condividetelo con noi nei commenti qui sotto.