Come aggiungere campi personalizzati in WordPress con Advanced Custom Fields

Hai mai avuto bisogno di aggiungere campi personalizzati in WordPress? Questa esigenza nasce per chi intende aggiungere elementi alla propria pagina o post, al di là dei classici Titolo e Contenuto.

Esiste una funzione nativa di WordPress che ti permette di farlo, ma non è molto semplice da usare e da personalizzare. In questa guida, ti spiegherò come aggiungere campi personalizzati in WordPress utilizzando Advanced Custom Fields.

Questo plugin ti permetterà di inserire campi personalizzati non solo nelle pagine e negli articoli, ma anche nei commenti, in categorie e tag, perfino nei custom post.

Cosa sono e come usare i campi personalizzati WordPress

I campi personalizzati, detti anche custom fields, sono delle informazioni aggiuntive che puoi inserire in un post e poi richiamarle all’interno del tuo sito. Sono costituiti da due elementi, ossia il nome (o chiave) e il rispettivo valore. La chiave identifica il campo e il valore consiste nell’informazione che ci interessa inserire.

Una volta aggiunto un campo personalizzato in WordPress, potrai richiamarlo in un altro post, ad esempio, e assegnargli un valore diverso.

Immagina di voler aggiungere un’immagine ai tuoi post che venga utilizzata nei post in evidenza sulla home page, che però sia diversa dalla featured image. Potrai, in questo caso, aggiungere un custom field chiamato “immagine_secondaria” e assegnargli il valore corrispondente al percorso dell’immagine.

Assegnando un valore diverso (e quindi un’immagine diversa) per ciascuno dei tuoi post, potrai mostrare in home page i tuoi post, correlati delle loro “immagini secondarie”.

Che cos’è Advanced Custom Fields

Utilizzare il sistema nativo di WordPress, come accennavo all’inizio, per inserire i campi personalizzati può essere piuttosto ostico, soprattutto se sei alle prime armi e non hai conoscenze tecniche. In tal caso, ti suggerisco comunque di iscriverti al nostro video corso WordPress per scoprirne tutti i segreti!

Se invece hai un buon livello di preparazione e vorresti intervenire più a fondo nella personalizzazione dei custom field, potresti sentirti un po’ limitato.

Ecco allora un plugin che fa al caso di entrambi: Advanced Custom Fields, infatti, da un lato rende molto semplice l’uso dei campi personalizzati in WordPress, dall’altro dà la possibilità di intervenire sul codice grazie a una documentazione molto chiara e precisa, che illustra come il campo personalizzato sia reso con una semplice variabile PHP.

Come funziona Advanced Custom Fields per aggiungere campi personalizzati

Advanced Custom Fields si installa e attiva come un qualsiasi plugin. Potrai subito iniziare ad aggiungere i tuoi campi personalizzati in WordPress entrando nel menu Campi Personalizzati dalla tua Bacheca.

Vai in Aggiungi Nuovo. Vedrai subito che il builder per aggiungere i campi è molto intuitivo. Assegnagli un nome per identificarlo, poi clicca su + Aggiungi Campo per configurarlo. Ti si aprirà tutta una serie di parametri da impostare.

I principali sono:

• Etichetta campo: questo è il nome che avrà il campo e sarà visualizzato nella pagina di modifica del post;
• Nome campo: è l’id del campo, perciò non inserire spazi (usa piuttosto dei trattini se necessario);
• Tipo di campo: può essere un campo testuale (come un’area di testo, una email, un numero), un particolare tipo di contenuto (come immagine o file), un campo che permette una scelta (ad esempio una casella di controllo o un pulsante radio), una relazione (link, categorie o tag), un tipo di script jQuery (mappa, selettore data/ora…), e infine un elemento di layout (come un messaggio, un testo che si apre a fisarmonica ecc.);
• Istruzioni: inserisci la descrizione su come usare il campo, che apparirà nella pagina di modifica del post;
• Richiesto: il campo può essere reso obbligatorio.

Parametri specifici dei campi personalizzati

I parametri successivi dipenderanno dal tipo di campo che hai scelto di inserire.

