Introduzione ai campi personalizzati avanzati

In questo tutorial, ti mostrerò le basi dell'utilizzo del plug-in Advanced Custom Fields (ACF). ACF è un plugin abbastanza grande, quindi questo articolo non spiegherà assolutamente tutto ciò che offre, ma dovrebbe essere sufficiente per iniziare ad aggiungere i propri metadati e visualizzarli all'interno del tema.

Al momento della scrittura, ci sono due versioni di ACF: 4 e 5. Questo articolo è basato sulla versione 4, ma dovrebbe essere applicato anche se si utilizza la versione 5.

Che cosa sono i campi personalizzati avanzati?

Advanced Custom Fields è un'interfaccia utente per l'aggiunta di campi personalizzati, o meta dati, a WordPress. I campi personalizzati ti consentono di estendere i tuoi post o le tue pagine con più dati. Diamo un'occhiata a uno scenario comune:

Hai un tipo di messaggio chiamato film e si desidera allegare un punteggio su dieci alla fine di ciascuna recensione, insieme ad altri dati. Ora puoi inserire questi dati nel tuo post, ma cosa succederebbe se in seguito volessi utilizzare questi dati in un altro modo? Forse vuoi spostare il punteggio sopra la tua opinione; in questo caso, dovresti modificare manualmente ogni recensione e spostare manualmente questo punteggio, non eccezionale.

WordPress ha funzioni integrate per la creazione di campi personalizzati, ma include solo funzionalità di base e richiede la creazione di campi programmaticamente. ACF ha molti tipi di campi incorporati, alcuni dei quali includono:

testo
e-mail
Editor WYSIWYG
Immagine
file
seleziona la casella
date picker
color Picker

Oltre ad avere campi integrati, ACF ti offre una selezione di regole che possono essere utilizzate per determinare dove vengono mostrati i campi all'interno dell'amministratore di WordPress. Questo è veramente utile per mantenere la tua area amministrativa più pulita possibile. Ad esempio, puoi mostrare un gruppo di campi personalizzati solo se il tuo tipo di post è recensioni e il tuo modello di pagina è recensione in primo piano.

Iniziare

Prima di iniziare ad aggiungere alcuni campi, è necessario installare il plug-in ACF. Per farlo, dal pannello di WordPress vai a Plugin> Aggiungi nuovo. Dal Aggiungi plugin schermo, cerca Campi personalizzati avanzati e fare clic Installare. Assicurati di attivare il plug-in, se è stato installato correttamente, ora dovresti vedere a Campi personalizzati menu all'interno del tuo amministratore di WordPress.

Seguendo il tema di un sito web di recensioni cinematografiche, creeremo alcuni campi rilevanti. Per seguire questo tutorial, avrai bisogno di un tipo di messaggio personalizzato chiamato film. Per sapere come creare i tipi di post, consulta questo altro ottimo articolo di Tuts +. Detto questo, i metodi mostrati qui funzioneranno per molti altri tipi di campi personalizzati e la logica per la creazione e la visualizzazione dei campi rimarrà la stessa.

Creazione di gruppi di campi

I gruppi di campi sono esattamente ciò che dicono: gruppi di campi. Usando l'esempio di avere un tipo di messaggio chiamato film, potremmo voler includere i seguenti dati:

anno di rilascio
direttore
valutazione su dieci
Link su IMDb

Questi campi appartengono logicamente in un gruppo, poiché sono tutti correlati allo stesso tipo di post. Utilizzando i campi sopra, possiamo iniziare a pensare a quali tipi di campo potremmo aver bisogno per questi dati.

anno di rilascio: numero
direttore: testo
valutazione su dieci: numero
Link IMDb: testo (non esiste un tipo di campo URL)

Per iniziare ad aggiungere un gruppo di campi, fare clic su Campi personalizzati menu nella dashboard di WordPress. Ora fai clic sul Aggiungere nuova pulsante. Ti verrà ora presentato il Aggiungi un nuovo gruppo di campi schermo. Prima di fare qualsiasi altra cosa, diamo un nome al nostro gruppo sul campo digitando nella casella del titolo: ho chiamato il mio Dati del film.

Successivamente, possiamo aggiungere tutti i nostri campi. Clicca il Aggiungi campo pulsante per iniziare. Verrà ora visualizzato un modulo con i seguenti campi:

