Come usare ACF (Advanced Custom Fields) in WordPress

In WordPress, i campi personalizzati – in inglese “custom fields” – sono elementi che permettono di aggiungere informazioni di varia natura agli articoli, alle pagine, ai media. Tali informazioni, salvate dal sistema sotto forma di metadati, possono essere mostrate nel frontend o semplicemente archiviate.

Utilizzati da numerosi plugin per consentire agli utenti di aggiungere e archiviare informazioni che non potrebbero essere inserite utilizzando i campi disponibili di default, i campi personalizzati possono essere creati dall’utente stesso al fine di personalizzare al massimo il sito e adattarlo alle finalità per le quali è stato realizzato. Per crearli è possibile ricorrere alla funzione nativa di WordPress oppure a un plugin come ACF.

Disponibile anche in versione gratuita, Advanced Custom Fields rende più semplice il processo di creazione di campi personalizzati e più immediato l’inserimento dei dati nei contenuti. Oltre a questo, grazie alla possibilità di utilizzare gli shortcode, anche chi non vuole mettere mano al codice può mostrare senza difficoltà nel frontend i dati inseriti dei nuovi campi.

Come creare campi personalizzati

I campi personalizzati sono elementi composti da un nome, noto anche come chiave, utilizzato per identificare il tipo di informazione che si andrà a inserire, e da un valore. Quest’ultimo, personalizzabile in base al contenuto, può consistere in un testo, un numero, una data, un’immagine e altro ancora.

Il primo metodo al quale si può ricorrere per crearli è quello integrato nativamente in WordPress. Per utilizzarlo non si deve fare altro che:

• accedere alla dashboard del CMS
• andare su “Articoli / Aggiungi articolo” oppure, se si desidera inserire uno o più campi personalizzati in un post già creato, “Articoli / Tutti gli articoli” e poi click su quello da modificare
• nella pagina di modifica dell’articolo, premere l’icona delle “Opzioni” posta in alto a destra e rappresentata da tre puntini verticali

e fare click su “Preferenze”

• • nella nuova finestra, rimanere nella scheda “Generale” e scorrere verso il basso, fino a individuare le impostazioni “Avanzate“

• selezionare “Campi personalizzati” e premere “Mostra e ricarica pagina”

Attenzione: nel caso in cui fossero state apportate delle modifiche alla pagina, sarebbe necessario salvarle prima di attivare i campi personalizzati.

Queste operazioni aggiungono il box “Campi personalizzati” alla parte inferiore della pagina di modifica degli articoli.

Per creare un nuovo campo e aggiungerlo al post, non si deve fare altro che assegnargli un nome, premendo “Aggiungi nuovo” e digitando quello desiderato, e un valore, inserendolo nell’apposita casella. Fatto questo, premere “Aggiungi campo personalizzato“.

L’operazione può essere ripetuta per tutti i campi desiderati.

Dopo il salvataggio dell’articolo, il nuovo campo risulterà disponibile anche per gli altri articoli e per inserirlo non si dovrà fare altro che cliccare su “Nome / Seleziona“, e individuarlo tra tutti quelli disponibili nel menù a tendina. Il valore dovrà essere digitato ogni volta manualmente in quanto non è possibile assegnare valori predefiniti o strumenti per la selezione rapida come i pulsanti, le caselle di spunta o i selettori di date. Per avere queste e altre funzioni avanzate a disposizione, è possibile ricorrere a ACF.

Creare campi personalizzati con ACF

Advanced Custom Field, meglio noto come ACF, è un plugin che, al momento in cui viene redatta questa guida, conta su oltre due milioni di installazioni attive. Aggiornato con una buona frequenza e al momento compatibile con le più recenti versioni di WordPress, a partire dalla 6.0, è disponibile sia in una versione a pagamento sia in una gratuita. Quest’ultima, pur essendo un po’ più limitata, è in grado di offrire all’utente medio tutto il necessario per creare tantissimi campi personalizzati in modo davvero semplice e intuitivo.

Per iniziare subito a utilizzare questo plugin in modalità free, accedere alla dashboard di WordPress e andare su “Plugin / Aggiungi nuovo“. Digitare quindi “ACF” nella casella di ricerca e, dopo averlo individuato (dovrebbe apparire in prima posizione) premere “Installa ora” e poi “Attiva“.

Il sistema aggiungerà la nuova voce di menù “ACF“ a sinistra. Passarvi sopra il cursore e premere “Gruppi di campi”.

Si aprirà la seguente schermata:

È importante notare che questo strumento non crea campi personalizzati singoli e separati tra loro, ma raggruppamenti composti da uno più campi. Questa modalità di creazione semplifica notevolmente la loro implementazione nei post, mantenendo l’interfaccia di backend più ordinata e leggera e garantendo una maggiore omogeneità a quelle di frontend, anche quando più autori concorrono alla creazione e alla condivisione di contenuti.

Fare click sul pulsante “+ Aggiungi nuovo“ per iniziare a creare il primo gruppo di campo e, nella nuova schermata, assegnare un titolo esplicativo al gruppo, digitandolo nella casella di testo posta in alto. Se ad esempio si desiderasse creare dei campi personalizzati finalizzati all’inserimento dei dati degli eventi, si potrebbe assegnare al gruppo il nome “Eventi”, come nella sottostante immagine d’esempio.

Appena creato, il gruppo include un solo campo, completamente personalizzabile. Per procedere con la personalizzazione, estendere il box “Campi” facendo click sulla freccia a destra così da visualizzare tutte le impostazioni disponibili.

Come si vede nell’immagine, le impostazioni del campo sono divise in quattro schede:

• “Generale“: nella prima scheda si può modificare il tipo di campo (di default impostato su “Testo“) e assegnare un’etichetta, un nome e un valore predefinito. Il “Nome del campo” viene compilato in modo automatico dopo l’inserimento dell’etichetta e, all’occorrenza, può essere modificato. Alcuni tipi di campo offrono opzioni aggiuntive. Selezionando ad esempio “Gruppo di pulsanti“, compare una casella di testo per l’inserimento delle “Scelte” e un’opzione che permette di impostare il “Valore di ritorno”, ossia il valore che dev’essere mostrato nel frontend.

• “Validazione“: qui è possibile, innanzitutto, decidere se rendere la compilazione del campo obbligatoria (attivare “Necessario“). Altre opzioni possono comparire a seconda del tipo di campo selezionato. Il campo “Testo” permette ad esempio di impostare un numero massimo di caratteri

mentre “Numero” consente di impostare un valore minimo e uno massimo.

• “Presentazione“: questa scheda mette a disposizione impostazioni utili per modificare la visualizzazione del campo nel backend (come “Attributi del contenitore” e “Layout“) e per fornire ad autori ed editori informazioni aggiuntive (“Istruzioni“, “Testo segnaposto” e altri). Anche in questo caso, le opzioni variano a seconda del tipo di campo selezionato. Ecco, ad esempio, le opzioni disponibili per “Gruppo di pulsanti“:

Queste invece quelle disponibili per “Area di testo“:

Sempre presente invece l’opzione “Permetti l’accesso al valore nell’interfaccia utente dell’editor“, la quale deve essere attivata per tutti quei campi che si desidera vengano mostrati nel frontend.

• “Logica condizionale“: l’ultima scheda permette di attivare e impostare delle regole di logica condizionale, utili per mostrare specifici campi solo al verificarsi di determinate condizioni e nasconderli in ogni altra situazione.

Se ad esempio si stesse creando un gruppo di campi per l’inserimento dei dettagli degli eventi e si volesse includere un campo “URL” per i webinar e uno “Google Map” per le conferenze dal vivo, si potrebbe procedere in questo modo:

• creare un primo campo di tipo “Gruppo di pulsanti“, assegnargli un nome (per questo esempio è stato scelto “Tipologia”) e includere tra le scelte “Conferenza” e “Webinar“;
• creare un secondo campo, assegnargli un nome (ad esempio “Link“) selezionare “URL” come “Tipo di campo“, quindi spostarsi nella scheda “Logica condizionale” e attivarla
• in corrispondenza di “Mostra questo campo se” selezionare il primo campo, nel nostro caso “Tipologia“, quindi “il valore è uguale a” e “Webinar“

• creare quindi un terzo campo, assegnargli il nome desiderato (ad esempio “Mappa”), scegliere come tipo di campo “Google Map” e impostare la regola di logica condizionale selezionando “Conferenza” anziché “Webinar”.

Per aggiungere nuovi campi, premere “Aggiungi campo” oppure “Chiudi e aggiungi nuovo campo”.

Modificare le impostazioni del gruppo di campi

Per visualizzare le impostazioni generali del gruppo di campi, estendere il box “Impostazioni” posto sotto “Campi” facendo click sulla freccia a destra.

Anche in questo caso le impostazioni sono divise in più schede:

• “Regole di posizionamento“ consente di stabilire dove e quando il gruppo di campi dev’essere disponibile. A seconda dei casi, è possibile mostrarlo negli articoli, nelle pagine o in tipi di post personalizzati, oppure aggiungerlo a una tassonomia, un widget, un tipo di allegato. Si può anche decidere di renderlo disponibile al verificarsi di specifiche circostanze, ad esempio quando a un articolo viene assegnata una specifica categoria o è stato salvato come bozza. È possibile inserire più regole;
• “Presentazione“ consente di modificare il posizionamento e l’aspetto del box del gruppo di campi nel backend;

• “Impostazioni di gruppo” permette infine di attivare o disattivare il gruppo di campi.

Premere il pulsante “Salva le modifiche” per salvare il gruppo di campi e pubblicarlo.

Aggiungere i campi personalizzati di ACF ai contenuti

I campi personalizzati di ACF possono essere aggiunti esclusivamente ai tipi di contenuti selezionati nelle “Impostazioni“, nella scheda “Regole di posizionamento“.

Per fare solo qualche esempio, nel caso in cui il gruppo di campo fosse stato abbinato agli articoli, senza ulteriori precisazioni per quanto riguarda lo stato di pubblicazione, le tassonomie e via dicendo, per visualizzarlo e aggiungerlo non si dovrebbe fare altro che andare su “Articoli / Aggiungi nuovo” per creare un nuovo articolo oppure “Articoli / Tutti gli articoli” per accedere alla pagina di modifica di uno già creato. Il box del gruppo di campi comparirà nella posizione scelta in “Impostazioni /Presentazione” (di default, nella parte inferiore della pagina).

Laddove invece il gruppo di campi fosse stato abbinato, come mostrato nel seguente screenshot, alle immagini

Il corrispondente box verrebbe visualizzato sia andando su “Media / Libreria” e selezionando una delle immagini caricate o caricandone una nuova

sia, durante la creazione di pagine e articoli, selezionando dalla libreria l’immagine da aggiungere al contenuto.

Un gruppo di campi abbinato alla tassonomia “Categorie” comparirebbe invece, come a questo punto risulta facile intuire, nella pagina di modifica delle categorie (“Articoli / Categorie“).

Per aggiungere i nuovi dati al contenuto, non si deve fare altro che compilare i campi presenti nel box e salvare. Questo passaggio salva le informazioni come metadati, ma non le mostra automaticamente nel frontend.

Nel caso in cui i dati dovessero essere mostrati sul sito, sarebbe necessario effettuare alcune operazioni in più.

Mostrare i campi personalizzati di ACF nel frontend

Indipendentemente dal fatto che si sia utilizzata la funzione nativa di WordPress o il plugin ACF, la semplice compilazione dei campi personalizzati nell’editor del CMS non permette di visualizzarne i dati nel frontend. Per mostrarli sul sito è necessario eseguire una serie di passaggi che variano in base al tipo di tema in uso (classico o a blocchi) e allo strumento utilizzato.

I campi creati con Advanced Custom Fields possono essere mostrati nel frontend utilizzando:

• comodi shortcode, ideali per chi non ha dimestichezza con il codice e preferisce lavorare esclusivamente nell’editor WordPress, e funzionanti sia con i temi classici sia con quelli a blocchi
• le funzioni proprietarie come “get_field” – utile per recuperare il valore del campo come variabile – e “the_field” – utilizzabile per mostrare sul frontend il valore del campo -, inseribili, nei temi classici, all’interno dei file php del tema
• i block binding API se quello in uso è un tema a blocchi.

Utilizzare gli shortcode ACF

Il metodo più semplice e immediato da utilizzare è senza dubbio quello basato sugli shortcode.

Prima di iniziare a utilizzarli, è necessario attivarli. Prima di procedere, è consigliabile creare è attivare un tema child, così da non rischiare di perdere la modifica quando il tema viene aggiornato o di compromettere i file; se non si sa come procedere, seguire i passaggi illustrati in questa guida.

Fatto questo, aprire via FTP o tramite pannello di controllo il file function.php del tema child appena creato, oppure accedervi dalla dashboard di WordPress seguendo il percorso “Strumenti / Editor del Tema” oppure “Aspetto / Editor del tema” e cliccando su “Funzioni del tema”

e inserire alla fine del documento, ma prima del tag di chiusura, le seguenti righe di codice:

