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:

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:

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

Quanto sono belli i custom field in WordPress, eh? 👨‍💻 Scoprite come sfruttarli con l'incredibile @wp_acf grazie alla nostra ultima guida! 💪Click to Tweet

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:

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:

Come accedere ai campi personalizzati dall'editor a blocchi

Come accedere ai campi personalizzati dall’editor a blocchi

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

La funzionalità integrata in WordPress per i campi personalizzati

La funzionalità integrata in WordPress per i campi personalizzati

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:

Advanced Custom Fields nell’editor a blocchi

Advanced Custom Fields nell’editor a blocchi

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:

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:

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:

Creare un nuovo gruppo di campi ACF

Creare un nuovo gruppo di campi ACF

2. Aggiungere i Campi Personalizzati

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

Aggiungere un nuovo campo

Aggiungere un nuovo campo

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

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

Configurazione di un campo

Configurazione di un campo

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

Introdurre i valori per il Radio Button

Introdurre i valori per il Radio Button

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:

Creare un campo Number

Creare un 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)!

Altre opzioni per i campi

Altre opzioni per i campi

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

5 diversi campi ACF

5 diversi campi ACF

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:

Configurazione delle impostazioni del gruppo di campi ACF

Configurazione delle impostazioni del gruppo di campi ACF

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:

Advanced Custom Fields nell’editor a blocchi

Advanced Custom Fields nell’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?”:

Esempio di logica condizionale

Esempio di logica condizionale

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

Gli altri campi appaiono quando la casella è spuntata

Gli altri campi appaiono quando la casella è spuntata

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?”:

Aggiunta del campo Vero/Falso

Aggiunta del campo Vero/Falso

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?”:

Aggiungere la logica condizionale ad altri campi

Aggiungere la logica condizionale ad altri campi

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:

Nessun campo personalizzato nel frontend

Nessun campo personalizzato 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:

Stanco degli errori WordPress e di un host lento? Offriamo un supporto di prima classe, con esperti WordPress disponibili 24/7 e server incredibilmente veloci. Dai un’occhiata ai nostri piani

  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:

Dove trovare il nome del campo ACF

Dove trovare il nome del campo ACF

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 ():

Dove aggiungere il codice nel file del template del tema

Dove aggiungere il codice nel file del template del tema

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

Ora potete vedere i campi nel frontend

Ora potete vedere i campi nel frontend

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:

Utilizzo degli shortcode per visualizzare i dati ACF

Utilizzo degli shortcode per visualizzare i dati ACF

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

Gli shortcode appaiono identici al file del template del tema

Gli shortcode appaiono identici al file del template del tema

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:

Creare un nuovo template Single con Elementor

Creare un nuovo template Single con Elementor

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:

Elementor Pro

Opzione “Dynamic” di Elementor Pro

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

Select

Selezionare “ACF Field”

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

Selezionare il campo specifico da visualizzare

Selezionare il campo specifico da visualizzare

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

Anteporre o accodare informazioni

Anteporre o accodare informazioni

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:

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.


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