Per aggiungere dei campi personalizzati che permettano l’inserimento di immagini o file in WordPress, per esempio, potrai impostare un limite massimo di dimensioni o i formati consentiti. Per i pulsanti radio, invece, potrai scegliere se mostrarli in orizzontale o verticale. Vuoi aggiungere una Google Map? Potrai tranquillamente inserire le coordinate indicando latitudine e longitudine del centro della mappa.

Per qualsiasi tipo di campo, comunque, troverai alcuni parametri sempre uguali:

• Condizione logica: permette di impostare delle condizioni che, se sono vere, mostreranno il campo;
• Attributi contenitore: ti consente di impostare la larghezza del campo (in percentuale rispetto all’elemento che lo contiene) e di assegnare una classe o un id, che potrai sfruttare, ad esempio, per assegnare regole CSS personalizzate.

Creare e configurare un Field group

Clicca ora su + Aggiungi Campo se intendi inserirne un altro. Quando crei più di un campo, potrai anche stabilire delle condizioni logiche per farli apparire o meno a seconda della risposta data nel campo precedente.

Potrai inoltre riordinarli, duplicarli o eliminarli con un semplice clic.

Una serie di campi personalizzati creati in questo modo costituisce un Field group, cioè un gruppo di campi che hanno tra loro un rapporto di un qualche tipo.

Puoi stabilire delle regole per determinare dove mostrare il Field group. Infatti, una delle caratteristiche più interessanti di Advanced Custom Field è che potrai scegliere esattamente dove inserire i tuoi campi personalizzati WordPress.

Oltre a stabilire se utilizzarli in post o pagine di un certo tipo, in determinate categorie o in alcuni template di pagina, ad esempio, potrai anche attivarli solamente per utenti specifici o tipi di widget.

Nell’ultima sezione della schermata, potrai impostare altri parametri relativi alla posizione del Field group, allo stile di visualizzazione, al tipo di contenuto in cui il gruppo dovrà rimanere nascosto. Queste impostazioni riguardano la pagina di modifica, e non il front end.

Una volta terminata la configurazione del tuo nuovo Field group, clicca in alto a destra su Pubblica per renderlo attivo e aggiungere funzionalità alle tue pagine.

Quando modifichi un Field group esistente, troverai invece il pulsante Aggiorna per rendere effettive le modifiche.

Advanced Custom Field e integrazione con altri plugin

Advanced Custom Field può mostrare funzionalità diverse a seconda dei plugin che hai installato sul tuo sito WordPress.

Infatti, se, per esempio, usi WooCommerce, potrai mostrare il Field group solo nelle pagine Prodotto, oppure se il ruolo utente è Shop manager. Se invece usi All in One Schema, avrai la possibilità di aggiungere i dati strutturati al Field group.

Quindi, come vedi, oltre alle funzioni già piuttosto ricche di questo plugin, potrai integrarle con le funzionalità specifiche del tuo sito web e trarne il massimo dei vantaggi.

Come mostrare i campi personalizzati nel front end

Una volta che hai finito di aggiungere i campi personalizzati in WordPress, avrai bisogno, ovviamente, di mostrare il loro valore agli utenti che navigano sul tuo sito.

Oltre all’uso della funzione PHP get_field(), che è riservata agli utenti più esperti, potrai tranquillamente servirti di uno shortcode:

acf field="nome_campo"

(tra parentesi quadre) dove “nome_campo” corrisponde al valore Nome campo che hai inserito quando hai configurato il campo personalizzato.

Con grande semplicità, quindi, potrai visualizzare i campi personalizzati nelle tue pagine.

Conclusione

Advanced Custom Field ha molte più funzioni e personalizzazioni di quelle che ti ho mostrato in questa guida. Se hai intenzione di aggiungere campi personalizzati in WordPress, è sicuramente lo strumento più completo che potrai trovare.

Qualsiasi sia il tuo livello di competenze, troverai il sistema per aggiungere tutte le informazioni e funzionalità extra che desideri, e personalizzare al massimo il tuo sito web.

Hai già provato ad inserire campi personalizzati con altri sistemi?

Di quali tipi di campi personalizzati avresti bisogno per le tue pagine?

Fammelo sapere nei commenti e se hai domande non esitare a chiedere.

NOTA: Questa guida è stata aggiornata il 10 maggio, 2019