Come configurare i campi personalizzati di WordPress con ACF

I campi personalizzati di WordPress sono molto utili, è possibile infatti aggiungere delle funzionalità ad un articolo o una pagina, io stesso per la sezione blog ho utilizzato i campi aggiuntivi usufruendo del plugin ACF – Advance Custom Fields, vediamo alcuni esempi.

Come utilizzare Advance Custom Fields per WordPress, la guida in italiano

Per prima cosa scarichiamo il plugin da qui una volta installato ed attivato, nel back end di WP troveremo la voce “Advance Cutom Fields”, clicchiamo e procediamo con la spiegazione.

In questo esempio voglio creare un campo nel back end in cui poter inserire un link, il campo lo voglio vedere solo sugli articoli; nel front end dell’articolo del blog visualizzo un pulsante (buttons) che al click mi rimanda al link, questo link si deve aprire in un’altra finestra del browser, ovviamente il pulsante si deve vedere solo se nel back end ho inserito il link.

1- Prima di poter creare dei campi aggiuntivi, è necessario creare un gruppo, cliccare quindi su “Aggiungi Nuovo” ed assegnare un nome, per esempio “Funzioni Blog”

2- Cliccare su “+ Aggiungi campo” e compilare come segue

  • Etichetta campo : questo valore apparirà nel back end in ogni articolo, chiamiamolo “Link”
  • Nome del campo : questo valore è ciò che servirà ad ACF per fare il rendering del campo (comunque lo utilizzeremo dopo)
  • Tipo del campo : in questo caso selezioniamo “Testo”
  • Istruzioni del campo : potete inserire una descrizione della funzionalità del campo creato, è comunque facoltativo
  • Campo obbligatorio : indica se il campo deve essere compilato o no, è a vostra discrezione
  • Valore di default : questo è l’attributo “placeholder” dei campi input, potete lasciare vuoto oppure in questo caso inserire per comodità “http://” dato che i link utilizzeranno sempre questo suffisso
  • Appendi prima : mostra un testo prima del campo input (solo back end), supporta HTML
  • Appendi dopo : mostra un testo  dopo il campo input (solo back end), supporta HTML
  • Formattazione : selezionare “Converti HTML in tags”
  • Limite caratteri : possiamo limitare l’inserimento di caratteri, ma nel nostro caso non serve, è utile se il campo è una textarea
  • Logica condizionale : “No” in questo caso

Dovreste essere arrivati a questo punto

come utilizzare campi personalizzati wordpress

Come mostrare i campi aggiuntivi di WordPress solo sugli articoli o solo sulle pagine

Bene a questo punto è necessario porre una condizione, il campo deve essere mostrato nel back end solo sugli articoli e non anche le pagine, quindi riccoriamo alla funzione sottostante chiamata “Location”

Compilare come segue :

Mostra questo gruppo di campi solo se “PostType” “è uguale a” “post”

mostrare campi aggiuntivi wp solo in articoli

Adesso se apriamo un articolo da back end, sotto all’editor troveremo il campo personalizzato appena creato.

esempio campo aggiuntivo worpdress acf

Come inserire i campi personalizzati nel tema di WordPress

Bene a questo punto siamo a metà dell’opera, ora viene la parte di programmazione in PHP.

Ora se proviamo a compilare il campo con un valore e salviamo l’articolo, nel front end non vedremo nulla 🙁 questo perchè è necessario inserire del codice php all’interno dei file del tema WordPress utilizzato.

Normalmente il file da modificare si chiama single.php, ma ho visto alcuni temi che utilizzano anche content-single.php, dipende dal template che stai utilizzando.

1- Quindi naviga al seguente percorso wp-content/themes/nome_del_tuo_tema_attivo/single.php ed apri il file con un editor PHP o un editor di testo a basso livello, tipo Notepad, ecc.

2- Cerca questa stringa <?php the_content();?> , questa stringa è la funzione di WordPress che renderizza il contenuto degli articoli

3- Ora, prima o dopo questa stringa (a seconda che tu voglia mostrare il campo aggiuntivo prima o dopo il contenuto dell’articolo), incolla il seguente codice :

Questo codice renderizza il campo personalizzato creato con Advance Custom Fields, come si può notare ho inserito una condizione “if”, significa che il valore del campo aggiuntivo apparirà solo se è stato compilato nel back end, se invece volessi farlo apparire indipendentemente dalla sua compilazione, dovrai utilizzare il seguente codice :

la stringa PHP può essere racchiusa tra tag HTML, esempio

oppure anche applicando una classe CSS che poi andrà formattata, tipo

Il risultato è simile a questo :

come mostrare campi aggiuntivi nel tema wordpress

La documentazione del plugin (in inglese) con altri esempi di codice, è disponibile sul sito ufficiale qui

10 commenti su “Come configurare i campi personalizzati di WordPress con ACF

  1. Ciao,
    sto creando un sito di annunci per compravendita di auto e ho questa necessità:
    da una parte chi vende deve compilare un form con 7/8 parametri (marca, modello, cilindrata, luogo, prezzo ecc ecc) in modo da poter creare un database;
    d’altro canto chi vuole acquistare può accedere ad una pagina in cui è possibile effettuare una ricerca inserendo uno o più parametri di cui sopra,
    secondo te questo plugin può fare al caso mio?
    grazie e complimenti

  2. Ciao,
    complimenti per l’articolo, lo trovo interessante.
    Voglio farti una domanda:
    Ho un campo personalizzato in un articolo, che ho chiamato tour,
    nel quale ho inserito un url ‘http:/…’,
    domanda, devo acquisire questo url su un tag tour
    in un altra pagina ho usato questo codice ma non mi manda
    alla pagina dell’url inserita nel campo personalizzato… potresti dirmi
    gentilmente dove sbaglio? grazie

    ID, “tour”, $single = true); ?>
    <a href='’> Vision

  3. Salve,

    grazie dell’articolo, seguendolo sono riuscito a inserire nel mio blog un campo personalizzato (tipo testo) per visualizzare la numerazione della pubblicazione, stile giornale quotidiano.

    Ho un unico problema se lascio il richiamo fisso al campo non ho problemi, ma se metto l’IF per nasconderlo nel caso caso il campo sia vuoto ottengo un errore dal compilatore:

    parse error
    Outputs all parameters.
    echo() is not actually a function (it is a language construct), so you are not required to use parentheses with it. echo() (unlike some other language constructs) does not behave like a function, so it cannot always be used in the context of a function. Additionally, if you want to pass more than one parameter to echo(), the parameters must not be enclosed within parentheses.
    echo() also has a shortcut syntax, where you can immediately follow the opening tag with an equals sign. This short syntax only works with the short_open_tag configuration setting enabled.

    Come mai?

  4. Salve, a tal proposito conosce qualcosa che mi permette di poter creare un form dove il cliente puo scrivere la scelta del nome che vuol far incidere su un bracciale? nel prodotto posso creare attributi per la lunghezza, per la scelta del metallo, ma non so come fare per poter permettere ai clienti di scrivere quale nome vogliono sul bracciale scelto.
    Ti ringrazio in anticipo.
    Pippo

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?