Etichetta di campo è il nome che appare quando si modifica. Trovo utile iniziare con lo stesso prefisso su ciascuno dei miei campi, ad es. Anno del cinema, Regista, eccetera.
Nome del campo è il nome che userete nel vostro codice per visualizzare il campo. Dopo aver digitato l'etichetta del campo, questo dovrebbe essere popolato automaticamente. Questa è una singola parola senza spazi, ma sono ammessi trattini e trattini. Per esempio, Anno del cinema come si trasformerebbe in un'etichetta di campo movie_year come nome del campo.
Tipo di campo è un campo di testo di base (sebbene ACF offra anche opzioni più avanzate).
Istruzioni sul campo sono istruzioni che gli autori possono vedere quando aggiungono i dati nella schermata di modifica, ad es. "L'anno del film dovrebbe essere sempre la data di uscita degli Stati Uniti".
necessario è una radio box dove si sceglie si o no. Scegliere "si" significa che il campo deve essere compilato per salvare nella schermata di modifica del post.
Valore predefinito è il valore che verrà visualizzato automaticamente quando si crea un nuovo post.
Testo segnaposto appare all'interno del tuo input nella schermata di modifica.
anteporre definiscecosa appare prima dell'input nella schermata di modifica.
Aggiungere definisce ciò che appare dopo l'input nella schermata di modifica.
formattazione dàvoi due scelte: "Converti HTML in tag" (impostazione predefinita) o "nessuna formattazione". Converti HTML in tag significa che qualsiasi HTML all'interno del tuo input sarà visualizzato sullo schermo; nessuna formattazione significa che qualsiasi HTML verrà ignorato.
Limite di caratteri ci consente di limitare la quantità di caratteri per un input. Ad esempio, sul nostro anno input dovremmo limitare i caratteri a quattro.
Logica condizionale è una funzionalità più avanzata che non vedremo in questo articolo.

Questi campi si presentano tutti per testo tipo di campo: su alcuni altri tipi di campo alcune di queste opzioni potrebbero non essere visualizzate o potrebbero esserci alcune opzioni aggiuntive. Come stiamo anche usando il numero tipo di campo, ci sono alcune opzioni aggiuntive a nostra disposizione:

Valore minimo è il valore numerico minimo da consentire nel campo. Per il nostro punteggio su dieci, sarebbe ragionevole impostarlo su uno, poiché non abbiamo intenzione di segnare nulla a zero.
Valore massimo è il valore numerico massimo da consentire nel campo. Di nuovo, potremmo usare questo per il nostro punteggio su dieci campi e avere il valore di dieci, poiché non vogliamo che questo valore sia superato.
Dimensione del passo definisce il valore con cui aumenta un numero quando viene premuta una freccia. Nel caso dello spartito del film, sarebbe una buona idea impostarlo come uno.

Ecco come ho impostato i miei campi:

Etichetta del campo: Anno del cinema
Nome del campo: movie_year
Tipo di campo: Numero
Necessario: sì
Valore minimo: 1900
Valore massimo: 2050

Nota i valori minimi e massimi qui - li ho impostati per aggiungere alcune convalide di base, in quanto è improbabile che avremo un film più vecchio di 1900 e uno più nuovo di 2050 nel corso della vita del sito web.

Etichetta del campo: Regista
Nome del campo: regista
Tipo di campo: Testo
Necessario: sì
formattazione: Nessuna formattazione

Dal momento che stiamo formattando il nostro output nel nostro HTML, non vogliamo che gli editor siano in grado di aggiungere HTML qui che potrebbe interferire con il nostro layout. Pertanto, "nessuna formattazione" è stata scelta qui.

Etichetta del campo: Punteggio del film
Nome del campo: movie_score
Tipo di campo: Numero
Necessario: sì
Valore minimo: 1
Valore massimo: 10
Dimensione del passo: 1

Ancora una volta, abbiamo un valore minimo e un valore massimo impostato qui per aggiungere qualche convalida; i nostri punteggi sono su dieci, quindi non vogliamo che gli editori siano in grado di inserire un punteggio più alto di questo. Allo stesso modo, non vogliamo che i punteggi inseriti siano inferiori a uno.

Etichetta del campo: Link del film
Nome del campo: movie_imdb_link
Tipo di campo: Testo
Istruzioni sul campo: Incolla l'URL completo di IMDb qui. per esempio. http://www.imdb.com/title/tt2015381/
Necessario: sì
formattazione: Nessuna formattazione

Ho aggiunto alcune istruzioni sul campo a questo input, perché non c'è URL tipo di campo quindi è difficile da convalidare. Le istruzioni dovrebbero rendere più facile per gli editor capire come utilizzare il campo.

Dopo aver aggiunto tutti i campi, assicurati di fare clic su Aggiornare pulsante. Una volta cliccato, tornerai al Modifica gruppo di campi pagina. Ci sono solo alcune altre cose che dobbiamo fare su questo schermo per far funzionare correttamente i tuoi campi.

Sotto l'area del campo c'è una casella chiamata Posizione-questo ci consente di controllare dove vengono mostrati i nostri campi personalizzati. Vogliamo solo che i nostri campi personalizzati mostrino se il tipo di post è film. Nel primo menu a discesa, selezionare Post Type, nella seconda selezione a discesa è uguale a, e nella terza selezione film.

L'ultima cosa che dobbiamo fare qui è impostare dove apparirà il nostro campo personalizzato nella schermata di modifica. Per fare ciò, scorri leggermente verso il basso Opzioni sezione. Questo ci permette di scegliere dove apparirà la metabox del campo personalizzato e di che tipo è, e ci dà la possibilità di nascondere altre cose dalla nostra schermata di modifica.

Le opzioni sono le seguenti:

Ordine n: se si dispone di più gruppi di campi, vengono creati in ordine dal più basso al più alto.
Posizione ha tre opzioni:

Lato
Alto (dopo il titolo)
Normale (dopo il contenuto)

Stile: standard o seamless (vedi l'immagine sotto per la differenza tra questi).
Nascondi sullo schermo: questo è un elenco di checkbox che ti permette di nascondere cose che potresti non aver bisogno, come tag, categorie o commenti.

Le opzioni che ho usato sono:

Posizione: Lato
Stile: Normale

Il resto è stato lasciato come predefinito.

Puoi verificare che i tuoi campi vengano visualizzati correttamente facendo un nuovo post (in questo caso nel file film tipo di posta). Se tutto ha funzionato bene, vedrai il tuo metabolismo. Ora è un buon momento per aggiungere alcuni dati di test.

Aggiunta di campi al tema

Ora che hai creato i tuoi gruppi di campi e hai alcuni dati di test, puoi iniziare a mostrare i dati all'interno del tuo tema o tema figlio.

Puoi usare WordPress standard get_post_meta () funziona con ACF, ma è consigliabile utilizzare le stesse funzioni di ACF, poiché ACF formatterà i valori in base al tipo di campo che hai creato. Useremo gli ACF il campo() funzione. Questa funzione visualizza il tuo campo personalizzato e prende un parametro del nome del campo, ad esempio:

Affrontiamo i nostri metadati. Avremo tutte queste informazioni in un singolo div.

  : 
 : 
 : / 10
 "target =" _ blank ">

Questo codice è abbastanza semplice: stiamo usando il _E funzione per internazionalizzare le nostre stringhe ed echeggiarle e quindi usare l'ACF il campo() metodo per echeggiare il valore del campo che abbiamo creato. Tutto questo è stato inserito in una lista non ordinata, all'interno di a div elemento con una classe di recensioni-meta, in modo che possiamo mirare con il nostro CSS.

Allora, dove va questo codice? In questo caso, è meglio creare un nuovo modello per il tuo tipo di post. Per fare ciò, crea una copia dei tuoi temi single.php file e nominalo single-postname.php-nel nostro caso single-movie.php. Ogni single.php sembreranno diversi ma dovrebbero avere tutti una cosa in comune: un loop WordPress. Il tuo ciclo WordPress dovrebbe assomigliare a questo:

I tuoi campi personalizzati possono andare fuori dal ciclo e esattamente dove li posizionerai dipende da come vuoi che la pagina appaia. Nel mio caso (usando il tema predefinito Twenty Fourteen), li ho posizionati appena sotto il loop e applicato alcuni stili di base al .recensioni-meta Classe CSS.

Conclusione

Abbiamo coperto le basi del plugin Advanced Custom Fields. Cioè, abbiamo aggiunto alcuni campi e ora li stiamo visualizzando sul nostro sito. C'è molto di più in ACF, però, e abbiamo appena scalfito la superficie. Esistono molti altri tipi di campo che è possibile utilizzare, oltre a funzioni più avanzate come la logica condizionale.

Non esitate a lasciare domande, commenti e feedback generali nel modulo sottostante!

Codice