WordPress campi personalizzati sono una parte importante di ciò che rende WordPress un sistema di gestione dei contenuti flessibile, piuttosto che “solo una piattaforma di blogging”.

Quando si tratta di campi personalizzati WordPress, il plugin freemium Advanced Custom Fields è uno dei nomi più noti. Rende più facile lavorare con campi personalizzati in tutti gli aspetti, ed è anche l’argomento del nostro post di oggi.

In particolare, ti spiegheremo perché i campi personalizzati avanzati sono così preziosi e poi ti mostreremo passo dopo passo come puoi applicarli al tuo sito WordPress.

Ecco tutto quello che troverai in questo post:
C’è molto da coprire, quindi tuffiamoci in…

che Cosa Sono WordPress Campi Personalizzati? Cosa ti lasciano fare?

I campi personalizzati di WordPress consentono di aggiungere, archiviare e visualizzare informazioni aggiuntive su un contenuto in WordPress. A un livello più tecnico, i campi personalizzati consentono di memorizzare i metadati.

Anche se non hai familiarità con questo termine, i campi personalizzati alimentano gran parte delle funzionalità nei tuoi plugin e temi preferiti.

Per esempio, WooCommerce, il modo più popolare per costruire un negozio di eCommerce, utilizza campi personalizzati per memorizzare informazioni aggiuntive sul prodotto:

• Prezzo
• Peso
• Colore

O, se si dispone di un WordPress plugin event calendar, che plugin consente di utilizzare i campi personalizzati per memorizzare informazioni aggiuntive sull’evento, come ad esempio:

• Posizione
• Ora di inizio/fine
• Prezzo

Puoi anche creare i tuoi campi personalizzati per memorizzare informazioni rilevanti per le tue esigenze specifiche, che è ciò di cui tratta l’intero post.

Quanto sono fantastici i campi personalizzati in WordPress, uh? 👨 💻Scopri come approfittarne con l’incredibile @wp_acf nella nostra ultima guida! 💪Clicca per Twittare

Quando dovresti usare campi personalizzati?

Ora, potresti chiederti perché hai anche bisogno di campi personalizzati in primo luogo.

Ad esempio, se vuoi pubblicare un evento sul tuo sito WordPress, non potresti semplicemente inserire tutte queste informazioni come testo normale nell’editor di WordPress?

Beh, sì, si potrebbe. Ma l’utilizzo di campi personalizzati è un approccio migliore per alcuni motivi:

• Input più semplice — piuttosto che digitare le cose da zero, un gruppo di campi personalizzato ben strutturato renderà molto più facile l’input dei dati. Ad esempio, invece di digitare una data, puoi semplicemente selezionare la data da un selettore di date.
• Coerenza: le informazioni immesse nei campi personalizzati verranno sempre visualizzate in base alla configurazione, il che significa che saranno coerenti nell’intero sito.
• Facile aggiornamenti e manutenzione-se si vuole cambiare qualcosa su come che le informazioni vengono visualizzate in futuro, si può solo aggiornare una cosa, piuttosto che dover modificare ogni post singolarmente.

WordPress include funzionalità di campi personalizzati integrate

WordPress include effettivamente funzionalità integrate per aggiungere campi personalizzati ai tuoi contenuti. Nel classico editor TinyMCE, è possibile abilitare questo dall’area Opzioni dello schermo. Oppure, nel nuovo editor di blocchi, puoi abilitarlo dall’area Opzioni:

Puoi quindi inserire i tuoi dati di campo personalizzati usando le coppie chiave / valore:

Questo nativo di campi personalizzati funzionalità è completamente funzionale, ma non è il più facile modo per fare le cose, che è il motivo per cui un sacco di persone si rivolgono per l’Advanced Custom Fields plugin, invece.

Campi personalizzati avanzati Rende molto più facile

In parole povere, Campi personalizzati avanzati rende molto più facile lavorare con campi personalizzati in WordPress in pretty praticamente tutti gli aspetti.

Semplifica l’interfaccia per l’aggiunta e la gestione di campi personalizzati nella dashboard di WordPress e semplifica anche il processo per la visualizzazione di informazioni da campi personalizzati sul frontend del tuo sito. Questo fatto aiuta solo a spiegare perché è attivo su più di 1 milione di siti web con una valutazione di 4,9 stelle su oltre 1.000 recensioni.

Nel backend, ti consente di creare meta box user-friendly che includono tipi di campo preselezionati. Quindi, piuttosto che quella generica interfaccia di coppia chiave-valore (come quelle che hai visto sopra), sarai in grado di utilizzare i raccoglitori di date, le caselle di controllo e altro ancora:

In totale, Advanced Custom Fields offre oltre 30 tipi di campo diversi che è possibile aggiungere a qualsiasi area della dashboard, inclusi post, utenti, tassonomie, media, commenti e persino pagine di opzioni personalizzate.

È possibile visualizzare informazioni dettagliate su ciascun tipo di campo qui.

Campi personalizzati avanzati rende anche molto più facile visualizzare tali informazioni, con funzioni ben documentate, codici brevi, blocchi di Gutenberg e altro ancora.

Oppure, puoi trovare integrazioni con altri strumenti, come alcuni costruttori di pagine WordPress drag-and-drop.

Campi personalizzati avanzati gratuiti vs Pro: di quale hai bisogno?

Advanced Custom Fields è disponibile sia in versione gratuita che in una versione premium a prezzi accessibili.

Per la maggior parte degli usi di base, la versione gratuita è completamente a posto. Esso consente di accedere a quasi tutti i tipi di campo, così come tutte le funzioni di risparmio di tempo e user-friendly di cui sopra.

Se vuoi solo memorizzare alcune informazioni extra sui tuoi contenuti, la versione gratuita è tutto ciò di cui hai bisogno.

Detto questo, la versione Pro aggiunge alcune funzionalità piuttosto convenienti che ti aiutano a utilizzare campi personalizzati avanzati in modi più interessanti:

• Repeater fields — questi consentono di ripetere determinati campi / gruppi di campi su base post-by-post. Ad esempio, se si aggiungono informazioni su un altoparlante a un evento, un campo ripetitore ti aiuterà a gestire la situazione in cui c’è più di un altoparlante (potresti semplicemente “ripetere” i campi per l’altoparlante tutte le volte che è necessario, il che ti consente di gestire i casi limite in cui ci sono più altoparlanti).
• Blocchi ACF-visualizzare i campi come un blocco Gutenberg, piuttosto che una casella meta. Ciò è particolarmente utile se si sta costruendo un sito per un cliente e si desidera fornire loro un modo semplice per immettere e visualizzare dati di campo personalizzati.
• Campo contenuto flessibile-crea layout da altri campi. È un po ‘ come un generatore di pagine leggero basato su informazioni sul campo personalizzate.
• Campo Galleria-carica più immagini in un singolo campo.

Ci sono anche alcune altre differenze, come le pagine delle opzioni, la possibilità di clonare i campi, miglioramenti ai campi delle relazioni e altre modifiche più piccole.

Puoi vedere tutte le funzionalità di ACF PRO qui.

ACF PRO inizia a $25 per l’utilizzo a vita su un singolo sito. Oppure, puoi pagare 1 100 per l’uso a vita su siti illimitati.

In caso di dubbio, iniziare con la versione gratuita fino a capire esattamente quale funzionalità è necessario. È sempre possibile aggiornare in seguito, se necessario.

Campi personalizzati avanzati Tutorial: Come aggiungere i tuoi campi

Ora scaviamo nel tutorial sui campi personalizzati avanzati e ti mostrerò come creare e visualizzare il tuo primo set di campi personalizzati.

Per questo esempio, supponiamo che tu abbia un blog sull’esecuzione. Sei come really davvero in esecuzione e si desidera condividere i vostri allenamenti giorno per giorno con i tuoi lettori. In particolare, con ogni post del blog, si desidera condividere una corsa:

• Scopo-diciamo che hai due diversi tipi di corsa: “lavoro di velocità” e “condizionamento”.
• Distanza: quanto è durata la tua corsa.
• Ora di inizio-quando hai iniziato la corsa.
• Finish Time — quando hai finito la tua corsa.
• Posizione-dove si è svolta la corsa.

Per raccogliere tali informazioni, ti consigliamo di aggiungere cinque campi personalizzati.

È importante notare che i principi che imparerai in questo tutorial avanzato su Campi personalizzati si applicano a qualsiasi caso d’uso. Stiamo solo scegliendo un esempio specifico perché aiuta ad avere un esempio tangibile a cui connettersi.

Spezzeremo questo tutorial in due parti:

1. Come aggiungere e gestire i campi personalizzati sul backend.
2. Come visualizzare le informazioni sul campo personalizzato sul frontend del tuo sito.

Crea un nuovo gruppo di campi

Dopo aver installato e attivato la versione gratuita di Campi personalizzati avanzati da WordPress.org, vai a Campi personalizzati > Aggiungi nuovo per creare il tuo primo gruppo di campi.

Come suggerisce il nome, un “Gruppo di campi” è un gruppo di uno o più campi personalizzati che vengono visualizzati insieme nella dashboard di WordPress.

In questo esempio, verrà creato un gruppo di campi che contiene cinque campi personalizzati.

Assegna un nome al tuo gruppo di campi, quindi scegli la sua Posizione. Per questo esempio, vogliamo visualizzare questi campi personalizzati per i normali post del blog WordPress, in modo da poterlo lasciare come post predefinito.

Tuttavia, se vuoi visualizzare i tuoi campi personalizzati altrove, come accanto a un tipo di post personalizzato o con una tassonomia, vorresti cambiarlo. È inoltre possibile impostare più regole per visualizzare i campi in più posizioni:

Aggiungere Campi Personalizzati

Avanti, fare clic su + Aggiungi Campo pulsante per aggiungere il primo campo personalizzato:

si aprirà un sacco di opzioni, ma non necessariamente bisogno di compilare tutto.

Le due scelte più importanti sono:

• Etichetta del campo — questo è ciò che apparirà nell’editor. Sarà anche usato per generare il nome del campo, che è quello che userai nel codice. Non è necessario modificare il nome del campo (anche se è possibile se necessario).
• Tipo di campo-questo è il tipo di informazioni che si desidera raccogliere. Ad esempio, si desidera un campo Numero per raccogliere informazioni sui numeri o un campo e-mail per raccogliere un indirizzo e-mail.

Per questo primo campo, si desidera un tipo di campo Pulsante di opzione:

più in basso, è possibile inserire il pulsante di selezione di opzioni nelle Scelte di dialogo:

Ci sono anche un certo numero di altre scelte che si possono fare, come se un campo è obbligatorio e un valore di default. Sentiti libero di configurarli in base alle tue esigenze.

Diamo un’occhiata ad un altro esempio: un campo personalizzato per raccogliere la distanza della corsa. Questa volta, vorresti un tipo di campo numerico:

Potresti anche rendere le cose un po ‘ più user-friendly optando per aggiungere l’unità di distanza. E se vuoi, puoi anche aggiungere la convalida con un valore minimo e un valore massimo. Ad esempio, probabilmente non stai andando su corse di 1.000 miglia (e se lo fai OM OMG, sei l’ultimo Forrest Gump)!

Basta ripetere il processo per tutti gli altri campi personalizzati che si desidera raccogliere. Al termine, dovrebbe essere simile a questo:

Configura le impostazioni e pubblica

Per finire le cose, scorri verso il basso fino alla casella Impostazioni. Qui, puoi controllare come vengono visualizzati i tuoi campi nell’editor di WordPress.

La maggior parte del tempo, puoi lasciare questi come valori predefiniti. Ma sentitevi liberi di cambiare le cose, se si vuole. Ad esempio, puoi scegliere di visualizzare i tuoi campi personalizzati sopra il normale editor di WordPress:

Una volta che hai fatto le tue scelte, Pubblica il tuo gruppo di campi per renderlo vivo.

Aggiungi alcune informazioni nell’editor di WordPress

Una volta pubblicato il tuo gruppo di campi, vedrai apparire i tuoi campi quando vai a creare un nuovo post.

Per impostazione predefinita, appariranno insieme sotto l’editor sia nel classico editor TinyMCE che nel nuovo editor di blocchi:

Le informazioni che inserisci qui verranno memorizzate nel database WordPress del tuo sito per un facile recupero (lo vedrai nella prossima parte del nostro tutorial sui campi personalizzati avanzati).

Esplorare la logica condizionale

Prima di andare avanti, facciamo una rapida deviazione.

Vedi, uno dei motivi per cui Advanced Custom Fields è così popolare è a causa di tutte le implementazioni interessanti che consente.

E una potente opzione qui è la logica condizionale, che consente di mostrare/nascondere i campi in base a come è stata data risposta a un campo precedente.

Diamo un’occhiata a un rapido esempio di come funziona

Diciamo che vuoi blog sul cibo, i tuoi viaggi o qualcosa di diverso dalla corsa. Quando stai scrivendo su un argomento non eseguito, non ha molto senso visualizzare i campi personalizzati per informazioni sulla corsa, giusto?

Cosa succede se, invece di visualizzare automaticamente tutti i campi personalizzati appena creati, è possibile aggiungere un campo personalizzato che dice ” Questo post è una corsa?”:

Se si seleziona la casella, vengono visualizzati automaticamente i campi delle informazioni di esecuzione. Se lo lasci deselezionato, rimangono nascosti:

Questo è ciò che la logica condizionale ti permette di fare!

Per configurarlo, devi modificare il tuo gruppo di campi e aggiungere un nuovo campo Vero / Falso per “È una corsa?”:

Quindi, si modificano i campi esistenti e si attiva la logica condizionale in modo che ogni campo venga visualizzato solo quando “Si tratta di una corsa?”il campo è selezionato:

Come visualizzare i campi personalizzati avanzati sul Frontend

Ok, siamo a metà del nostro percorso di campi personalizzati avanzati. Ora puoi aggiungere informazioni ai tuoi campi personalizzati, associarle al tipo di post pertinente e memorizzarle nel tuo database.

Tuttavia, c’è ancora un potenziale problema: le informazioni dai tuoi campi personalizzati non appaiono ancora da nessuna parte sul frontend!

Cioè, anche se hai aggiunto alcuni campi personalizzati all’editor per i tuoi post sul blog, il tuo post sul blog sembra ancora un normale post sul frontend:

Risolviamo questo problema.

Ci sono alcuni modi diversi per visualizzare i dati dei campi personalizzati avanzati sul frontend del tuo sito. Il metodo esatto che scegli dipenderà dalle tue esigenze e dal tuo livello di conoscenza. Qui ci sono tre diversi modi per raggiungere questo obiettivo:

1. File modello del tuo tema — questo richiede un po ‘ di conoscenza tecnica, ma è l’approccio migliore la maggior parte del tempo, soprattutto se sei a tuo agio a lavorare nei file modello del tuo tema.
2. With a shortcode — questo è super semplice e una buona opzione se si desidera solo per inserire i dati di campo personalizzati caso per caso. Tuttavia, richiede molto più lavoro manuale perché è necessario aggiungere codici brevi per ogni post.
3. Con Elementor Pro-questo è fantastico perché elimina completamente la necessità di lavorare con PHP, ma è un prodotto premium e significa anche che dovrai usare Elementor Pro per il tuo template.

Puoi fare clic sopra per passare direttamente a un metodo specifico o puoi leggerli tutti. Dipende da te.

Come aggiungere campi personalizzati avanzati nei file Template del tema

Il primo modo per visualizzare le informazioni sul campo personalizzato è aggiungere le funzioni PHP dei campi personalizzati avanzati direttamente ai file template del tema figlio.

Questo è un po ‘ avanzato perché richiede di scavare nei file del modello del tuo tema, ma assicura che i tuoi campi personalizzati vengano visualizzati automaticamente nello stesso punto ogni volta.

In particolare, è necessario modificare il singolo modello per il tipo di post in questione.

Per un normale post sul blog, questo è single.PHP. Oppure, alcuni temi suddividono le cose in parti del modello. Ad esempio, per il tema TwentyNineteen, è effettivamente necessario modificare il contenuto-singolo.parte del modello php.

Se ti senti perso qui, potresti voler usare un metodo diverso.

Una volta trovato il file del modello di tema per il tuo singolo post, puoi utilizzare la funzione the_field() dei campi personalizzati avanzati per visualizzare le informazioni di un campo. Ad esempio,

<?php the_field('FIELD_NAME'); ?>

Scopri di più qui.

Ad esempio, per visualizzare il campo “Scopo”, si usa

<?php the_field('purpose'); ?>

È possibile trovare il nome del campo quando si modifica un gruppo di campi:

Così, unendo un po ‘ di HTML con PHP, si potrebbe ottenere qualcosa di simile 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 al di sopra del normale contenuto del post, devi aggiungere questo al tuo modello di tema del file sopra the_content():

E ora, dopo l’aggiornamento di post di blog, è possibile vedere il campo personalizzato dati di cui sopra il regolare WordPress contenuto:

Per saperne di più, check-out Advanced Custom Fields’ intera documentazione.

Come visualizzare i dati dei campi personalizzati avanzati con un Shortcode

Per un modo molto più semplice per visualizzare i dati dei campi personalizzati, è anche possibile utilizzare codici brevi. Il rovescio della medaglia qui, però, è che è necessario aggiungere lo shortcode ogni volta che si desidera visualizzare un campo personalizzato. Non esiste un modo semplice per automatizzare questa attività.

Lo shortcode è questo:

Ad esempio, se lo hai inserito nell’editor di WordPress:

Quindi, il frontend del sito sarebbe esattamente lo stesso aspetto come il precedente modello di tema del metodo:

Come Visualizzare Avanzata Campi Personalizzati con Elementor Pro

Elementor è uno dei più popolari pagina di WordPress costruttori. Ti consente di creare i tuoi progetti utilizzando l’editing visivo, drag-and-drop. In una nota a margine, Elementor è uno dei partner ufficiali di Kinsta.

Con Elementor Pro, l’add-on a pagamento, puoi anche creare i file del modello del tuo tema, inclusa l’opzione per inserire dati di campo personalizzati dinamici da campi personalizzati avanzati nei tuoi progetti.

Questa è un’ottima opzione se vuoi la flessibilità di includere automaticamente dati di campo personalizzati nei tuoi modelli, ma non sentirti a tuo agio nel apportare modifiche dirette al codice ai file di modello del tuo tema.

Per iniziare, devi andare per i Modelli > Tema Generatore e creare un nuovo Elementor modello per il tuo post Singolo:

Si potrebbe aggiungere il regolare Elementor widget per il Titolo del Post e il Contenuto del Post. Quindi, per visualizzare i dati dei campi personalizzati, è necessario aggiungere i normali widget dell’editor di testo. L’unica differenza qui, invece di modificare il testo, dovresti selezionare l’opzione Dinamica:

Dopo questo, è possibile selezionare ACF Campo a discesa:

Da lì, è possibile selezionare il campo che è stato aggiunto con Advanced Custom Fields:

E si può anche utilizzare le Avanzate fisarmonica scheda anteporre o posporre informazioni, che consente di aggiungere etichette e le unità:

Facile, giusto? Ora basta ripetere per altri campi personalizzati!

Sommario

Utilizzando campi personalizzati avanzati, è possibile arricchire le pagine e post del blog con più dati e informazioni con una soluzione facile da usare. Di più: si può iniziare a raccogliere informazioni aggiuntive per qualsiasi contenuto sul tuo sito e poi visualizzarlo sul frontend per i visitatori.

Per farlo, hai 3 opzioni:

• I file del modello del tuo tema
• Con uno shortcode
• Con Elementor Pro

La conoscenza che hai acquisito in questo post ti permetterà di sbloccare il profondo potenziale di WordPress per costruire siti personalizzati al 100% che vanno ben oltre le radici di blogging di WordPress.

L’unica domanda rimasta è questa:

Cosa creerai con campi personalizzati avanzati? Condividilo con noi nei commenti qui sotto