Come aggiungere campi personalizzati in WordPress

Aggiornato il da | 44 commenti | Disclaimer I nostri contenuti sono supportati dai lettori. Questo significa che se clicchi su uno dei link ai servizi che raccomandiamo e poi effettui un acquisto, è possibile che ci venga accreditata una commissione. È così che finanziamo questo sito web, lo manteniamo attivo e ti forniamo continuamente le informazioni più affidabili.

Come aggiungere campi personalizzati in WordPress

Anche tu, come tanti altri che mi hanno già chiesto, hai mai avuto bisogno di aggiungere campi personalizzati in WordPress, ?

Questa esigenza nasce per chi ha l’intenzione e molto spesso la necessita, di aggiungere elementi personalizzabili, alla pagina o post del proprio sito web, al di là dei classici Titolo e Contenuto.

Indice dei contenuti
Visualizza altro

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

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.

Aggiungere campi personalizzati con Advanced Custom Fields

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.
parametri campi Advanced Custom Field

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.

visualizzazione campi personalizzati

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 aggiungere campi personalizzati con WooCommerce

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.

Guide correlate che ti potrebbero interessare:

Domande? Lascia un commento!

  1. Immagine avatar per Gianfranco
    Gianfranco

    Grazie Andrea per il tuo prezioso articolo.
    Ho un problema di una banalità estrema eppure non trovo documentazione a supporto: vorrei che sul front-end il valore di un dato campo venisse mostrato insieme alla relativa label.
    Cioè, se il mio campo si chiama “Colore” e chi ha inserito l’articolo ha indicato “Verde”, vorrei che sul front-end apparisse, come logica vuole:
    Colore = Verde.
    Tutti i tutorial indicano come recuperare il dato inserito (“Verde”), ma va anche detto che è quasi inutile dato che i custom field vengono già riconosciuti nativamente da WP e dai maggiori builder (Divi, Elementor, ecc.).
    Però non trovo il modo di recuperare la label senza dover mettere mano al PHP (cosa che in questo caso devo purtroppo evitare).
    Mi sto perdendo in una banalità?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Gianfranco, purtroppo non abbiamo soluzioni senza l’uso del PHP. L’unico consiglio che possiamo darti è quello di contattarci, in questo modo potremo vedere “dietro le quinte” e trovare una soluzione adatta al tuo caso. Un saluto!

  2. Immagine avatar per Alessandra
    Alessandra

    Mi piacerebbe sapere come usare la funzione get_fiel nel file single.php di un tema child, che ha questo codice:
    print_styles( ‘kadence-content’ );
    /**
    * Hook for everything, makes for better elementor theming support.
    */
    do_action( ‘kadence_single’ );

    get_footer();

    Inoltre vorrei che i campi personalizzati venissero pubblicati non solo nel singolo articolo, ma anche nella pagina degli articoli e nelle miniature del blocco “ultimi articoli”, dove attualmente vedo solo la miniatura dell’immagine in evidenza, il titolo e il riassunto.
    Come si può fare? Grazie.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Alessandra, non possiamo risponderti in modo esauriente tramite commento. Puoi contattare Assistenza WordPressper avere supporto sul tuo sito web e anche formazione 1 a 1 con i nostri sviluppatori.

  3. Immagine avatar per Ludovigi
    Ludovigi

    Tutto molto chiaro, complimenti.
    Ho solo un problema: di un gruppo con una Gallery che prima vedevo regolarmente in un template e potevo aggiornare improvvisamente non riesco più a vederne i contenuti. Avevo inserito una serie di immagini e link che sono spariti nella pagina di editing.
    Nella visualizzazione della pagina però si vedono.
    Inoltre nella pagina di editing posso inserire contenuti in una nuova riga che viene visualizzata, ma aggiornando non produce alcun cambiamento nella pagina.
    Hai qualche suggerimento?
    Thanks in advance!
    Ludovigi

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, può essere un problema di cache. Hai un plugin di cache attivo sul sito?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati*