Cerca
Filtra la ricerca ...
Frase esatta
Filter by Custom Post Type
Categorie
Tags

Puoi disiscriverti da una o tutte le liste in qualunque momento

Come configurare i campi personalizzati di WordPress con ACF

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

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”

Contenuto mancante

1- Disabilità ADS Block e ricarica la pagina

2- Ricarica la pagina

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

31 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

  5. Buongiorno Alessio,
    Questo articolo è interessante e potrebbe essermi utile … spero.
    Io uso yoast seo nel mio sito www (.) fisioterapiarubiera.com, ma è piuttosto pesante.
    Sto cercando il modo di inserire manualmente i “title tag” e il “meta description” all’interno dell’head del tema.
    Secondo te questi campi personalizzati possono essermi utili?

    grazie 1000

  6. Hai per caso un esempio di codice per inserire qualcosa nell’header?
    Mi spiego, io vorrei mettere nell’header, il link rel=prev o rel=next per indicare a google che la pagina continua in un altra pagina (un altro url).
    Purtroppo in rete non ho trovato niente.

    So solo che la scritta nella seconda pagina di 3 dovrebbe essere:

    Puoi aiutarmi per favore?

    Grazie 1000

  7. Salve, devo creare dei campi da inserire negli articoli che scarico dal csv perchè woocommerce mi da solo 6 campi cioè devo inserire tipo in tshirt colore,prezzo,misura,marca,fabbricazione, modello,e altri 20 campi circa, come devo fare?

  8. Buongiorno Alessio.

    io vorrei inserire nel mio woocommerce un custom fileds nei prodotti.

    Alcuni prodotti hanno delle foto 360 con un link esterno, quindi vorrei inserire un bottone con un link esterno.
    Queste informazioni verranno importate nel custom filed da un file csv (se il 360 ci sarà sul prodotto).

    Che procedura devo utilizzare per mostrarlo nel Front-End Prodotti?

    • Ciao Alessio,

      in ACF crei un campo testo o url, nelle impostazioni della metabox gli dice che deve apparire se la pagina è uguale a prodotto, lo ritroverai quindi in ogni prodotto di WooCommerce, poi per farlo vedere a front end devi modificare la view che renderizza il singolo prodotto, li metterai il richiamo al campo creato in ACF con relativa formattazione HTML e CSS per creare il tuo bottone.

  9. Ciao grazie per l’articolo, ho inserito dei campi personalizzati nella login del mio blog, volevo sapere se queste info inserite per le registrazioni sono recuperabili in qualche modo, perché non riesco a trovare soluzione per il momento 🙁

      • In pratica ho aggiunto dei campi personalizzati che compaiono nel momento in cui un utente intende registrarsi al blog. Per intenderci oltre il classico nome utente e email (impostati con il plugin Login Press) ho aggiunto campi rispetto a professione, afferenza, provenienza ecc.. rendendo alcuni campi obbligatori. Ora però non so come fare a recuperare queste info relative agli utenti che si stanno iscrivendo, poiché riesco a leggere solo nome utente e email, nella sezione Utenti del mio blog. Ho incollato un’immagine ma non so se tu riesca a vederla :P. Ti posto magari l’indirizzo del blog magari ti è più chiaro.

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice ed io non posso aiutarti!
Se necessiti delle modifiche al codice che ho scritto puoi chiedermi una consulenza, non ti risponderò nei commenti. Ti ringrazio per la collaborazione, sono certo che tu capisca.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.