add_action('acf/init', 'set_acf_settings');

function set_acf_settings() {

    acf_update_setting('enable_shortcode', true);

}

e salvare.

A questo punto, si può procedere con l’inserimento degli shortcode nei post. Aprire dunque un articolo, inserire il blocco Gutenberg “shortcode” nel punto in cui si desidera vengano mostrate le informazioni dei campi personalizzati e inserire questo snippet di codice:

[acf field="nome_campo"]

avendo cura di sostituire “nome_campo” con il nome assegnato al campo personalizzato. Se non si ricorda qual è il nome assegnato, andare su “ACF / Gruppi di campi“, aprire il gruppo nel quale è incluso il campo che si desidera mostrare nel frontend e individuare la colonna “Nome”.

Inserire tutti gli shortcode desiderati. Per migliorarne la formattazione, aggiungendo ad esempio un’etichetta e disponendola sulla stessa riga del valore

e ottenere un risultato simile al seguente

consultare la nostra guida “Come usare Gutenberg per creare layout avanzati“.

Utilizzare “the_field”

La funzione “the_field” permette di visualizzare i campi in tutti i contenuti desiderati senza dover inserire e formattare ogni volta gli shortcode.

Applicabile da chi utilizza un tema classico, richiede un po’ di dimestichezza con i codici. Prima di procedere, è consigliabile effettuare un backup del sito, così da evitare problemi di funzionamento. Utile inoltre lavorare con un tema child.

Il codice deve essere inserito in uno dei file php del tema in uso e, in particolare, in quello che gestisce il template del tipo di post nel quale si vuole che compaiano i campi personalizzati. Ad esempio, nel caso in cui fosse stato attivato il tema Twenty Twenty-One e i campi dovessero comparire negli articoli, sarebbe necessario modificare il file “content-single.php” (percorso wp-content/themes/twentytwentyone/template-parts/content); laddove invece i campi fossero destinati alle pagine, sarebbe necessario cercare il file content-page.php (spetto percorso del precedente).

Aprire dunque il file, individuare la funzione “the_content” e inserire prima o dopo questa (dunque o prima del tag php di apertura o dopo quello di chiusura) la seguente riga di codice:

<?php the_field(nome_campo);?>

Sostituire “nome_campo” con il nome assegnato al campo che si desidera mostrare a schermo. Ripetere per tutti i campi e utilizzare html e css per formattare i contenuti.

Inserendo ad esempio questo codice (con i nomi dei campi effettivamente utilizzati):

<ul style="list-style-type: none;">

    <li><strong><em>Tipologia: </em></strong><?php the_field('tipologia');?></li>

    <li><strong><em>Descrizione: </em></strong><?php the_field('descrizione');?></li>

    <li><strong><em>Link: </em></strong><?php the_field('link');?></li>

    <li><strong><em>Data: </em></strong><?php the_field('data');?></li>

</ul>

si può ottenere un risultato simile al seguente:

Inserire i campi ACF in un tema a blocchi, senza ricorrere agli shortcode

I temi a blocchi presentano file diversi rispetto ai temi classici. Anche la logica sulla quale è basata la loro strutturazione è diversa. Per questo motivo, chi ha attivato un tema di questo tipo non può utilizzare funzioni come the_field, ma deve lavorare con la “block binding”, una nuova funzione di WordPress che consente di collegare diverse tipologie di dati, compresi metadati come i campi personalizzati, agli attributi dei blocchi.

Il modo più semplice e rapido per utilizzare questa funzione è il seguente:

• aprire l’articolo o la pagina nel quale si desidera inserire campi personalizzati visibili nel frontend
• passare dall’editor visuale all’editor di codice (click sull’icona dei tre puntini verticali posta in alto a destra e poi su “Editor di codice“)

Inserire il codice seguente nel punto in cui si desidera che compaiano i campi personalizzati:

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"acf/field",

"args":{

"key":"nome_campo"

}

}

}

}

} -->

<p>spazio contenuto campo</p>

<!-- /wp:paragraph -->

Sostituire “nome_campo” con il nome assegnato al campo e ripetere l’intero codice per ogni campo che si desidera compaia sul sito. Formattare liberamente, utilizzando html, css e, tornando nell’editor visuale, i blocchi Gutenberg.

Ecco come può apparire il codice:

Questo l’output generato:

È utile tenere presente che alcune tipologie di campo potrebbero non essere supportate.